My div tag collapses without absolute positioning?

**MarcMiller** · Apr 26, 2007 23:03

Hi
I was working on a page where I was developing a horizontal navigation strip and I thought I might like this strip, in a more generalized form, as a CSS snippet. So I went about changing the code I was using to what I thought was appropriate for a CSS snippet. When I change the code to what I thought was appropriate it failed to work the way I wished it to. I did not think absolute positioning was appropriate for a general CSS horizontal navigation strip snippet. But when I leave the absolute positioning off my div tag fails to use the top and bottom padding I am giving it to create vertical background colored space around my navigation links the way I want it to. The line that is in question is in orange in the code I am posting below. Can you please tell me why this happens and give me any suggestions you might have on how I might develop my horizontal navigation snippet.

Sincerely
Marc

Code:

<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type"
	 content="text/html; charset=iso-8859-1" />
	<title>test</title>
<style type="text/css" media="screen">
body {
  background-color:#E9D6CE;
  }		
* {
	padding:0;
	margin:0; 
}	

div#hNavStrip {
position:absolute;  
	width:100%;
	font-family:Arial, Helvetica, sans-serif;
  background-color:#CA9C88;
	padding:.2em 0 .2em .4em;
 /*left for first link space on left*/
}
#hNavStrip ul{
	float:left;
	 }
#hNavStrip li{
	float:left;
  line-height:1em;
	margin-right:.3em;
	list-style: none;
	text-align:center;
	font-size:.75em;
	background-color:#D7BDA6;
	border: black  solid 1px;
		}
#hNavStrip li a{
	display:block;	
	color:black;
	text-decoration:none;
  padding:0 .3em;
	line-height:1.35em;
	}
#hNavStrip li a:hover {
	background-color:#FFE0C5;
}	
#hNavStrip a.active {
	background-color:#FFE0C5;	
}
</style>
</head>

<body>
</body>
<div ID="hNavStrip">
	<ul>
	  <li>
	    <a href="#" class="active">
	    	test link 1</a>
	  </li>
	  
	  <li>
	    <a href="#">test link 2</a>
	  </li> 
	  
	  <li>
	    <a href="#">test link 3</a>
	  </li>  
	 </ul>
</div>
</html>

**Kravvitz** · Apr 26, 2007 23:28

Looks like you need to read up on clearing and containing floats. Other than floating the parent of the floated element(s) too, which often isn't a good option, the PIE/Aslett approach it best.

P.S. In XHTML documents the xmlns attribute must be specified on the <html> element.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">

**MarcMiller** · Apr 27, 2007 19:20

Thanks for those replies.

clear the floats see FAQ CSS Forum, and give IE Haslayout also see FAQ CSS Forum

I am not finding the forum you are mentioning.

I know that the declaration "height:1%;" is giving the "IE Haslayout" you are talking about. But I do not understand the selector. You are using a universal "*" tag selector with a descendent HTML tag and my descendent "#hNavStrip" ID. It seems to me nothing can be the descendent of the top-level HTML tag and all that frontage on your selector should logically not do anything differently than just my ID tag so where is your logic. I'm sure you're right however I am not getting it.

The link in the first reply to this thread was very good and it led me to a another the link from that link. Namely this "Containing Floats" link. At that "containing floats" link they explain the theory on why my content collapsed vertically and the padding did not extend the colored background around my links as I had hoped. However in the code examples given in my second reply above you are not keeping the vertical collapsing from happening via the clear property mentioned in the second reply and the link where I got the float theory. Experimentation proves it is being done via the "overflow hidden" property pair. Can some one link me or tell me the theory behind this.

In regard to using an unnecessary div tag. I thought it might be unnecessary. However here is my reasoning. I thought I might often like to have the first thing in my horizontal navigation strip be a label of what my navigation strip was for. The code on a page I have started which I am showing in code tags below is an example of what I am talking about. It seemed to me that this navigation label semantically would not be part of the unordered list that will contain my navigation. Perhaps I am semantically incorrect, but I was wrapping the whole thing in a div tag so that I might extend my colored navigation strip behind my navigation label. I am very open to suggestions on how I might do this better.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type"
	 content="text/html; charset=iso-8859-1">
	<title>Classic Cars</title>
