Div layout page [Archive] - Ask Me Help Desk

cogs

Dec 28, 2008, 07:19 PM

hello, if this isn't the place to ask this, please point me to the proper link :)

here's my code, and I want to make all the divisions stuck together, with the LEMT on top, the navbar underneath on the left, and the body next to it on the right. The LEMT is far from the top on purpose to leave room for a graphic. I don't know why there's a space between 'navbar' and 'text' on the rendered page.

</html>
<head>
<style type="text/css">

</style
</head>
<body>
<div class="header"><h2>LEMT</h2>
</div>
<div class="navbar">
<i><center>Navbar</i><br>
links<br>
underneath<br>
blah<br>
blah<br>
</div>
<div class="body"><center>fun text here
</div>

</body>
</html>

vingogly

Dec 29, 2008, 09:42 AM

For clarity, I would suggest not calling the div "body" but rather "body-text" or something similar. There were a couple of minor errors (e.g. missing angle bracket) I cleared up in the following; also, if you put the navbar and body-text divs in a wrapper div that you position as shown, it works close to the way I think you want it to:

<html>
<head>
<style type="text/css">

div.header {
background: gray;
border: solid 2px;
padding: 5px;
margin-top: 15%;
width: 80%;
}

div.content {
width: 90%;
}

div.navbar {
background: maroon;
border: solid 2px;
padding: 10px;
width: 18%;
z-index: 1;
float: left;
}

div.body-text {
background: lightblue;
border: solid 2px;
padding: 10px;
width: 68%;
position: relative;
float: left;
z-index: 0;
}

</style>
</head>
<body>
<div class="header"><h2>LEMT</h2></div>
<div class="content">
<div class="navbar">
<i><center>Navbar</center></i><br>
links<br>
underneath<br>
blah<br>
blah<br>
</div>
<div class="body-text"><center>fun text here</center></div>
</div>
</body>
</html>

Floating navbar and body-text left within the content div is the key. Note that the relative attribute is not associated with margins, but with position. This is close to what you want, I think, but note that your padding and borders affect the width of the divs you're displaying (that's why in my example they don't add up to 100%).

cogs

Dec 29, 2008, 02:45 PM

Thank you very much... when I changed the widths back, they went all the way to the end, which didn't display that way with your numbers on ie6.
I had no idea another div was needed, nor do I understand how it affects the whole.
Now I have to figure out how to make the body-text the complete background. I'll probably have to make a background color reference. By the way, can I ask more questions about code here?
Edit: oh! I see that you put the ending </div> tag after the two nav and text divs. Which would place them under the control of the div.content. Didn't see that before.

vingogly

Dec 29, 2008, 05:54 PM

IE6 and IE7 can be a problem - they don't handle CSS in the standard way. Specifically, sizes are calculated differently for IE. The extra div - think of this as boxes within boxes: you really have two main boxes: the header, then content below it. Within the content, you have a navbar and the body-text. The float left stacks the two inner divs against each other to the left within the extra div I added.

You can ask more questions, sure; I'm hardly a CSS expert but can most likely give you some help.