CODEWITHSUNDEEP
htmlcss
James
James

Reputation:

CSS - Fixed-Fluid Columns

In the body of my site, I am trying to create two columns - one on the far right with a fixed width (300px) for advertisements etc, and one on the left which will take up the remaining space on the page. How can this be accomplished in CSS?

Upvotes: 9

Views: 7718

Answers (5)

user105813
user105813

Reputation: 17497

CSS :

.column-right {
    float: left;
    width: 100%;
    height: 200px;
    background-color: red;
}

.column-right .column-content {
    margin-left: 250px;
}

.column-left {
    float: left;
    margin-left: -100%;
    width: 250px;
    height: 200px;
    background-color: green;
}

HTML :

<div class="column-right">
    <div class="column-content">
        <strong>Right Column:</strong><em>Liquid</em>
    </div>
</div>
<div class="column-left">
    <strong>Left Column:</strong><em>250px</em>
</div>

Upvotes: 7

tkane2000
tkane2000

Reputation: 495

One solution I've found for this is to float the right column to the right and give the left column an absolute position with left:0 and right:300px. This will make it fluid as if you gave it a width:80%, but it will be relative to the parent container in a different way.

Here's an example: http://jsfiddle.net/tkane2000/dp9GZ/

One issue you might find with this is that since it's absolute, it won't naturally push down the elements below it.

Another possible solution would be to give the left column width:100% padding-right: 300px;

and the right (fixed width) column: position: absolute: top:0; right:0;

You might need to set box-sizing:border-box on the left column.

This also as some limitations. One that comes to mind, is that if you wanted the left column to have a border-right to separate each, the border would be on the wrong side of the right column.

Upvotes: 0

unigg
unigg

Reputation: 464

Here is a tool to generate fixed liquid columns for placing adsense ads.

Upvotes: 4

Blegger
Blegger

Reputation: 4292

You might also want to check out the YUI: CSS Grid Builder. It is a simple web interface where you specify what grid layout you are looking for, and they will provide you the html code you can use in combination with the YUI Grids CSS framework to get your desired layout. One nice thing about the YUI Grids CSS framework is it has good cross browser support which saves you time getting it to work across different browsers. You can also reverse engineer the code that you are provided from the grid builder to get some ideas on how you can do it on your own. The settings you will want to use with the YUI: CSS Grid Builder to get your desired layout is as follows:

  1. Body Size: 100%
  2. Body Columns: Sidebar right 300px

Upvotes: 0

Anand
Anand

Reputation: 7764

CSS:

#right-column{
 width:300px;
 float:right;
}

#other-column{
 float:left;
 width:100%;
 padding-right:20px; /*to prevent text overlap as suggested in the comment*/
}

In HTML:

<div id='right-column'>
 <!-- ads here -->
</div>
<div id='other-column'>
 <!-- content here -->
</div>

Upvotes: 1

Related Questions