Div positioning problem.

apotd

11-24-2011, 07:23 PM

I'm trying to make a simple layout but of course things are going wrong again.

This is my HTML code:

<body>

<div id="container">

<div id="body">

<div id="uppernav">
</div>

<div id="content">
</div>

<div id="leftnav">
</div>

</div>

</div>

<footer></footer>

</body>

This is my CSS:

body{
background: #d5d5d5;
}

#body{
width: 1100px;
background: url('../images/backgroundcontent.gif');
height: 600px;
margin: 0 auto 0 auto;
}

#uppernav{
width: 900px;
background: #000000;
height: 60px;
margin: 0 auto 0 auto;
}

#content{
width: 680px;
background: yellow;
height: 400px;
margin: 70px 40px 0 40px;
float: left;
}

#leftnav{
width: 300px;
background: blue;
height: 400px;
margin: 70px 40px 0 0;
float: left;
}

footer{
background: red;
position: fixed;
bottom: 0;
height: 30px;
width: 100%;
}

This (http://i40.tinypic.com/14jths3.gif) is the result I get.

Now what should be fixed:

1. The black bar (called uppernav) should be placed a couple of pixels lower, but when I try to edit the margin it won't work, and placing "top: 100px" e.g. in the CSS won't work either.

2. There is a little bit of space on the left which is not covered by the footer, even though I used width: 100%.

3. The dark grey box called body leaves a few pixels at the top. It should start immediately at the top.

4. The dark grey box should cover the entire height of the website.

I hope someone could help with something of this. Sorry if it sounds confusing.

Greetings.

Excavator

11-24-2011, 07:37 PM

Hello apotd,
Your #uppernav won't margin down because of collapsed margins (http://nopeople.com/CSS%20tips/uncollapsing-margin/index.html).

The space on the left is the default margin on body.
Zero that out with this - body {
margin: 0;
background: #d5d5d5;
}

#3 ... same fix as #2

See this example of a full height layout (http://nopeople.com/CSS%20tips/full-height-layout/index.html).

apotd

11-24-2011, 07:47 PM

Problem 2 of 3 got fixed by the margin: 0;. But I still can't get the uppernav to move down. When I use margin, the top of my layout does not include the dark grey background anymore.

Excavator

11-24-2011, 07:49 PM

Let's see your updated code.

apotd

11-24-2011, 10:32 PM

body{
background: #d5d5d5;
margin: 0;
}

#body{
width: 1100px;
background: url('../images/backgroundcontent.gif');
height: 600px;
margin: 0 auto 0 auto;
}

#uppernav{
width: 900px;
background: #000000;
height: 60px;
margin: 100px auto 0 auto;
}

#content{
width: 680px;
background: yellow;
height: 400px;
margin: 70px 40px 0 40px;
float: left;
}

#leftnav{
width: 300px;
background: blue;
height: 400px;
margin: 70px 40px 0 0;
float: left;
}

footer{
background: red;
position: fixed;
bottom: 0;
height: 30px;
width: 100%;
}

Excavator

11-25-2011, 12:18 AM

Read my first post about the collapsing margins...

apotd

11-25-2011, 09:51 AM

Oh so the 0 was not for the collapsed maps? Do you mean I have to do this: http://www.complexspiral.com/publications/uncollapsing-margins/ to fix the problem?

obenns

11-25-2011, 02:57 PM

Try placing a universal selector at the top of your stylesheet:

* {
margin: 0;
padding: 0;
border: 0;
}

It's common practice to do this, as browsers have different defaults. Lame right?

Excavator

11-25-2011, 03:18 PM

Oh so the 0 was not for the collapsed maps? Do you mean I have to do this: http://www.complexspiral.com/publications/uncollapsing-margins/ to fix the problem?

Add this bit highlighted in red:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style type="text/css">
body {
margin: 0;
background: #d5d5d5;
}
#body {
width: 1100px;
margin: 0 auto;
overflow: auto;
background: #0f0 url('../images/backgroundcontent.gif');
}
#uppernav {
height: 60px;
width: 900px;
margin: 10px auto 0;
background: #000;
}
#content {
height: 400px;
width: 680px;
margin: 70px 40px 70px 40px;
float: left;
background: #ff0;
}
#leftnav {
height: 400px;
width: 300px;
margin: 70px 40px 70px 0;
float: left;
background: #00f;
}
footer {
height: 30px;
width: 100%;
position: fixed;
bottom: 0;
background: #f00;
}
</style>
</head>
<body>
<div id="container">
<div id="body">
<div id="uppernav"> </div>
<div id="content"> </div>
<div id="leftnav"> </div>
</div>
</div>
<footer></footer>
</body>
</html>

apotd

11-26-2011, 12:32 AM

I added the overflow, and everything seems to be fixed now, but my background from #body still won't cover everything. I don't really seem to understand why.

http://i40.tinypic.com/25ioeaa.gif

obenns

11-26-2011, 12:38 PM

Don't understand what you mean? What is your background image of? At the moment I'm just seeing a grey background.

Remember you have a fixed height on the content and side bar.

Excavator

11-26-2011, 03:05 PM

Good morning aptod,
Are you wanting a full height layout? It takes some extra coding to make a layout fill the viewport even when there is not enough content.

Look at my very first reply in this thread. I gave you a link to an example of a full height layout.

apotd

11-27-2011, 12:03 PM

I tried to take a look at the CSS of the full-height layout and changed my code to this:

*{
margin: 0;
padding: 0;
}

body{
background: #d5d5d5;
margin: 0;
}

#body{
width: 1100px;
background: url('../images/backgroundcontent.gif') repeat-y;
overflow: auto;
min-height: 100%;
position: relative;
margin: 0 auto -30px auto;
}

#uppernav{
width: 900px;
background: #000000;
height: 60px;
margin: 150px auto 0 auto;
}

#content{
width: 750px;
background: yellow;
height: 400px;
margin: 40px 40px 0 40px;
float: left;
overflow: hidden;
padding: 20px 20px 20px 20px;
-moz-column-count: 3;
-moz-column-gap: 22px;
-webkit-column-count: 3;
-webkit-column-gap: 22px;
column-count: 3;
column-gap: 22px;
}

#rightnav{
width: 170px;
background: blue;
height: 420px;
margin: 40px 40px 0 0;
float: left;
padding: 10px 10px 10px 10px;
}

footer{
background: red;
position: fixed;
bottom: 0;
height: 30px;
width: 100%;
}

It seems the min-height does not work. My "#body" is the same as their "wrap" in the example, right?

And @ obenns, I mean the dark grey background. I know the content and navigation have a fixed height, but the #body (my "wrapper") does not.

fathamahaque

11-27-2011, 06:19 PM

I hope htmlcodetutoria web site help you.