List surrounded by a <div>

Antoniohawk

12-31-2003, 12:32 AM

I was wondering how i could make the div surrounding this list to me 20px wider than it, 10px on both sides. I dont however want to find out how wide the list is and add, because the list items may change and call for a larger or smaller container.

<html>
<head>
<title>Adventures in List Based Menu Trees</title>
<style>
body {
margin: 10px;
background: #F8F8F8;
}
#navCont {
border: 1px solid #B8B8B8;
background-color: #ECECEC;
}
#navCont ul{
list-style-type: none;
margin: 0;
padding: 0;
}

#navCont ul li{
padding-left: .6em;
padding-right: .6em;
}

#navCont a {
display: block;
width: 100%;
text-decoration: none;
color: #424242;
padding-left: .5em;
}
#navCont img {
border: none;
width: 9px;
height: 9px;
}
</style>
</head>
<body>
<div id="navCont">
<ul>
<li><a href="#" onFocus="blur();" onClick="door('item1')"><img id="img_master" src="minus.gif" />&nbspanimals</a>
<ul id="item2">
<li><a href="#" onFocus="blur();" onClick="door('item2')"><img id="img_parent1" src="minus.gif" />&nbspbirds</a>
<ul id="item3">
<li><a href="#" onFocus="blur();"><img src="item.gif" />&nbspsparrow</a></li>
<li><a href="#" onFocus="blur();"><img src="item.gif" />&nbspfinch</a></li>
<li><a href="#" onFocus="blur();"><img src="item.gif" />&nbspblue jay</a></li>
</ul>
</li>
</ul>
<ul id="item4">
<li><a href="#" onFocus="blur();" onClick="door('item3')"><img id="img_parent2" src="minus.gif" />&nbspfish</a>
<ul id="item5">
<li><a href="#" onFocus="blur();"><img src="item.gif" />&nbspcatfish</a></li>
<li><a href="#" onFocus="blur();"><img src="item.gif" />&nbsptrout</a></li>
<li><a href="#" onFocus="blur();"><img src="item.gif" />&nbspherring</a></li>
<li><a href="#" onFocus="blur();"><img src="item.gif" />&nbspcod</a></li>
<li><a href="#" onFocus="blur();"><img src="item.gif" />&nbspswordfish</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

brothercake

12-31-2003, 02:18 AM

I don't think you can without setting a width - since the DIV will always expand to 100% unless it has a defined width, you'll have to define a width, then you can use padding.

btw - you shouldn't be using onFocus="blur();" because you're making the navigation inaccessible to the keyboard. Take them out - they serve no good purpose.

jkd

12-31-2003, 05:31 AM

#navCount {
float: left;
padding: 0 10px;
}

maybe?

me'

12-31-2003, 09:36 AM

Originally posted by jkd
#navCount {
float: left;
padding: 0 10px;
}

maybe? This'll work, but why float it?

Oh, and to code those character entities, you'll need a semicolon afterward, for example &nbsp;.

jkd

12-31-2003, 11:51 AM

Because a div normally takes up 100% of the available space. And the list is variable width. Floating is currently the only way to "collapse" the width of the div to that of the unspecifiec-width list.

me'

12-31-2003, 12:31 PM

Originally posted by jkd
Because a div normally takes up 100% of the available space. And the list is variable width. Floating is currently the only way to "collapse" the width of the div to that of the unspecifiec-width list. :o forgot about that

brothercake

12-31-2003, 05:40 PM

You might wanna check Opera 6 and 7 - they compute the "auto" width of floated elements differently to other browsers - it might still be 100% width ... (hopefully not)