15 replies [Last post]
davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 1 week ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

Here's a test page I'm working with to learn positioning: http://www.wineguru.us/

I created a content div and content2 div. Why is the content2 div below the content div? How do I get it to the right of the content div?

Why is the verbiage in content overlapping the h2 banner?

I've been reading up on css but I still haven't found one book or site that gives me an understanding on positioning of divs. This forum has helped more than any other. I just want to get a grasp of where to position content on a page without having to use other layouts.

Thanks.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

You're getting there, but

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.

Verschwindende wrote:
  • CSS doesn't make pies

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 1 week ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

OK, I did that.... now its

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

For now, to help you gain a

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.

Verschwindende wrote:
  • CSS doesn't make pies

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 1 week ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

OK, It's done.

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Sorry, there was one other

Sorry, there was one other thing I forgot Laughing out loud

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

Right content area

555555555555555
555555555555555

 main content area

 

 

 

Verschwindende wrote:
  • CSS doesn't make pies

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 1 week ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

How's

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

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Yes, floated content must

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.

Verschwindende wrote:
  • CSS doesn't make pies

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 1 week ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

Here it is

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?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Well, take your right

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;"

Verschwindende wrote:
  • CSS doesn't make pies

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 1 week ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

Do you like using pixels or

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?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

EMs are useful for layouts

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.

Verschwindende wrote:
  • CSS doesn't make pies

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 1 week ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

What is the measurement of

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

The text slips out of the

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

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

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

Verschwindende wrote:
  • CSS doesn't make pies

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 11 years 1 week ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

That's a very good

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/

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Excellent, now you've got

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.

Verschwindende wrote:
  • CSS doesn't make pies