box model problem

[artisites]

hey guys

i've laid out three div layers on my page. left div and right div are held within container div.

the container alignment is set to right, the left div is set to float to the left.

this allows me to have the two div layers side by side.

i'm having difficulty with it though - even with the height of the left div fixed at 200px, it only shows if the content in the right div is equal to or greater than 200.

if the content in the right div is less than 200, both divs are only shown until the content in the right div ends.

how do i get the left div to stay the set height of 200px?

[welshstew]

you will need to use the faux columns method for this.

Check out his article: http://www.alistapart.com/articles/fauxcolumns/

[artisites]

said article indicated that css will stretch the div only as much as it needs to vertically.

my problem is that there IS content in the div that isn't being displayed.

the column that's floated to the left will only display as far down as there is content in the right.

surely if there is content in the left it should stretch to display that?

[Aso]

with the height of the left div fixed at 200px, it only shows if the content in the right div is equal to or greater than 200.

This is most likely a float issue. According to the W3C spec, a float should be taken out of the document flow.

In your case, the left column (even though it's 200px high) will not push the container down. You need to clear the float in order to do so.

Use this slice of CSS on your container;

Code: Select all

#container:after { // replace #container with the id/class of your container
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

[artisites]

thanks for the replies guys, i really appreciate it.

tried the :after code, still not displaying the image.

it looks like this




tried on both the container div and the floating div.

i've been taught this way to lay out columns, having i been doing it wrong all along?!

the site is already using nested divs to layout the navigation on the left and content on the right. these are further nested. are they ALL wrong?!

[artisites]

(the green and blue are just so i can see the layers at the moment. im converting it from tables) (the cart software all runs on tables).

[Aso]

Sorry artisites, but a link would really help. If you can't get it hosted, could you post the HTML and CSS you're having issues with?

[artisites]

http://www.artisites.net/test.html

it's fine when there's pleanty text in the description because it brings the left div down.

[artisites]

nevermind - i've separated the bottom related products div from outside the top container and now it's working, with the code you provided aso186.

thanks for all your help!