Flexible Website Layout Tricks

In the past week I've spent quite a bit of time playing around with flexible layouts. Or to be more accurate, layouts with fixed elements on the edges a flexible center. Sites like Wikipedia utilize this category of layout very successfully, and I've been trying to figure out how it's done.

First, a review. Websites in general are built around containers. Containers within containers, each one's attributes can be control, from dimensions on the page to the way text inside looks. For the layout of the page, we are only concerned with three attributes. Size (height, width), extra spacing (margin, padding), and borders. CSS allows height and width to be set both as fixed lengths and as percentages of the parent container. The problem though, is that one can't use a combination.

Say you have a header, it needs to be exactly 50px in height. Then you have a content box, that should take up the rest of the page. Ideally, you'd tell the content box to by 100% minus 50px. But you can't combine % and px. They best way around this is not to set height at all. You instead use positioning.

position:absolute;
top:50px;
bottom:0px;

And suddenly, you have it going all the way to the bottom. But what happens if your content is longer than your page? Doesn't work anymore. In that case, you put another div inside the positioned one, and add your styling to it. Don't give it positioning information. Without it, it will just conform to the content inside it, and will apply the styling. But when the content is less than page length, the positioning of the main outside one will take precedence.

Another thing I've figured out recently is how to set inside borders. Borders, along with padding and margin, are set "in addition" to height. If you have a box that is 100px wide, with a 1px thick border around it, it's actually 102px wide total. If you set a box to be 100% wide, it will take up 100% of the screen. But you add a 1px border, and suddenly, it's exactly 2px wider than the screen, no matter how wide the screen is. There is a way around this though. Take the box below as an example.

<div style="height:100px; width:100px; text-align:center; background-color:lightblue;">
    Test
</div>

Test

Now, add a new div container, inside the one you wish to add a border to. Make it 1px wide, 100% tall, background-color whatever you want to the border color to be, and display:block, so that it displays with no text in it. Finally, set it to float to the left.

<div style="height:100px; width:100px; text-align:center; background-color:lightblue;">
    <div style="height:100%; width:1px; display:block; float:left; background-color:black;"></div>
    Test
</div>

Test

Now, add the same div, still inside the container, still before the text, and change it to float right instead of left.

<div style="height:100px; width:100px; text-align:center; background-color:lightblue;">
    <div style="height:100%; width:1px; display:block; float:left; background-color:black;"></div>
    Test
    <div style="height:100%; width:1px; display:block; float:right; background-color:black;"></div>
</div>

Test

And you have a border inside. In a real website of course, you'd place that styling in a css style sheet, and just give the border divs a class of something like leftborder, and rightborder. And it does make the HTML code look somewhat bulky, admittedly, but it's the best way I could find.

The same thing can be accomplished with padding, by just making the width thicker, and the background-color transparent. Margin I haven't figured out yet, but I'm working on it.

Know a better way? Leave a comment!