3 Col Layout Issue

HTML & CSS
1

I’m using a 3 col layout for a design however the middle column isn’t expanding to the same height as the left or right columns.

It should be that the 3 columns are the same height regardless of content so it looks consistant as I’m unsure how much content will be in the middle section or which column will have the most content.

Any tips?

Thanks in advance.

Toad Footwear: Home Template

2

Hi,

You don’t seem to have specific column colours so you could just set the wrapper’s background to white.

e.g.


#oContent {
[B]    background:#FFF;[/B]
    float: left;
    width: 960px;


}

If you did have three column colours that needed to reach to the bottom then instead of using a white background on the above element make yourself a “faux column” image and repeat it down the y-axis of that wrapper above. The image would be 960px wide by about 5px high and would have the three column color backgrounds (and borders if necessary). As the wrapper always contains the three columns then it will always be the right height.

There are other methods of making equal columns but the above is still the easiest for a fixed width layout.

3

Thanks.

I’ve read through that information and have applied it to my template and almost there except the content now doesn’t seem to stretch the columns down now?

Thanks

4

Hi,

Unfortunately you have misunderstood the techniques needed and changed your elements form floated to absolute and that won’t work. The columns themselves need to be floated as before.

What are the column colours or graphics that you need each column to be?

You don’t seem to have any need for anything special as all columns seem to be white and if so and the answer I gave in the first post would have solved that without needing any additional code.

If you did want 3 column colours then the faux image could have been applied to that wrapper as mentioned before without changing the html or any other code.

Lastly if you did not want to use an image for the columns colours (although I don’t know why as its the easiest option) then you can use my absolute overlay method but it means adding 3 empty elements to the html. These empty elements hold the column colours and sit under the floated content. Nothing else has to change.

Revert your page back to floated and if you can let me know what each column colour is supposed to be then I’ll give you some example code.