When you design a website, most folks try to minimize the amount of scrolling a user has to do.  Studies seem to indicate that while users will scroll, the less scrolling a web page requires, the more usable it will be.  Most websites attempt to limit the scrolling to the vertical direction, while minimizing or eliminating any need to scroll horizontally.

There are basically 2 ways to achieve this with a standard webpage.  The first is to fix the width of the page to a width smaller than the average user’s display width.  This design has the advantage that you can precisely position all the elements on the page because you are basically requiring a certain width.  However, if the user has a smaller window they will have to scroll horizontally to view the entire design.  In addition, this can create a large amount of empty space if the chosen width is too small for the average display width.

The second method would be to have the design “expand” or “shrink” to fill the available width.  This is usually accompanied with a minimum width to prevent the design from becoming unusable.  While this allows the user to size their window as they need to while still presenting as much of the content and design as possible, it can represent a much more complicated layout for the developer.  As I am not a designer, I usually pick this style so I can maximize the amount of actual content being displayed, and minimize the importance of the actual design.

Enter the Style Sheet

In many cases, making your site fill the available width can be as simple as adding a “width: 100%” line to your content class in your style sheet.  This will make the content fill 100% of the available width:

#ContentFull
{
width: 100%;
background-color: #DDDDDD;
float: left;
}

<div id=”ContentFull”>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

But what happens if you don’t want the content to fill 100% of the width, but only some smaller portion, leaving room for a menu bar or some other content next to it?  If you want the content to fill some reduced percentage, and want the other content to fill a proportional amount of the layout, then the solution is still simple:

#RightContentProportional
{
width: 80%;
background-color: yellow;
float: right;
}

#LeftContentProportional
{
width: 20%;
background-color: #DDDDDD;
float: left;
}

<div id=”LeftContentProportional”>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div id=”RightContentProportional”>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

So now both columns will adjust their widths in proportion to the percentage allocated to them.  So far, there haven’t been any complicated tricks, and has been pretty straight-forward.  The problem occurs when you have a 2-column layout where one column is a fixed-width and the other column needs to expand to fill the remaining space.

To solve this problem you need to perform a bit of magic using padding and containing elements.  Once you have the general idea, you can adjust it to meet your needs.  The basic setup is as follows:

#ContentWrapper
{
float: left;
width: 100%;
}

#RightContentExpandable
{
margin-left: 160px;
background-color: #DDDDDD;
float: left;
}

#LeftContentFixed
{
margin-right: -100%;
float: left;
width: 150px;
background-color: yellow;
}

<div id=”ContentWrapper”>
<div id=”LeftContentFixed”>
<p>
Fixed Width Content:
</p>
<p>
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
</p>
</div>

<div id=”RightContentExpandable”>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>

Basically, what this does is create a left column that is fixed at 150 pixels.  It does this by playing with the left and right margins.  The left column has a RIGHT margin of –100%.  Essentially, this makes the right margin of the element the left side of the screen.  This means that when we float a second element, it will be position over the top of the left column.  Since we don’t want the content to overlap, we give the right column a LEFT margin of 150 pixels (in this case, I gave it a left margin of 160 pixels to create a bit of space between the columns).  What this does is cause the right column to start its left edge at 160 pixels from the right margin of the element next to it.  In our case, since we gave the element next to it a right margin all the way on the left, the right column will display an empty space where the fixed column is displayed, giving the impression that the left column is side-by-side with the right column (even though they are technically on top of each other).

So why do we need the wrapper element?  You may notice that the expandable element does not specify a width.  If we had given it a width of 100%, the resulting layout would have been 100% of the screen, plus the 160 pixels for the left column – we would always have to scroll.  To get around this, we size the parent element as 100% of the width, and then allow the right column to fill as needed.

Unfortunately, this means that the right column will only fill as wide as needed to display the content.  If the right column has a different background color from the background color of the containing element, the color will not “fill” the entire right side of the screen.  If this is a problem, you may need to play with different ways of solving the issue.

Open Sample Page