CODEWITHSUNDEEP
csslayouthtml
Sterling Bourne
Sterling Bourne

Reputation: 3342

Three-Column Layout... left (fixed px), center (50%), right (50%)

I want the left column to be 40px. I want the center column to be 50% of the remaining viewport and I want the right column to be the other 50% of the remaining viewport.

It should look something like this:

[LEFTCOLUMN][...CENTER COLUMN...][...RIGHT COLUMN....]
[...40px...][........50%........][........50%........]

The solution presented here (link) will not work for my case as the center column can become too collapsed on mobile devices.

Thanks!

Upvotes: 2

Views: 717

Answers (3)

Marwelln
Marwelln

Reputation: 29423

Use display:table; and display:table-cell;. No need to struggle with float:x;.

HTML:

<div id='container'>
    <div id='first'>a</div>
    <div id='second' class='fifty'>b</div>
    <div id='third' class='fifty'>c</div>
</div>​

CSS:

#container { display:table; width:100%; }
#container > * { display:table-cell; }
#first { width:40px; min-width:40px; }
#container .fifty { width:50%; }

Live example: http://jsfiddle.net/j25wK/

Upvotes: 2

techfoobar
techfoobar

Reputation: 66693

Will this work?

Demo: http://jsfiddle.net/BVhCZ/

As you can see, the left is absolute, and "remaining" is one block div that containing two 50% floated children. Should work for any width >~ 40px

Code:

<div class="left">LEFT</div>
<div class="content">
    <div class="content-left">CONTENT LEFT</div>
    <div class="content-right">CONTENT RIGHT</div>
</div>

.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;    
    background-color: #ddd;
}
.content {
    margin-left: 40px;    
}
.content .content-left {
    float: left;
    width: 50%;
    clear: none;
    background-color: #fdd;
}
.content .content-right {
    float: right;
    width: 50%;
    clear: none;   
    background-color: #ddf;
}

Upvotes: 0

Shawn Wernig
Shawn Wernig

Reputation: 1742

I think this may work for you:

http://jsfiddle.net/KR9zj/

Essentially the trick is to float LEFTCOLUMN, and wrap both CENTERCOLUMN AND RIGHTCOLUMN in a wrapper with overflow: hidden.

Upvotes: 3

Related Questions