Container div not expanding

[Crump]

I am having a real issue with my setup. I am trying to get everything working in my three-column fluid setup. So far it is good, but my one issue is basically:

My right column will not expand the container div.

Here is the container div:

#main {
margin: 0px;
padding: 10px;
background: #DADADA; (arbitrary color)
}

Here is the right column:

#rightcol {
position:relative;
right:-10px;
float:right;
width:220px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
width:200px; /* actual value */
background:#D7C4FA;
z-index:99;
}

and the left:

#leftcol {
position:relative;
left: -10px;
top: -10px;
float:left;
margin: 0 0 -10px 0;
padding:0px;
z-index:100;
width:213px; /* for IE5/WIN */
voice-family: "\"}\"";
voice-family:inherit;
width:193px; /* actual value */
}

and the center:

#centercol {
position:relative;
top:-15px;
padding:0 190px 0 185px;
margin:15px 10px -10px 10px;
}

I know it is messy, but I am new at CSS! Any clues?

[kk5st]

Assuming that #main is the parent element,

#main {
display: inline-block; /*sets hasLayout - required for IE*/
display: block; /*resets to proper property value without resetting layout*/
overflow: hidden; /*causes modern browsers to enclose child floats*/
margin: 0px;
padding: 10px;
background: #dadada;
}

The hasLayout trigger tnx to SuzyUK.

cheers,

gary

[Crump]

I have also seen a method of putting a small div just before the close of the container with a clear:both in it. It seems to work.

[SuzyUK]

yes you can using a clearing div after the two floats but inside the container but put something in it..

<div style="clear: both">&nbsp;</div>

or else Moz will still not see it

or you can use

<br style="clear: both />

in the same place, instead of a clearing div

or if you want to make container clear without extra HTML markup then you can use the layout trigger/overflow trick as per #2

(PS: Hi Gary, Nice to see you here :))

it should be noted that the

display: inline-block;

hasLayout trigger will only work if the

display: block;

part of it is in a separate rule though..

e.g.

#container {
margin: 50px auto;
border: 1px solid #eee;
display: inline-block; /*sets hasLayout - required for IE*/
overflow: hidden; /*causes modern browsers to enclose child floats*/
margin: 0px;
padding: 10px;
background: #dadada;
}

#container {display: block; /* resets to proper property value without resetting layout*/}

Suzy

[kk5st]

it should be noted that the display: inline-block; hasLayout trigger will only work if the display: block; part of it is in a separate rule though..

Ah, I had not noted that distinction. My usage has always been as similar to Tony's clearfix thingy. Tnx.

cheers,

gary