Full Length Columns

...with a variable widths.

[Gibble]

Hello Everybody!

So, I have an interesting design.

It's two columns, header, footer, and a border around the page.

Pretty simple...except the two columns aren't always the same width. It's ideally defined by the image in the left column. And the right column should just take up the rest of the space. Which wasn't a problem either, until the right column's content ended up being longer than the lefts and wrapped below.

How can I keep the columns, there starting width, and still maintain a standard layout across all the pages, without hardcoding a value(s) on each page?

#container {
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
}
#left
{
float:left;
margin: 0;
padding: 0;
text-align:center;
}
#main 
{
margin: 0;
padding: 0px;
text-align:left;
}
<div id="content">
 <div id="left">
  <!--Place an image or something here-->
 </div>
 <div id="main">
  <!--Place lots of text here-->
 </div>
</div>

Any ideas?

In FF I can set the display to "table-cell" on the main (right) column and it works...not sure what to do for IE.

[edited by: Gibble at 6:29 pm (utc) on Feb. 3, 2008]

[Xapti]

Just so you know, the code you gave had an id "container" for the CSS, but id "content" for HTML.

So you're saying if you put an image wider than <800px minus the left image> in the main div you don't want it bumped down?
To fix that all you need to do is specify an overflow for that div. Either overflow:scroll or overflow:hidden. overflow:hidden would probably be desirable considering it will only clip an image, which isn't a big deal unless it has vital info on it, but it's your choice.

If you just step back and look at what you're asking though (or at least what it seemed to me to be), is that you want 2 images sometimes totalling wider than 800px to fit into a 800px wide div. What were you expecting?

[edited by: Xapti at 4:13 am (utc) on Feb. 4, 2008]

[Gibble]

No no, the right side isn't images, it's text. The problem is that it starts out filling the space between the image and the right border, but once the text is longer than the height of the image, it fills the entire 800px width, not the width it started out as.

Basically I want the two columns to remain to columns.

The problem is I don't know the width the left column is going to be...sometimes it's 100px, other times it's 500px. it varies depending on the image in it.

[Xapti]

Oh yeah. I don't know why I didn't realize that. That's a really common problem, except not so much for variable widths, because I don't think they are truely legal for floats. I think your best bet is to use javascript to fin the width of the image, and apply that width to the right column's margin-left. For fixed widths, you just need to put in a fixed margin, but since the float is variable, you'll need javascript to help you.

As long as you keep the site accessible without javascript (text wrapping over the image won't hurt anyone, as long as you don't make it hurt anyone), I don't see a real problem with using javascript (some people don't like using it, perhaps it's some purist thing. Don't get me wrong, I try to avoid js almost whenever possible (it's always possible))

[SuzyUK]

In FF I can set the display to "table-cell" on the main (right) column and it works...not sure what to do for IE.

display: inline-block

might do it - though note that if you use this setting on a block level element IE needs it set in 2 x separate parts, so the second part would need to be in a conditional comment or something to avoid others seeing it too.

e.g.
#left, #main {display: inline-block;}
#left, #main {display: inline;}