A little CSS pattern to demonstrate what to do when you want one column to stay at a fixed width and the other column to stretch horizontally with the window. Thanks to my friend CSS guru Joe Silvashy for this one.
What I want it a column on my right side to be a fixed width, and the column on the left to stretch with the window gracefully (in web terms this is called a “liquid” layout).
Given right-hand-column (in our example, a div tag with a class right-hand-column) has a fixed dimension (in our case), how do I get left-hand-column to take up the remaining amount of width within outter_div by letting the text wrap (instead of keeping it all on a single line).
On the left, I have a bunch of words. I want the words to linebreak when the left column isn’t wide enough to fit all the words on one line. My right-hand column is an image – a pic I ripped from whitehouse.gov – with a fixed height & width. So I want this column to always be the same width, and the left column to adjust based on the size of the browser window.
Here’s a beginners approach – and it doesn’t work. The approach is float right div to the right, left div to the left. Give right div a fixed with an left div no width at all.
As we’ll see in a minute, this is wrong and doesn’t work the way we want it to.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″>
<title>css_correct_width</title>
<style type=”text/css” media=”screen”>
div {
margin: 4px;
}
.right-hand-column
{
border: solid blue;
float: right;
width: 306px;
height: 371px;
background-image: url(http://www.whitehouse.gov/sites/default/files/hero_feature/title_image/hero_bkgd_education-in-focus.jpg);
}
.left-hand-column
{
border: solid green;
float: left;
}
</style>
</head>
<body id=”css_correct_width” onload=””>
<div id=”outter_div”>
<div class=”right-hand-column”>
</div>
<div class=”left-hand-column”>
<br />lorem ipsum dor amit. js oq xpqsqis aslsaldhq sdasasd.
</div>
</div>
</body>
</html>
When there’s a wide window, right column takes up the width we assigned and left column takes up how ever much space it needs to fix the inline content on one line.
When there’s a narrow window, right column takes up the width we assigned and left still takes up how ever much space it needs keep that content, and drops the whole div down.
But this isn’t what I wanted. What I want is for my left column to always take up the remaining space after you subtract how much my right div (the image) needs. And while we’re at it, wrap the text so that it flows onto multiple lines.
Joe’s solution. (He included reset CSS, which I’ve removed [forgive me] for purposes of this demonstration. In your CSS, you must never forget the reset CSS.)
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″>
<title>css_correct_width</title>
<style type=”text/css” media=”screen”>
.right-hand-column
{
border: solid blue;
width: 306px;
height: 371px;
background-image: url(http://www.whitehouse.gov/sites/default/files/hero_feature/title_image/hero_bkgd_education-in-focus.jpg);
/* position absolute _inside_ a position relative allows for absolute positioning within an element and not the entire page */
position:absolute;
top:0;
right:0;
}
.left-hand-column
{
border: solid purple;
margin:0 320px 0 0; /* remember, top right bottom left */
}
</style>
</head>
<body>
<div id=”outter_div”>
<div class=”right-hand-column”></div>
<div class=”left-hand-column”>
<br />lorem ipsum dor amit. js oq xpqsqis aslsaldhq sdasasd.
</div>
</div>
</body>
</html>
What he’s done is to set the right column with absolute position to the right (top: 0; right: 0) and the left column with a right-hand margin of 320px (the width of the right column). This pushes it past the set width of the image on the right.
Note that the left column (the green one) now stretches to fill the remaining space in the window, whereas before it stayed at the width that was necessary to fit the text into the div (you can tell this because I put green border on it in all the examples).
Narrow window works the way we want it to.
