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 {
width:100%;
min-width:65em;
max-width:90em;
margin:0 auto;
padding-left:2%;
}

In the footer.php the new class is added

Now below is the modified CSS for the columns


#middle,
#right {
float:left;
width: 32%;
margin:0 1% 0 1%;
padding:0.5em;
}
#left {
float:left;
width: 23%;
margin:0 0% 0 0%;
clear:both;
margin:0;
padding:0.5em;
}

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s