Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

simppe <DIV> question

Status
Not open for further replies.
spicymango

spicymango

Programmer
May 25, 2008
119
CA
Hi ,

I don't understand what I am doing wrong that my left side menues are not appearing on the left side one below other.

Thanks




Code: 
<html>
<head>
<STYLE type=text/css>

body 
{    background-color: grey;    font-size:14px;    font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer {    width: 70%;  height:75%;   background-color:#FFFFFF;    margin-top: 150px;    margin-bottom: 30px;    margin-left: auto;    margin-right: auto;    padding: 0px;   
}
div#header {    padding: 0px;    margin-top: 0px;    text-align: center; background-color:#659EC7; height:130; 
}

div#nav {    width: 30%;    height: 200; padding: 0px;    margin-top: 1px;    float: left;    background-color:#616D7E;
}
div#navt {  margin-left: 0px;   width: 30%;    padding: 0px;    margin-top: 210px;    float: left;   background-color:#616D7E;
}
div#main {    margin-left: 40%;    margin-top: 1px;    padding: 0px;   text-align: center;   height:65%;
}
div#footer {    padding: 0px;    margin: 0px;     text-align: center; height:62; 

}
</STYLE>



</head>
<body>
	<div id="outer">    
		<div id="header">        
			<h3>Bank</h3>    
		</div>    
		<div id="nav">        
			<h4>Navigation</h4>        
				<ul>            
					<li>Let me not to the marriage of true minds</li>            
					<li>Admit impediments; love is not love</li>            
					<li>Which alters when it alteration finds</li>        
				</ul>    
		</div>    
		<div id="navt">        
			<h4>Navigation1</h4>        
				<ul>            
					<li>Let me not to the marriage of true minds</li>            
					<li>Admit impediments; love is not love</li>            
					<li>Which alters when it alteration finds</li>        
				</ul>    
		</div> 
	 	
		
		<div id="main">        
			<p>Main Content -- Love's not time's fool...</p>    
		</div>    
		<div id="footer">        
			<p>Footer text -- Admit impediments...</p>    
		</div>
	</div>
</body>
</html>
 
Sort by date Sort by votes
Both nav and navt are set to float left without any clearing element. They will therefore float as far left as they can until they meet a previously floated element, so navt floats to the right edge of nav.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Upvote 0 Downvote
Basically the behavior you want is the standard behavior of DIV's when no styling is applied.

So just unfloat them, and they will be to the left, and one on top of the other.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Thanks. I took out the clear it worked.

johnwm yopu said
"Both nav and navt are set to float left without any clearing element. They will therefore float as far left as they can until they meet a previously floated element, so navt floats to the right edge of nav."

What I don't understand is where previous element ends from the top, from there the second DIV starts from the top, so it should not stop at the left, but should slide below it, shouldn't it? I mean they are at different vertical levels. Not side by side.
 
Upvote 0 Downvote
Floats are not included in the normal flow, so they each only see the last floated element for position.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
301
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
104
jason.lex
jason.lex
jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
63
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
79
tyutghf
tyutghf
lupidol
  • Locked
  • Question
What does a question mark (?) stands for in ancho tag ? 1
Replies
2
Views
236
lupidol
lupidol

Part and Inventory Search

Sponsor

Back
Top