PreMade CSS Layout

If you remove all of this dummy text, the height of the columns will also be removed. This is because the height of each column is dependent upon the amount of content inserted in each column.

In other words, each column will stretch open as you insert content. This way, each web page can take on its own size based upon the amount of content.

CSS Trick

To make the columns look equal in height, make the background of the container the same color as the background of the left column. And do not use a border on the left column.

The font size is set to .85em. This will allow viewers to change the font size in their browsers. If we use pixels for font size, then the viewers will not be able to change the font size.

There is also a solid 1px white border around the #page_content div. The reason this border was added was to remove a gap caused by Margin Collapse. The border is white so that it is not easily visible.

The background color of the #container matches the background color of the #left_col. This way, it will always appear to have equal column heights.

I also changed to location of the container by changing the code. The container initially only held the left and right columns. I moved the <div id="container"> tag to contain the masthead, top-nav and footer. This way, I only had to center the container and not the masthead, top-nav,container, and footer individually.

It makes good sense to insert the entire layout inside the container div. I don't know why these premade layouts are made the other way. It makes no sense at all.

Any text Any text Any textAny text Any text Any textAny text Any text Any textAny text Any text Any textAny text Any text Any textAny text Any text Any textAny text Any text Any textAny text Any text Any textAny text Any text Any textAny text Any text

Any textAny text Any text Any textAny text Any text Any textAny text Any text Any textAny text Any text Any text