What's wrong with my div layout?

**HWolfpack6** · 11-20-2008, 10:10 PM

I am new to divs, so any suggestions on how to do certain stuff would be very helpful

That's basically what I'm looking for. Here's my code.

Code:

/*******************LAYOUT*******************/
/*********CONTAINER*********/

#container
{
width: 800px;
margin: 50px 0px auto;
background-color: #feffe9;
}

/*********LINKS*********/
#links
{
position: absolute;
top: 0px;
left: 0px;
width: 800px;
background-color: #FF0000;
}

/*********HEADER*********/
#header
{
position: absolute;
top: 84px;
left: 0px;
width: 800px;
background-color: #CC9900;
}

/*********CONTENT*********/
#content
{
position: absolute;
top: 260px;
left: 0px;
width: 550px;
background-color: #FFFF00;
clear: both;
}

/*********LINKS-RIGHT*********/
#linksright
{
position: absolute;
left: 550px;
width: 250px;
background-color: #00FF00;
clear: none;
}

/*********ADVERTISERS*********/
#advertise
{
position: absolute;
left: 550px;
width: 250px;
background-color: #0000FF;
clear: none;
}

/*********CONTAINER*********/
#copyright
{
position: absolute;
top: 750px;
left: 0px;
width: 800px;
background-color: #993399;
}
/*******************END LAYOUT*******************/

And the HTML:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="home.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
<div id="links">&nbsp;</div>
<div id="header">&nbsp;</div>
<div id="content">&nbsp;</div>
<div id="linksright">&nbsp;</div>
<div id="advertise">&nbsp;</div>
<div id="copyright">&nbsp;</div>
</div>
</body>
</html>

**wayfarer07** · 11-20-2008, 10:18 PM

The first thing you should do, as I'm sure many other people here will suggest, is stop positioning everything absolutely. You don't need positioning at all to do what you describe, and in fact it is a hindrance, not a help. Learn the process of floating and clearing <div>s that have a set width, so that the data naturally flows inside of containers, instead of being "nailed down" all over the place.

Floating and Clearing.

**HWolfpack6** · 11-20-2008, 10:47 PM

Quote:

Originally Posted by wayfarer07

The first thing you should do, as I'm sure many other people here will suggest, is stop positioning everything absolutely. You don't need positioning at all to do what you describe, and in fact it is a hindrance, not a help. Learn the process of floating and clearing <div>s that have a set width, so that the data naturally flows inside of containers, instead of being "nailed down" all over the place.

Floating and Clearing.

Code:

/*******************LAYOUT*******************/
/*********CONTAINER*********/

#container
{
width: 800px;
margin: 50px 0px auto;
background-color: #feffe9;
overflow: auto;
}

/*********LINKS*********/
#links
{
width: 100%;
background-color: #FF0000;
}

/*********HEADER*********/
#header
{
width: 100%;
background-color: #CC9900;
}

/*********CONTENT*********/
#content
{
width: 69%;
background-color: #FFFF00;
clear: left;
}

/*********LINKS-RIGHT*********/
#linksright
{
width: 31%;
background-color: #00FF00;
clear: right;
}

/*********ADVERTISERS*********/
#advertise
{
width: 31%;
background-color: #0000FF;
clear: right;
}

/*********CONTAINER*********/
#copyright
{
width: 100%;
background-color: #993399;
}
/*******************END LAYOUT*******************/

I still have that stupid thing happening where it shows each div on line after line. I want the #content to go left of the links and advertisements. The height of #content should = links+advertisements.

**HWolfpack6** · 05:59 PM

This is strange, the linksright and advertising (the one underneath the linksright) are right and underneath the content. I want the linksright and ads to go right of the content but I want the ads to stretch down as far as the content goes, so there is no blank space underneath it. How can I do that?

Code:

body
{
background-color: #feffe9;
}

/*******************LAYOUT*******************/
/*********CONTAINER*********/

#container
{
width: 1000px;
margin: 0px auto;
background-color: #feffe9;
overflow: auto;
}

/*********LINKS*********/
#links
{
width: 1000px;
clear: both;
background-color: #FF0000;
}

/*********HEADER*********/
#header
{
width: 1000px;
clear: both;
background-color: #CC9900;
}

/*********CONTENT*********/
#content
{
float: left;
width: 700px;
background-color: #FFFF00;
padding: 2px 5px;
}

/*********LINKS-RIGHT*********/
#linksright
{
float: right;
width: 300px;
background-color: #00FF00;
}

/*********ADVERTISERS*********/
#advertise
{
float: right;
width: 300px;
background-color: #0000FF;
}

/*********CONTAINER*********/
#copyright
{
width: 1000px;
background-color: #993399;
clear: both;
}
/*******************END LAYOUT*******************/

**wayfarer07** · 11-21-2008, 06:47 PM

The most basic way to do this is with an illusion: Faux Columns.

**Mark Henderson** · 11-21-2008, 07:09 PM

give me 30 minutes, im going to code this for you, XHTML + CSS. Just because i am nice

I would usually charge about $50 for this, so yeah, im nice.

Is that image above the exact specs you want?

**HWolfpack6** · 11-21-2008, 07:09 PM

D*mnit...it didn't work. I have the two colors there, but it leaves the space underneath it white still and just puts the yellow/blue in above and beneath the container.

**HWolfpack6** · 07:18 PM

Quote:

Originally Posted by Mark Henderson

give me 30 minutes, im going to code this for you, XHTML + CSS. Just because i am nice

I would usually charge about $50 for this, so yeah, im nice.

Is that image above the exact specs you want?

Container should be 1000px.
Links should be 1000px.
Header should be 1000px.
Content should be 700px.
Linksright should be 300px.
Ads (which goes right underneath the linksright) should be 300px.
Copyright should be 1000px.

I'd like the ads to stretch it's background color to fit the same length as the content. THANKS A LOT!

EDIT: No, actually, please don't do this. I am going to change the colors of the site, the one above isn't anything what I want it to look like in the end. Plus, the goal of this is to get some experience w/ CSS...so I'd rather do this myself.

**HWolfpack6** · 11-21-2008, 07:17 PM

OK! Got the layout working great in IE6, it's just Firefox that won't put in the background. It looks like before. Why would this be?

**Mark Henderson** · 11-21-2008, 07:23 PM

ok, so you don't need it any more?

**HWolfpack6** · 11-21-2008, 07:24 PM

Quote:

Originally Posted by Mark Henderson

ok, so you don't need it any more?

No, but thank you for your generosity.

**Mark Henderson** · 11-21-2008, 07:27 PM

Haha, ok, no problem.

**Brian07002** · 08:45 PM

When using absolute positioning ( DON'T USE IT ) YET first put your structure together, think like this: TOP (Header), BOTTOM (Footer), LEFT (Navigation), RIGHT (AD SPACE / Miscellaneous) CENTER (YOUR WEBSITES MAIN CONTENT)

ONCE YOU GET THAT FAR, THEN YOU CAN USE ABS POSITIONING ALL YOU WANT. You can put image anywhere with abs positioning as well as text, flash banners, videos etc..etc..

**HWolfpack6** · 11-21-2008, 09:33 PM

Quote:

Originally Posted by Brian07002

When using absolute positioning ( DON'T USE IT ) YET first put your structure together, think like this: TOP (Header), BOTTOM (Footer), LEFT (Navigation), RIGHT (AD SPACE / Miscellaneous) CENTER (YOUR WEBSITES MAIN CONTENT)

ONCE YOU GET THAT FAR, THEN YOU CAN USE ABS POSITIONING ALL YOU WANT. You can put image anywhere with abs positioning as well as text, flash banners, videos etc..etc..

I was told not to use absolute positioning though. Should I redesign the site and use it?

**wayfarer07** · 11-22-2008, 11:00 AM

In my opinion, absolute positioning should be minimal. Before you ever touch it, you need to completely understand the difference and relationship between absolute and relative positioning. Do you?

You shouldn't do any part of the main structure of your site with absolute positioning, unless you're doing something more advanced, and really know what you're doing.

**HWolfpack6** · 11-22-2008, 01:39 PM

Quote:

Originally Posted by wayfarer07

In my opinion, absolute positioning should be minimal. Before you ever touch it, you need to completely understand the difference and relationship between absolute and relative positioning. Do you?

N-O.

So how would I get this thing working in Firefox?

**HWolfpack6** · 11-22-2008, 07:28 PM

OK, I've got the entire layout working and all, but I try to add padding to the left and right side of the content, and it pushes the links on the right and ads to underneath it. How can I compensate to get the padding of the paragraph but keep the layout in order?

**wayfarer07** · 11-22-2008, 07:45 PM

Padding adds to the width of anything that has width set on it, so you either need to calculate when adding it, or else add the padding to inner elements.

**LadynRed** · 11-23-2008, 01:49 PM

Put the padding on the paragraphs INSIDE the div, not on the containing div, that won't break your layout.

**HWolfpack6** · 05:17 PM

I tried that, doesn't work though.

p#content
{
line-height: 25px;
padding: 5px;
}

It pushes the padding on the left good, but not the right. The right part goes underneath the ads and linksright div and sends those 2 down underneath the content in IExplorer.

EDIT: Got it, just renamed the paragraph ID's, man, the internet is so quirky.