PDA

View Full Version : Couple of CSS quetions (div positioning and white space)

live wire
12-29-2006, 05:09 AM
Hi all, new user here. I have a couple of small problems with my CSS layout.

Nothing's been uploaded yet so I can't show you but use your imagation...

I have one div for my banner, one div directly below it for navigation links and another div for content follows on from there. The problem is, if I run out of space on my one line of navigation links, the ones that don't fit will show up under the content div. How can I make my content div move down with the bottom of my navigation div?

Second point, if the content div is too long for the page, it sticks to the bottom of the window. How can I add white space between the bottom of the div and the end of the page? I tried setting a margin in the body of my css document thinking that would work. It didn't.

Thanks for and help.
J to the izzosh
12-29-2006, 06:15 AM
Well, it's difficult to provide concrete answers without seeing your page, but these may help:

I have one div for my banner, one div directly below it for navigation links and another div for content follows on from there. The problem is, if I run out of space on my one line of navigation links, the ones that don't fit will show up under the content div. How can I make my content div move down with the bottom of my navigation div?
Don't specify a height. If content is overflowing an element, then you've restricted the height of that element: don't. If you haven't specified a height and it is the navigational div itself that is flowing under the content div, then you've probably positioned (at least) the content div absolutely: don't as there isn't any need. Just ensure that the three div elements are in their proper order in the source and allow them to flow normally. They will touch edges and won't flow over or under each other.

Second point: if the content div is too long for the page, it sticks to the bottom of the window. How can I add white space between the bottom of the div and the end of the page? I tried setting a margin in the body of my css document thinking that would work. It didn't.
Adding a margin to your body element like so...
body { margin:25px; }
...should work fine (in theory and practice). So should applying a margin to the div in question. If they aren't working, then absolute positioning may once again be the culprit as it removes an element from the normal flow of the document. If not, we'll need to see your source to get an idea of what might be the problem.
live wire
12-29-2006, 06:58 AM
No luck. :(

I just remembered that forums have code tags so I can give you my style sheet. As you say absolute positioning is a problem. Trouble is, the divs are centered on the page like this. Removing or changing the absolute value messes them up.

A:link {
text-decoration: underline;
color:#000000;
}
A:visited {
text-decoration: underline;
color:#000000;
}
A:active {
text-decoration: underline;
color:#000000;
}
A:hover {
text-decoration: underline;
color:#000000;
}
body {
background-color: #000000;
font-family: "Comic Sans MS", Verdana, Arial, sans-serif;
}
#banner {
position: absolute;
margin-left: -375px;
left: 50%;
top: 10px;
width: 750px;
height: 160px;
background-color:#ff0000;
}
#navigation {
position: absolute;
margin-left: -375px;
left: 50%;
top: 170px;
width: 750px;
height:auto;
background-color:#00ff00;
}
#content {
position: absolute;
margin-left: -375px;
left: 50%;
top: 193px;
width: 750px;
height: 1000px;
background-color:#0000ff;
}

And a html document sans content...

<html>
<head>
<LINK href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="banner">
<p>This is the banner div.</p>
</div>
<div id="navigation">
This is the navigation div. Adding extra links here causes them to dissapear under the blue div. Testing, 1, 2.
</div>
<div id="content">
<p>This is the content div.</p>
<p>I want this div to move down as and when I add links to the navigation bar so they're visible.</p>
</div>
</body>
</html>

you can see what I mean by the navigation bar if you move the blue content div down 20 pixels.
live wire
12-29-2006, 07:11 AM
:: carrying on from my last post (curse this 5 minute rule) ::

Also note the blue div sticking like glue to the bottom of the page. The margin code doesn't work for me.

... And forgive the primary colours, that's just me trying to make things obvious. :D
J to the izzosh
12-29-2006, 04:59 PM
No, the margins won't accomplish much as long as the elements are absolutely positioned. Since they're taken out of the normal document flow, there's technically nothing around them against which to push. That same reason is why your navigation div can't shove aside your content div. If it could, then the content div's position wouldn't be very absolute, would it? Your best bet is to abandon the absolute positioning in favour of automatic margins (http://www.lissaexplains.com/forum/showthread.php?p=411945) for centering.
live wire
12-29-2006, 10:44 PM
Thanks J, I think I have it working now. Although I ended up using relative positioning anyway. As it happens it was your link to this page that helped save the day (and my sanity):

http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme

It turns out that the top:##px; property that I had in every div was causing all the problems. I never got relative positioning until now, thanks. :blush: