[thelist] CSS: layout question

Chris W. Parker cparker at swatgear.com
Wed Nov 20 18:42:01 CST 2002


> -----Original Message-----
> From: Nik Schramm [mailto:n at industriality.com]
> Sent: Wednesday, November 20, 2002 4:28 PM
> To: thelist at lists.evolt.org
> Subject: Re: [thelist] CSS: layout question
>

> In your case, try wrapping the contents of whatever you want
> to assign the
> 5px margin to inside another div and assign the margin to that.

good idea. the reason i didn't think of that is because it reminds me of
tables and i try to keep in mind that i shouldn't use tables for layout
so that idea never came to me. ;) believe me, i am a lover of nested
tables.

we're getting closer. here is the relevant style sheet declarations...

#nav_container {
	margin-top: 5px;
	width: 25%;
	float: left;
	}

#nav {
	margin-right: 5px;
	padding: 10px;
	border: 5px solid black;
	background: #fff;
	}

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

+================+
||              ||
||||||||||||||||||
|| Section A    ||
|| Section B    ||
||              ||
||              ||
||              ||

it should look like this...

+================+
||              ||
|| Home         ||
|| Section A    ||
|| Section B    ||
||              ||
||              ||
||              ||
+================+


the html is thusly...

<div id="nav_container">
 <div id="nav">
  <ul>
   <li>Home</li>
   <li>Section A</li>
   <li>Section B</li>
  </ul>
 </div>
</div>


make sense?


chris.



More information about the thelist mailing list