CSS Nesting Dividers

P

Parsa44

New Member
Messages
232
Reaction score
0
Points
0
Nesting dividers on CSS has been giving me a headace for a long, long time.
It seems to work when nesting one div:

HTML: 
<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: 
<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

garrettroyce

Community Support
Community Support
Messages
5,609
Reaction score
250
Points
63
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
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
Parsa44 said:
It doesnt seem to work, can anybody help me out.
Click to expand...

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>
 
L

lordskid

New Member
Messages
41
Reaction score
0
Points
0
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: 
.content #button1 {
            width: 50%;
            float: left;
}
.content #button2 {
            width: 50%;
            float: right;
}
 
garrettroyce

garrettroyce

Community Support
Community Support
Messages
5,609
Reaction score
250
Points
63
lordskid said:
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: 
.content #button1 {
            width: 50%;
            float: left;
}
.content #button2 {
            width: 50%;
            float: right;
}
Click to expand...

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.
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
garrettroyce said:
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.
Click to expand...

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?
 
You must log in or register to reply here.
Top