Improved DarkHalf layout

September 1, 2007

The dark part has 3 columns. I have now made 2 of them fluid, the middle and the right hand columns.

To do that I need an additional box wrapping these 3 columns. This box is placed inside the existing ‘darkhalf’ id, it’s like

.inside {
margin:0 auto;

In the footer.php the new class is added

Now below is the modified CSS for the columns

#right {
width: 32%;
margin:0 1% 0 1%;
#left {
width: 23%;
margin:0 0% 0 0%;

Note that all of them are ‘floated’ left whereas in the last design I have the right column floated right. The trick is the ‘min-width’ and ‘max-width’ of the class ‘inside’. This allows the middle and right columns to expand to the right while you drag the browser edge to the right. The left column which I have put static information is left more or less unchanged visually due to its relatively smaller % (23 vs 32+32) even if broswer is dragged.

This is a much better design originally found in the famous WP theme Hemingway.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s