Question

I’m trying to create a website with fluid layout, but im having some problems doing so. I want to create a page with 2 columns like this:

http://migo.no/random/css_layout.jpg

Basically I want the left column to have a minimum width of 700px, and stretch out as much as it can, and the right column to have a fixed width of 400px. Also if the window size is smaller then 1100px, I want the scrolling to pop in.

I just cant seem to get it as I want..

Regards,
Alexander

Answer 1

Here’s one way to do it. This results in proportional widths, though. If you want the sidebar to always be 400px and only the main column to expand, I think you could do that by just using min-width.

<div class="container">
    <div class="main"></div>
    <div class="sidebar"></div>
</div>

.container {
  width:100%;
  min-width:1100px;
overflow:auto;
 }

.main {
  width:63.63636363%;
  min-width:700px;
float:left;
}

.sidebar {
  width:36.36363636%;
  min-width: 400px;
float:left;
}