Forums

margaux

trying to get to grips with CSS positioning. I've included the css and html below. My questions are 1. why is the nav wrap div not wholly contained within the header wrap div and sitting to the right of the logo at the same height? and 2. why is the footer list not contained within the footer div? Thanks

html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<title>Weaving Wonderful Websites</title>

<link href="css/emptyIndexPort.css" rel="stylesheet" type="text/css"/>
<link href="css/portfolio-slider.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="siteWrapper"><p>Site Wrapper</p>
	<div id="headerWrap"><p>Header Wrap</p>
		<div id="logo"><p>logo</p>
		</div>

		<div id="navWrap"><p>Nav Wrap</p>
			<ul id="nav"> Nav List
				<li><a href="about.html">about</a></li>
				<li><a href="portfolio.html">portfolio</a></li>
				<li><a href="technical.html">contact</a></li>
			</ul>
		</div><!-- end navWrap div -->
	</div><!-- end headerWrap div -->


	<div id="portfolioWrap">
			<div class="anythingSlider">
        
				<div class="wrapper">

				</div><!-- end wrapper div -->
			</div><!-- end anythingSlider div -->

	</div><!-- end portfolioWrap div -->

	<div id="footer">
			<ul> 
				<li><a href="#">copyright</a></li>
				<li><a href="#">site by</a></li>
				<li><a href="#">contact</a></li>
			</ul>
	</div> <!-- end footer div -->

</div> <!-- end siteWrapper div -->
</body>
</html>

css

*/

*   { margin: 0; padding: 0; }

p {font-size:36px;}

body {
	font-family: sans-serif;
	color:#B26FA7;
}


a, a img { border: 0; text-decoration: none; }

#siteWrapper {
/*	background:url(images/bar.jpg) repeat-x;*/
	padding:30px 0 0 20px;
	min-width:1000px;
	border: 2px solid black;
}


/* ---------------------- header ----------------------- */	
#headerWrap {
		width:1000px;
		padding-bottom:80px;
		border: 1px solid black;
}
		
#logo {
	width: 600px;
	height: 182px;
	border: 1px solid black;
}

/* ---------------------- navigation ----------------------- */

#navWrap {
		position:relative;
		float:right;
		margin:35px 0 0 20px;
		border: 2px solid red;
		width:350px;
		height:200px;
}

#nav {
	text-decoration: none;
	list-style: none;
	border: 2px solid green;
}

#nav li {	
		display:inline;
		font-size:20px;
		margin-left:15px;
		border: 1px solid black;
}

#nav li a, #emailLink a {
	color:#f4847f;	
	text-decoration:none;
}

#nav li a:hover, #nav li a:active, #emailLink a:hover, #emailLink a:active {
	color:#ccc;
	font-style:italic;
}

/* ---------------------- portfolio content ----------------------- */

#portfolioWrap {
	border: 2px solid purple;
		float:left;
		width:680px;
		color:#F66;
		font-size:14px;
		padding:50px 0px 0px 20px;
		margin-left:4px;
}

	

/* ------------------------------- footer -------------------------- */	


#footer {
	border: 2px solid blue;
	width:900px;
	color:#F66;
	margin-top:400px;
	clear:both;
}

#footer ul {
	float:right;
	list-style: none;	
	width:400px;
}

#footer li {
		display:inline;
		font-size:16px;
		padding-right:34px;
		text-align:left;
		text-decoration:none;
}

#footer ul a {	
	text-decoration:none;
}

wolfcry911

1) the navwrap is a float and so is allowed to 'hang' outside of its parent. There are a number of ways to make the parent contain the float - the simplest is to add overflow: hidden to the parent (headerwrap). The logo is a block level element and the navwrap, even though its floating, starts after the logo in the source and hence it starts below the logo. You would either need to a) float the logo as well (or instead of) as navwrap; or b) place navwrap before logo in the source.

2) same as above

margaux

thanks - this explanation was very helpful. I'm self-taught so don't always get this level of explanation.