does anyone have a solution for this?
the black div is left aligned and it’s width can very, the two right divs need to be aligned left too, but they also have to span across the entire page.
Hi,
It looks like you are talking about the entries in the right column with an image to the left. If that is the case we are referring to each entry as the main container.
Yes, that will work just fine if your left column content is just an image. If the images were different widths it would work as well sine they would set the width for the left column.
The overflow:hidden on the main container is enclosing the floated images and the overflow:hidden on the right element is stopping it from sliding under the left floated images.
thank you Rayzur.
it seems that all you have to do is add overflow:hidden to the main container and overflow:hidden + display:block to the container element from the right.
the left div in my case is a image, so I won’t have any problems with the width of that column
ps: this is where I’m using this in case you want to see…
does anyone have a solution for this?
Hi,
It can be done to some extent by using a shrinkwrap float for the left column.
What will cause problems in a x-browser situation is a fluid width block (such as a simple “p” tag) in the left float.
Here is an old demo that shows the basic set up. It has a width set on the “p” in the left column though.
If you remove the width from the #left p it all falls apart.
If it wasn’t for IE6-7 I could use display:table and set a width for the left column. In table display it would treat width as min-width and allow the “p” to be fluid.
The only x-browser method I know of to handle a fluid block in the left column is to use a real table (as much as I hate to say that). Just as with using display:table you would set a width and it would be treated as min-width.
The question is, could tables do this (since CSS tables=tables, just not markup wise)
Either way, as Black said, IE doesn’t support them (IE6/7 and down) and tables aren’t the place here, even if they could do it 
CSS tables might do the trick very well, but if I’m not mistaken, none of the IE versions out there recognize CSS tables at all. That’s why I’ve never bothered to learn the techniques.
just out of curiosity. can this also be done using css tables?
float on the left div and display:table-row on the right one seems to work too, but I’m not sure about browser compatibility. what do you think?
THat’s because min/max width doesn’t work in IE6, you’d need expressions to get it working (if you wnat it supported)
left column has variable width, so i don’t know the value for margin-left.
the code above seems to do what I want, only problem is doesnt work in IE6
thanks optimus
Hi, as optimus alludes to (man that sounds cool) the main trick is to make a two column layout, but don’t float hte 2nd column
Aka the first c olumn floated with width:200px, and the next column is unfloated, with a margin-left:200px (note how those two values match)
There is no sure fire way to do this however, (not counting JS) if you want the left column dynamic (unless you do min/max widths as I’m presuming the above coders code works for liquid environments :))
Something like this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div style="width:100%;">
<div style="float:left; background-color:black; max-width:50%; min-width:30%; color:#FFF">Text text text<br />Text<br /> Text<br /> Text Text<br />text</div>
<div style="background-color:#F00; max-width:50%; min-width:30%;">Text Text Text</div>
<br />
<div style="background-color:#999; max-width:50%; min-width:30%;">Text</div>
</div>
</body>
</html>