<style type="text/css" media="screen">
body {
  background-color:#E9D6CE;
  }	
* {
	padding:0;
	margin:0; 
}		
div#head{
	position:relative;
	height:200px;
	}
div#head h1{
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	text-align:center;
	}	
div#head h1 img{
	position:relative;
	top:70px;
	}	
div#head h2{
	font-size:1.6em;
	font-weight:bold;
	background-color:#CA9C88;	
	line-height:1.25em;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;	
	}	
div#hNavStrip {
	position:  absolute;
	bottom:0;
	width:100%;
	font-family:Arial, Helvetica, sans-serif;
  background-color:#CA9C88;
	padding:.2em 0 .2em .4em;
 /*left for first link space on left*/
}
#hNavStrip ul{
	float:left;
	 }
#hNavStrip li{
	float:left;
  line-height:1em;
	margin-right:.3em;
	list-style: none;
	text-align:center;
	font-size:.75em;
	background-color:#D7BDA6;
	border: black  solid 1px;
		}
#hNavStrip li a{
	display:block;	
	color:black;
	text-decoration:none;
  padding:0 .3em;
	line-height:1.35em;
	}
#hNavStrip li a:hover {
	background-color:#FFE0C5;
}	
#hNavStrip a.active {
	background-color:#FFE0C5;	
}	
#hNavStrip p{
	float:left;
	font-weight:bold;	
  font-weight:bold;
  line-height:1.35em;
  font-size:.8em;
	margin-right:.2em;
	}
</style>	
</head>

<body>
<div id="head">
<h2>Your visual browser to
 classic car stories</h2>
  <h1><img src="images/ClassicCars.gif"
	 alt="ClassicCars"></h1>
	<div ID="hNavStrip">
		<p>Eras</p>	
		<ul>		
		   <li>
	                   <a class="active" href="#">
			  Veteran 1890s</a>
		  </li>  
		   <li>
		        <a href="#">Edwardian 1900s</a>
		  </li>   
		  <li>
		    <a href="#">Vintage 1920s</a>
		  </li>
			<li>
		    <a href="#">Pre-War 1930-40s</a>
		  </li> 
			<li>
		    <a href="#">Post-War 1950-70s</a>
		  </li>     
		 </ul>
	</div>
</div>	
</body>

</html>

In regard to using a HTML opening tag which includes a reference to the W3C. I tried what was recommended in a PS above but my code still generates this error "line 2 column 12 - Error: there is no attribute 'XMLNS' " so if you would care to comment on how to get this.document type HTML tag thing correct that would be appreciated too.

**Kravvitz** · Apr 27, 2007 20:41

1) He's referring to this CSS forum's FAQ list.

2) Wow. You know about hasLayout but not IE's "* html" bug. IE both Windows and MacOS versions (not including IE7+ in standards mode) think that an <html> element has a parent, thus you can you can target rules for only those browsers by using it at the beginning of a complex selector. For example "* html p" will select all <p> elements but only in IE. Other browsers will safely ignore it because they know that <html> has no parent.

3) As to why overflow:hidden works to contain floats: (http://www.w3.org/TR/CSS21/visuren.html#floats)

Originally Posted by CSS2.1 Specs

The margin box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space.

4) You're perfectly correct that the label for the list should not be inside the list. We just weren't aware that you had a reason for what looked like an unnecessary <div>.

5) The xmlns attribute is for XHTML documents, not HTML ones. That's why you're getting the error now. When I said "XHTML", I meant just XHTML. If I meant XHTML and HTML, I would have said "X/HTML" or "(X)HTML".

User Tag List

Thread: My div tag collapses without absolute positioning?

Thread Tools

Display

My div tag collapses without absolute positioning?

Bookmarks

Bookmarks

Posting Permissions