css columns

[mikemastah]

I have the following problem:

I have '<div> C' in that div i have both '<div> A' and '<div> B'

what I want is that whenever A or B expands C also expands (not like in the image where B overlaps D)

I tried

.C {
   position: relative;
   width: 846px;
   height: 100%;
}

.B {
   position: absolute;
   right: 0;
   width: 250px;
   margin-left: 596px
}

.A {
   width: 590px;
   left: 0;
}

but it didn't work and gave me the result in the image.

I also tried floats but it gave me the same result.

I have no idea what else to try please help.

[Floydian]

Re: css columns

Try adding a div with clear: both after a and b, but in c.

 

<div id="c">
   <div id="a">
   </div>
   <div id="b">
   </div>
   <div id="blocker" style="clear: both; width: 100%">
   </div>
</div>

 

That will cause the "blocker" div to expand c ;)

Hope that helps...

[mikemastah]

Re: css columns

Thanks Floydian,

I knew it had something to do with 'clear: both;' :)

Issue resolved

[POG1]

Re: css columns

you could of used a br to clear instead of a div, same effect but uses less code :)