CSS Positioning Intro Part 6: Calculating Columns

This series has covered some of the CSS properties that control the layout of a page. We looked at how to set the width of a page element and how to set margins and padding to create space between page elements.

But so far we can only set up the most basic of layouts – rows that appear one below the other. What about columns? How do you make a picture or paragraph appear next to another page element?

In this post, we will create a basic layout with one row and two columns:

coll

Calculating the widths:

Before we write any CSS, we first need to calculate the widths and other measurements that this page must have.

The layout above already has the following properties:

The outside black box has a width of 450 px and a padding of 10px.
The blue and green columns have margins of 10px each.

All that is left is to figure out how wide each column should be so that they fit exactly inside the black box.

We can do it like this:
Take the width of the outside box (450 px) . Subtract from that all the margin and padding properties added together (450 px – 60 px = 390px). Divide the result in two, because there are two columns (390 px /2 = 195 px) .

floatsum

To fit exactly inside the black container box, each of the columns should be 195 px wide.

Before we plug those values into a CSS definition, lets have a quick look at what the HTML looks like:

The HTML

The HTML for this page looks like this:

<html>
<head>

<title>A Poem </title>

<link href="floatstyle.css" rel="stylesheet" type="text/css">
</head>

<body>

<div class = "container">

<div class = "redbox">

<div class = "heading">Peas</div>

<div class = "poem"> I eat my peas with honey <br>
I've done it all my life <br>
It makes them taste quite funny <br>
but it keeps them on my knife.
</div>

</div>

<div class = "bluebox">

<div class = "heading"> Horse</div>

<div class = "poem">The horse bit its master. <br> How came this to pass? <br>It heard the good pastor say<br> "All flesh is grass".</div>

</div>

<div class = "greenbox">

<div class = "heading">Justice</div>

<div class = "poem">The rain, it raineth every day <br> Upon the just and unjust fella <br>But it raineth more upon the just<br>
Because the unjust hath the just's umbrella.</div>

</div>
<div class = "stretch"> </div>

</div>

</body>

</html>

The CSS

If we put the width we calculated into the CSS definitions, we get this:

.container{
width:450px;
background-color:#000000;
padding:10px;
}

.redbox {
background-color:#DC143C;
padding:5px;
margin:10px;
}

.bluebox {width:195px;
background-color:#1E90FF;
padding:5px;
margin:10px;
}

.greenbox {width:195px;
background-color:#009966;
padding:5px;
margin:10px;
}
.heading{font-size: 2em;
font-family:Arial;
font-weight:bold;
}

.poem{
font-size:0.8em;
font-family:Arial;
}

This will result in a layout like this:

coll2

Which is not what we want. Yes, the boxes are all the right widths, but that green box needs to pop up next to the blue box. To do that, we will use a new property – the "float" property – which is explained in the next post.

Tags: columns · CSS PositioningNo Comments

bravemouse

teach yourself