CODEWITHSUNDEEP
css
Alexander
Alexander

Reputation: 309

Trying to figure out a fluid css layout

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

Upvotes: 1

Views: 81

Answers (4)

moey
moey

Reputation: 10887

Working example: http://labs.siku-siku.com/experiment/01

CSS:

#box {
    min-width: 1100px;
}
#left,
#right {
    min-height: 500px;
}
#left {
    margin-right: 400px;
    min-width: 700px;
    background-color: #0f0;
}
#right {
    float: right;
    width: 400px;
    background-color: #f00;
}

HTML:

<div id="box">
    <div id="right">400px fixed width</div>
    <div id="left">min-width of 700px</div>
</div>

Upvotes: 0

Aaron
Aaron

Reputation: 5227

Give your body a min-width: 1100px, your #left-column a float: left, width: 100% and margin-left: -400px, and your #right-column a float: right and width: 400px. Unfortunately, getting your columns to span the height of the window unless it's shorter than their contents will require a javascript resizing function on the onload and onresize window events. Here's a jsfiddle with a working example: http://jsfiddle.net/dAgdx/.

(NOTE: the javascript evaluation of the column heights may require some tweaking in different browsers. You may notice that their heights are slightly greater than the window height when resized.

Upvotes: 0

Michelle
Michelle

Reputation: 1844

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;
}

Upvotes: 1

Scott
Scott

Reputation: 21882

Basic set up in JSBin --------> HERE

Basically you simply float the side content to the right The surrounding #container div ensures the two columns will remain at 1100px minimum.

Upvotes: 0

Related Questions