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!

Floating DIV

Status
Not open for further replies.
spicymango

spicymango

Programmer
May 25, 2008
119
CA
Hi,

I have three <div>

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
 <div id="container" style="width:500px;height:700px;background-color:green;">
	 <div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div> 
	 <div id="three" style="float:right;width:100px;background-color:red;">three </div> 
	 <div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm  vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div>
	
 </div>
 </BODY>
</HTML>

I noticed when I increased the % width of my <div two> it goes below my <div three>

I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior?


 
Sort by date Sort by votes
I was playing with it and I noticed that if you remove the "float:left;" from the style for div two, then it will wrap (Although the width % then seems to mean something different than what it did when you include "float:left;". Try "width:90%;" instead).
 
Upvote 0 Downvote
You have 3 divs in a wrapper (#container) that's 500px wide.

Div one is 100px wide.

Div 2 is 70% of its container. that's 70% of 500px; so 350px wide.

Div 3 is 100px wide.

That's 450px total, they fit fine next to each other inside the 500px wide div with 50px to spare.

If you increase the width of div two, it goes beyond the 500px limit set by your wrapper. For example: if you set it to 80% instead of 70% then that's 400px wide plus 200px from the other 2 divs is 600px wide in a 500px container. So it drops down as you'd expect it because it can't fit.

Do you need your wrapper to be 500px wide? Can you make it bigger? Does your div two need to be set in percentage?



----------------------------------
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 a lot for your replies, I thought I was doing something wrong, or missing something, I guess it is behaving as it should as width is not wide enough.
 
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
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
79
tyutghf
tyutghf
kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
128
ChrisHirst
ChrisHirst
dvannoy
  • Locked
  • Question
Center a div within an asp.net content placeholder 1
Replies
1
Views
258
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top