CSS Nesting Dividers

**Parsa44** · 04-05-2009 05:16 AM

Nesting dividers on CSS has been giving me a headace for a long, long time.
It seems to work when nesting one div:

HTML Code:

<html>
<body class="content">
<div id="holder">
        <div id="navigation">
                bob
         </div>
</div>
</body>
</html>

With the following stylesheet

Code:

body {
           	font-family:  Microsoft Sans Serif, Verdana, Palatino Linotype, Arial, Monaco;
	background: #FFFFFF;
}
.content #holder {
              colour: #000000;
              width: 1000px;
	  height: 780px;
}
.content #navigation {
            padding-left:20px;
	padding-right:20px;
}

But then what I do if i want to nest a div, in a div in a div e.g

HTML Code:

<html>
<body class="content">
<div id="holder">
        <div id="navigation">
                <div id="button1">
                 bob
                </div>
                <div id="button2">
                 bob
                </div>
         </div>
</div>
</body>
</html>

With the following CSS.

Code:

body {
           	font-family:  Microsoft Sans Serif, Verdana, Palatino Linotype, Arial, Monaco;
	background: #FFFFFF;
}
.content #holder {
              colour: #000000;
              width: 1000px;
	  height: 780px;
}
.content #navigation {
            padding-left:20px;
	padding-right:20px;
}
.content #button1 {
            width: 500px;
            float: left;
}
.content #button2 {
            width: 500px;
            float: right;
}

It doesnt seem to work, can anybody help me out.
Reputation will be awarded

**garrettroyce** · 04-05-2009 11:57 AM

In CSS, an ID can only be used once. A class howevr, can be used as many times as you want.

Code:

<html>
<body class="content">
<div class="holder">
        <div class="navigation">
                <div class="button1">
                 bob
                </div>
                <div class="button2">
                 bob
                </div>
         </div>
</div>
</body>
</html>

This might clarify things a little:

http://www.tizag.com/cssT/cssid.php

**misson** · 04-05-2009 06:27 PM

Originally Posted by Parsa44

It doesnt seem to work, can anybody help me out.

What doesn't work? Always state what you expect to happen and what actually happens. Otherwise, we can only guess what the intended effect is.

Nice minimal test case, though. It does make guessing easy. Is the problem that the 2 button divs display on different lines? The answer to that lies in the box model. Douglas Livingstone has a beautiful interactive illustration of the box model. The Wikipedia description of the old IE box model provides a clear illustration of how the width property relates to margin, border, padding and content.

Here's what's happening: #holder has a content width of 1000px. This gives #navigation 1000px to fill out with its margins, borders, padding and content. #navigation has 20px of padding; that gives 960px for content. #button1 and #button2 each require 500px (plus any border, margin and padding you might give them); the two of them won't fit in 960px of horizontal space. One solution: make the buttons smaller. A better solution: don't use a fixed layout, use a fluid or elastic layout. Your visitors will thank you.

If you ever need to play with layout & positioning, you can temporarily give the elements different backgrounds. That way you can see the extent of the various elements (except their margins; this won't mark margins). Firebug for Firefox will show you the margins, borders, padding and content of an element; I highly recommend it for debugging HTML/CSS. For IE, there's the IE developer toolbar (if you want it to work with multiple IE installations, use the IE collection). It's not as useful as Firebug, but it's something.

A few other things (you may already be aware of some of these):

Note #button2 can be floated to the left or the right. As it's after #button1 in the source, it will always be placed below or to the right of #button1.
You can use multiple selectors for a ruleset by separating them with commas.
Why does <body> have the .content class? Is it doing something in your production code? Why not select against body?
If #button1 and #button2 are buttons, why not use <button> elements?
If #button1 and #button2 aren't buttons, there still might be an element that's more semantically specific than <div> you can use. If it's a navbar, lists are often used.

Here's some sample code for you to consider and play with:

Code:

<html>
<head>
<style type="text/css">
body {
    /* don't forget the generic font family in case the device doesn't have the other fonts */
    font-family:  Microsoft Sans Serif, Verdana, Palatino Linotype, Arial, Monaco, sans-serif; 
    background: black;
}

#Content {
    max-width: 50em; /* doesn't work in IE6 */
    min-width: 20em; /* doesn't work in IE6 */
    colour: black;
    background: white;
    width: 99%; /* prevents unnecessary scrollbars in IE6.  Could be placed in a 
           conditional comment, but fairly harmless. */
}
.navBar {
    padding: 0 1em;
    margin: 0;
    list-style-type: none;
    overflow: auto;
    height: 1%; /* give element layout in IE6 */
}
.navButton {
    padding: 0;
    margin: 0;
    width: 50%; /* IE sometimes suffers from rounding errors when calculating width that 
               produce unnecessary scrollbars, so test this */
    float: left;
}
</style>
</head>
<body>
<div id="Content">
        <ul class="navBar">
                <li class="navButton">bob</li>
                <li class="navButton">bob</li>
         </ul>
</div>
</body>
</html>

**lordskid** · 04-05-2009 08:50 PM

I believe id will work just fine. only problem will be with javascript getElementById. That is why it would be better for you to use class for multiple elements and id for unique elements. But that is besides the point I think the problem is that you want the button# divs to be side by side. So I think first thing is to limit the lenght of the div you are currently using 500px. try using 50% instead. Then use float:lefts for both and it shoud be fine.

HTML Code:

.content #button1 {
            width: 50%;
            float: left;
}
.content #button2 {
            width: 50%;
            float: right;
}

**garrettroyce** · 04-06-2009 06:05 AM

Originally Posted by lordskid

I believe id will work just fine. only problem will be with javascript getElementById. That is why it would be better for you to use class for multiple elements and id for unique elements. But that is besides the point I think the problem is that you want the button# divs to be side by side. So I think first thing is to limit the lenght of the div you are currently using 500px. try using 50% instead. Then use float:lefts for both and it shoud be fine.

HTML Code:

.content #button1 {
            width: 50%;
            float: left;
}
.content #button2 {
            width: 50%;
            float: right;
}

True, but there is always js getElementsByName() which works just as well. My issue with id is this error, which is hard to track down, and it doesn't necessarily add anything at all to your code.

**nod4ever** · 04-06-2009 07:32 AM

Thanks, You are the man !

**misson** · 04-06-2009 08:48 PM

Originally Posted by garrettroyce

My issue with id is this error, which is hard to track down, and it doesn't necessarily add anything at all to your code.

Is the error you're talking about ID collision? The OP's source code didn't suffer from this problem (4 ID-ed elements: #holder, #navigation, #button1 and #button2). What am I missing?

Thread: CSS Nesting Dividers

LinkBack

Thread Tools

Display

CSS Nesting Dividers

Re: CSS Nesting Dividers

Re: CSS Nesting Dividers

Re: CSS Nesting Dividers

Re: CSS Nesting Dividers

Re: CSS Nesting Dividers

Re: CSS Nesting Dividers

Posting Permissions