Semi Fluid Layout CSS/Html

Question

I have a two column layout in which I have a static width for the right column of 350px, and for the left column the width should be such that it fills the rest of the page. Or at least that is what I want to happen, but unfortunately it's not.

Here's a look at my css/html: http://jsfiddle.net/CmJ7P/. Any help you could offer on how to make this happen would be greatly appreciated.

Edit: I'd prefer a solution in IE6 if you can

Thriller

See #5196336 – Ladder

Thanks for that link Adam, much appreciated. – Thriller

Answer 1

You need to remove the float from the left column and put the right floated column first in the HTML:

.wrapper {
  display: block;
}

.wrapper div.content {
  background-color: #ccc;
}

.wrapper div.sidebar {
  display: block;
  background-color: blue;
  float: right;
  width: 320px;
  height: 400px;
  padding: 0 20px;
}

html, body {
  padding: 0;
  margin: 0;
}

<div class="wrapper">
  <div class="sidebar" style="width: 350px">
    <div style="margin-top: 15px;">
    </div>
    <div class="sidebarpanel">
    </div>
    <div class="sidebarpanel">
    </div>
    <div class="sidebarpanel">
    </div>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed elementum libero. Morbi aliquam, nunc a ullamcorper eleifend, dui ante cursus odio, ac lacinia arcu neque vitae dui. In et ipsum orci. Donec laoreet imperdiet augue non sodales.
      Phasellus vel elit sit amet est mattis euismod. Duis non turpis eget ligula gravida mattis eget vitae turpis. Nunc vulputate lacinia posuere. Quisque nec feugiat quam. Praesent facilisis pulvinar tortor, sit amet fringilla nisl imperdiet at. In
      pulvinar dignissim dignissim.
    </p>
  </div>
</div>

Ozoniferous

Answer 2

I know some would advise against this, but I think the best way to accomplish this would be with frames. Something like:

<frameset cols="*,350px">
  <frame src="a.html" />
  <frame src="b.html" />
</frameset>

This would create two frames, left and right. The left would take up the entire page minus 350px.

Alternatively, you could use javascript to get the width of the entire document, subtract 350 from the total and bind a window resize event to update the width of your 'fluid' element (the one that takes up the rest of the page). jQuery would make this pretty easy. I'm not too sure about browser compatibility though.

Bcd

FRAMES!?!?! Burn the heretic! ;) – Ozoniferous

@Johnathan: it's not that it's a matter of taste or personal preference, and it's not that "some would advise against them". Frames should be avoided at all costs. Read more about frames before suggesting them. First thing I found: html-faq.com/htmlframes/?framesareevil – Lactoprotein

@Lactoprotein - your pages won't be indexed properly for search engines, I understand that. other than that I don't see any serious disadvantages to using frames. I don't really ever use them myself, but I won't ever throw a useful element out the window for SEO purposes – Bcd

@Bcd frames are the most annoying thing on Earth, maybe only second to Flash-based background music. You can't print them properly. Several other disadvantages. Granted, it's not the frames that are evil, but rather their misuse. The problem is that they are almost exclusively misused. – Lactoprotein

@Lactoprotein - if you're expecting users to print your page, you should always add some sort of "printer friendly" feature anyways - thereby eliminating the whole "printer problem" attributed to frames. not being able to bookmark the page that you're expecting to bookmark can be annoying as well, but there are fixes for that. – Bcd

@Lactoprotein - you're absolutely right, the problem IS that they are often misused. user error.. – Bcd

OK, then we've reached a consensus. Since it's pretty much OT, I suggest we close the subject ;). – Lactoprotein