[Solved] Placing a right hand column

You're getting there, but there's a few things you need to know first.

Heading tags have default margins applied to them, as do paragraph tags. You see the way "Wine Secrets" is in the purple box and "Wine Tips . . . " is in the blue box?

They should both be in the purple box, but because you've set the container to have a fixed height they "spill out".

IE incorrectly expands the container to enclose them.

Change this CSS:

h1, h2, h3 { font-family:Georgia, "Times New Roman", Times, serif; font-weight:100; color:#CCFF00; }

to this:

h1, h2, h3 { font-family:Georgia, "Times New Roman", Times, serif; font-weight:100; color:#CCFF00; margin: 0; }

and let us know when you've done it, so we can get on with the floats.

OK, I did that.... now its all in the header.
http://www.wineguru.us/

For now, to help you gain a better understanding of floats and padding, replace your current css with this:

#container { width: 760px; \width: 780px; w\idth: 760px; border: 1px solid gray; margin: 30px auto; padding: 5px; }

#banner {height: 100px; background: #5c5ca1; }

#content {
margin: 0 100px;
background-color: #00CCFF;
}

#content2 {
float:right;
width: 100px;
background: yellow;
}

#sidebar-a {
float: left;
width: 100px;
background-color: pink;
}

div#sidebar-a p {background: green;}

#footer {
clear: both;
padding: 5px;
margin-top: 0;
background-color: #4444bf;
}

h1, h2, h3 {
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:100;
color:#CCFF00;
margin: 0;
}

Let me know when it's done.

OK, It's done.
http://www.wineguru.us

Sorry, there was one other thing I forgot

Floated content must come before non-floated content. So edit your HTML to this:

How's that?
http://www.wineguru.us

So there is an order for div tags when it comes to positioning columns. Is that correct?

Yes, floated content must come before non-floated content.

Now you get to learn about floats, margin and padding.

See the left and right boxes have a width of 100px? Because of that, the middle column needs left and right margins of 100px, to "push" the edges away from the floated columns.

Your widths must add up if your layout is to work properly.

Say for example you want to add 10px of padding to your left column.

This will then push the total width of the left column to 110px (100 + 5 + 5). So your left margin on the middle element will then become 110px.

Have a go now at padding out the boxes how you want them, let us know when it's done.

Here it is http://www.wineguru.us after a bit of playing with margins and padding. I tried to add more to the right column and less to the center content, but nothing changed. How do I control the overlapping? Is that caused by the wrong measurement of the width of the container? I noticed that the style:

#container {
width: 760px;
\width: 780px;
w\idth: 760px;

Is back slashes in width a IE6 thing? So the overall width is 780 with left and right margins of 10px each?

I notice that text overlaps the right column. What causes that? Measurements?

Well, take your right column. You've added a margin of 30px, yes? So this will make the entire width 170px - 110px width, plus a 30px margin on both sides.

So the main content div (your middle one) needs a right margin of 170px, not 110 as it originally was.

You aslo have to be specific with measurements. You can't just put "margin: 10;", you need to specify what the measurement is, eg "margin: 10px;" or "margin: 10em;"

Do you like using pixels or em for measurements? Look again: http://www.wineguru.us
I set the right margin of content to 170px on the right, so it's showing some white space between it and the right column.

So the measurements that add up are the marigns, paddings and widths?

The 5555s going over the right edge of the container. How do you keep in within the column so it wraps when it comes to the right edge?

EMs are useful for layouts that expand when the text is resized. Pixels are used when you want the widths of the elements to remain the set size.

What is the measurement of ems? if you have 20px, what is it in ems?
Is that why the text slips over the edge?

The text slips out of the edge because the container isn't big enough to hold it all

An EM is the size of a letter M. This link may help:

http://24ways.org/2005/an-explanation-of-ems

That's a very good explanation of ems. So it's in relation to the font-size you select.

That right column: I can make it wider, but can I make it word wrap in whatever size it is?

I just changed a few things. I made both left and right columns the same resized the center content area to fit between with no gaps. Now when I type in the right column the text now word wraps. Look: http://www.wineguru.us/

Excellent, now you've got yourself a fixed-width three-column layout with footer, and learned a lot about creating layouts from scratch!

If you wanted to change it to an elastic layout all you need to change is the width of the container to something like 50em, and the width of the right and left columns to something like 8em (and the margins of the center column to match).

This way, when you resize the text, the site will grow with it.