[thelist] CSS: layout question

Wed Nov 20 18:59:00 CST 2002

On 21.Nov.02 01:41 Chris W. Parker wrote

 > now the problem is that the border that is defined for the div
 > *within*the containg box has it's bottom border at the top. like
 > this...

A <ul> is a block-level tag, so there is no need to wrap it in a div.
You can just assign the 5px right-marge directly to the list, which also
means the code looks less like a nested table, which is a valid concern
that I do appreciate.

Try this: (Note that I have nulled the default margins and padding of
the ul in my styles, then redclared some of them later in the #menu.
Lists can be tricky, especially cross-browser, so you might need to hack
some in order to get a consistent feel)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"" xml:lang="en" lang="en">
	<head>
		<title> title me </title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
			<!--
			body { padding: 0; margin: 0; }
			div { border: 1px dotted black; }
			ul { margin: 0px; padding: 0px; }
			#header { height: 50px; margin-bottom: 5px; }
			#menubox { width: 25%; float: left; }
			#menu { margin-right: 5px; padding: 20px; border: 5px solid black;}
			#content { margin-left: 25%; }
			//-->
		</style>
	</head>
	<body>
		<div id="header">header</div>
		<div id="menubox">
			<ul id="menu">
				<li>Home</li>
				<li>Section A</li>
				<li>Section B</li>
			</ul>
		</div>
		<div id="content">content</div>
	</body>
</html>

That (or something fairly similar) might do it...
--
/nik