Div tag alignment problem

Zeke2

10-20-2010, 09:30 PM

Hi. I know Im new here, but I was wondering if anyone had any advice for me. Im having alot of trouble getting the foundation for structuring a website together. If it helps, Im not here to get a quick answer and then jet off, I'm in this to learn and keep going. I am extremely new to codeing but am attempting to learn everything I can.

Ok so in theory, I create a containing Div tag, that everything goes into.

So lets say I want a centered banner, a nav on the left, a content section in the middle, and another nav on the right.

So, it's basically, a containing div around all of that to start with.

Now are there any special attributes I should be setting for this div? Ill start it at 800px wide
div.container {
width:800px;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:#ffffff;
}The margin-left/right are there to center it. The relative position is to make it

relative to the previous element, being the <body>tag(?) so it centers on that?

(trying to understand this, so be gentle).

Ok so if that is correct.(im assuming the height comes into play when I input more
data.

Next I want the center banner.

So

div.banner {
width:600px;
height:20px;
left:100px;
background-color:#ffffff;
position:relative;
border:1px solid green;
}

Skipping the obvious, I want it centered; so I made it left 100px because the center

div tag is 800 px(800-600=200=100px on each side). Now is that the best/appriopriate

way of aligning an element?

Also, if I want some space between the top of the div.container and the banner, do I

use <br /> or top padding? (I am imagining <br />)

Im kinda screwed here, and it's really bugging me to be honest. I now want to create a nav on the left a content section in the middle and a nav on the right.

But how do I do this? :S Before I even get to the right side im screwed

div.leftnav {
width:100px;
position:relative;
border:1px solid red;
}

div.content {
position:relative;
vertical-align:top;
left:100px;
width:500px;
margin-left:50px;
border:1px solid red;

}It creates the content section below the leftnav. How do I create them to be top aligned :S.

I dont know, I feel like I am going about this all wrong to be honest lol. Any direct advice on my problem(s)?
Im not sure I understand the concept of relative positioning.

teedoff

10-20-2010, 09:45 PM

You're not using floats. For instance, you would float your left sidebar "left" allowing the other divs below to move up "into" position. Provided you have left enough room for it to fit. You should read up on box models here (http://www.w3.org/TR/css3-box/)and here (http://www.w3schools.com/css/css_boxmodel.asp)and floats here (http://www.w3schools.com/css/css_float.asp)as well.

Zeke2

10-20-2010, 09:54 PM

thanks alot

div.leftnav {
width:100px;
float:left;
border:1px solid red;
}

div.content {
position:relative;
left:100px;
width:500px;
margin-left:50px;
border:1px solid red;

}

div.rightnav {
width:100px;
float:right;
border:1px solid red;
}

trouble is now, my right nav is outside my container div. But I have the left nav and content aligned :D ty. But a new question, why is it out of the container div?

kansel

10-20-2010, 10:09 PM

Welcome to CodingForums!

The margin-left/right are there to center it. The relative position is to make it relative to the previous element, being the <body>tag(?) so it centers on that?
One of the things that position:relative does (IMO, the most important thing) is to set the positioning reference for child elements. This is really helpful when using absolute positioning, however it does not have anything to do with centering. That is handled completely by setting the width and left/right margin to auto.

I want it centered; so I made it left 100px because the center div tag is 800 px(800-600=200=100px on each side). Now is that the best/appriopriate
way of aligning an element?
Again, you can use width and left/right margin to center the block-level element.
div.banner {
width:600px;
margin: 0 auto;
background-color:#ffffff;
border:1px solid green;
}
You do not need to set position to relative here unless you will be using absolute positioning on any elements within the banner div. Padding goes inside the border, so if you use padding to make space between the top of the banner and the container div, there will be a gap between the border and the banner image which is probably not what you want to do.

You can use <br /> to push the banner down, however that is not ideal (and some people would go so far as to yell at you for doing so, or yell at me for saying it's ok). Better would be to use margin-top, as this goes outside the border (margin -> border -> padding -> content), though in some browsers the margin will go above the container instead of within it.

I would use padding-top on the container div to push the banner down. I don't think this has adverse results in any browsers.

Now onto your three-column layout. There are quite a few ways to pull this off. The best two ways are to 1) use floats for the left and right columns (or all three columns) or 2) use absolute positioning for the left and right columns. There are pros and cons for both of these approaches, so you should do some research and decide which is best for your design.

To use floats, the simplest approach is to set the leftnav to float:left and the rightnav to float:right. Both leftnav and rightnav should be above content in the HTML in this case. You will also want to set a margin-left and margin-right on content equal to the widths + desired gutter of the leftnav and rightnav respectively, otherwise the content will flow out from beneath the navs instead of being constrained by a column.

To use absolute positioning, set position:absolute for both leftnav and rightnav. Use a top value that is equal to the height of your banner plus a little extra (unless you want it all squished together), then on leftnav set left:0 and on rightnav set right:0. This will bind them to the left and right sides of container respectively. You can use a negative value to move them beyond container's perimter or you can use a positive value to push them further in.

You might also want to check out some common three-column layout solutions (http://css-discuss.incutio.com/wiki/Three_Column_Layouts). Try a few out and see what makes them tick. A lot of these use techniques that allow for the content/background of all three columns to fill the empty space left by others (much in the same way as the old practice of using tables for columns).

kansel

10-20-2010, 10:12 PM

I didn't mean to step on teedoff's toes there. It took me a while to compose that and thought I'd be first.

As to your question regarding why your rightnav is outside the container div, I don't see that happening with the CSS you've posted. However I do not know what your HTML looks like. It would be easier for us to help you if you would post both the CSS and the HTML.

Zeke2

10-20-2010, 10:20 PM

That was a very nice post for someone in my position. Thankyou very much.

My end code looks like this <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

body {
background-color:#000000;
}

div.container {

width:800px;
margin-left:auto;
margin-right:auto;
position:relative;
background-color:white;
}

div.banner {
width:600px;
height:30px;
margin: 0 auto;
background-color:green;
margin-bottom:10px;

border:1px solid green;
}

div.leftnav {
width:100px;
margin-right:10px;
float:left;

border:1px solid red;
}

div.content {
border:1px solid red;
overflow:auto;

}

div.rightnav {
width:100px;
float:right;
border:1px solid red;
margin-left:10px;
}
</style>

</head>
<body>

<div class="container">

<div class="banner">

</div>

<div class="leftnav">
sdfsdf
</div>

<div class="rightnav">
sdfsdfds
</div>
<div class="content">
sdfdsfdsf
</div>
</div>

</body>
</html>

It's crude, but Im trying to get the basic skeleton layout down to a T.
Thanks guys, you've been a great help and very fast. I'll be bugging you guys soon probably. Hopefully in awhile I'll be able to help some people too :)

Thanks again.

*edit*

In my opinon you werent stepping on anyones toes, merely working together to help get a point across to a beginniner :)
The reason I had a problem with my right nav was because of my HTML placement. But I read your post and it solved it :D