Looking for a clever two column layout, where the sidebar can grow to a maximum of 50% of the available width, but always shrink to fit the widest image contained in it. The other column of content will automatically fill the space that's left.

This means no fixed widths on either content or sidebar.

But the content must not flow under the sidebar if the sidebar isn't tall enough, which it will if you don't set a width on the content column.

has to work in IE6 and up

any suggestions please?

edit: for the benefit of the truly cynical I have Googled, and floats, negative margins and absolute positioned layouts don't work for what I'm looking for, which is easily done with a two cell table, or CSS3

  • Working on it! ;) Jens Hedqvist about 7 years ago
  • This will make the columns equal, right? The sidebar and the main content (to the left) would both be 50% according to your description (if sidebarWidth = 50% THEN content width = 100% - 50% = 50%)? Jens Hedqvist about 7 years ago
  • no, I'd badly described the question, sorry the sidebar should only be as wide as the widest image inside it and the primary fills the remaining space Tony Crockford about 7 years ago

1 answer

1
point

I've set up an example here based on your description, but is this what you're after?

It uses the CSS:

#content {
    background: #FFCC66;
}

#primary {  
    width: 49%;
    float: left;
    background: #FFCC00;
}

#secondary {
    max-width: 50%;
    float:  right;
    background: #FFFF66;
}

and HTML

<div id="content">

    <div id="primary"></div>
    <div id="secondary"></div>

</div>

Se the example here

It uses floats and max-widths. You'll have to use a filter-expression for IE if you wan't to simulate max-width. Alltough you'll need to work some magic there because I don't know if it supports percentages (you'll have to calculate that yourself inside the filter).

Answered about 7 years ago by Jens Hedqvist
  • Not quite, it makes the sidebar always the max-width, what I wanted was the sidebar to be as wide as the widest image in it. I think I'm chasing the holy grail, a fool's errand! Tony Crockford about 7 years ago
  • Yes maybe you are. I'm gonna think about it.. Jens Hedqvist about 7 years ago
  • I've tried everything I can think of. I don't think it can be done without JavaScript! Doug about 7 years ago
  • I tried everything I could think of too, which is why I asked here. :) Tony Crockford about 7 years ago