HTML and CSS RSS HTML and CSS RSS

Floating problems

Reply

•
•
Join Date: Jun 2008
Posts: 50
Reputation: alimoe is an unknown quantity at this point 
Solved Threads: 2
alimoe's Avatar
alimoe alimoe is offline Offline
Junior Poster in Training

Floating problems

 
0
  #1
Mar 4th, 2009
hi guys,
I am designing a website. The site has to have 3 columns, so i floated the left bar to the left. Didn't float the main, middle content and i floated the right bar to the right. Everything looks perfect eeh?

well, not really!. Its coll if the browser is maximized but if you resize(squeeze) the window the contents condense, till to the point the right bar drops to the left.

I don't want that!! Please help me.

Thanking you in advance!
I am a Novice..............
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2007
Posts: 45
Reputation: colweb is an unknown quantity at this point 
Solved Threads: 1
colweb colweb is offline Offline
Light Poster

Re: Floating problems

 
0
  #2
Mar 5th, 2009
alimoe,

In the code below you see 3 columns made with divs. There is comment inside to explain what is done. In Firefox 3 and IE 6 and 7 the right div always stays at the right. All columns are made with floating divs.

HTML and CSS Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. 			"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  4. <head>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  6. 	<style = "text/css">
  7. 		.bodywrapper {width:80%;margin-left:auto;margin-right:auto;}
  8. 		.wrapperleft {width:15%; float:left;}
  9. 		.wrappermiddle {width:70%; float:left;}
  10. 		.wrapperright {width:15%; float:right;}
  11. 		.divleft {margin:3px; padding:3px; border:1px solid red;}
  12. 		.divmiddle {margin:3px; padding:3px; border:1px solid green;}
  13. 		.divright {margin:3px; padding:3px; border:1px solid blue;}
  14. 	</style>
  15. </head>
  16. <body>
  17. 	<!-- 3 cols div's. All divs touch, total width: 100% -->
  18. 	<div class="wrapperleft" style="background-color:red">some text</div>
  19. 	<div class="wrappermiddle" style="background-color:green;">more text</div>
  20. 	<div class="wrapperright" style="background-color:blue;">and more</div>
  21. 	<br/><br/>
  22.  
  23. 	<!-- 3 cols div's inside wrappers. Divs don't touch, total width: 100% -->
  24. 	<div class="wrapperleft"><div class="divleft">some text</div></div>
  25. 	<div class="wrappermiddle"><div class="divmiddle">more text</div></div>
  26. 	<div class="wrapperright"><div class="divright">and more</div></div>
  27. 	<br/><br/>
  28.  
  29. 	<!-- 3 cols div's inside wrappers. Divs don't touch, total width: width off bodywrapper (80%) -->
  30. 	<div class="bodywrapper">
  31. 		<div class="wrapperleft"><div class="divleft">some text</div></div>
  32. 		<div class="wrappermiddle"><div class="divmiddle">more text</div></div>
  33. 		<div class="wrapperright"><div class="divright">and more</div></div>
  34. 	</div>
  35. </body>
Last edited by colweb; Mar 5th, 2009 at 9:44 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 1,335
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 163
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso

Re: Floating problems

 
0
  #3
Mar 5th, 2009
•
•
•
•
Originally Posted by alimoe View Post
hi guys,
I am designing a website. The site has to have 3 columns, so i floated the left bar to the left. Didn't float the main, middle content and i floated the right bar to the right. Everything looks perfect eeh?

well, not really!. Its coll if the browser is maximized but if you resize(squeeze) the window the contents condense, till to the point the right bar drops to the left.

I don't want that!! Please help me.

Thanking you in advance!
take out the fixed sizes the colums are set at and change them to % of the window width
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2007
Posts: 45
Reputation: colweb is an unknown quantity at this point 
Solved Threads: 1
colweb colweb is offline Offline
Light Poster

Re: Floating problems

 
0
  #4
Mar 5th, 2009
almostbob,

take out the fixed sizes the colums are set at and change them to % of the window width

It is possible to have 3 cols and have the middle one fixed. See the code below. The middle column is 600px wide and the left and right 15% each. The right one will always stay right, but off course will go over the middle one if the whole window is becoming to small. Thing is, you must pay attention to the order of the divs. The floating left and right one must come before the fixed non floating middle column.

Even all the columns can have a fixed width, see the third example in the code below. But here also, the right column will go over the middle one if the window size is too small.


HTML and CSS Syntax (Toggle Plain Text) 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.             "http://www.w3.org/TR/html4/strict.dtd">
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  5. 	<style type = "text/css">
  6. 		.bodywrapper {width:80%;margin-left:auto;margin-right:auto;}
  7. 		.wrapperleft {width:15%; float:left;}
  8. 		.wrappermiddle {width:600px; margin-left:auto; margin-right:auto;}
  9. 		.wrapperright {width:15%; float:right;}
  10. 		.divleft {margin:3px; padding:3px; border:1px solid red;}
  11. 		.divmiddle {margin:3px; padding:3px; border:1px solid green;}
  12. 		.divright {margin:3px; padding:3px; border:1px solid blue;}
  13. 	</style>
  14. </head>
  15. <body>
  16. 	<!-- 3 cols div's. All divs touch, total width: 100% -->
  17. 	<div class="wrapperleft" style="background-color:red">some text</div>
  18. 	<div class="wrapperright" style="background-color:blue;">and more</div>
  19. 	<div class="wrappermiddle" style="background-color:green;">more text</div>
  20. 	<br/><br/>
  21.  
  22. 	<!-- 3 cols div's inside wrappers. Divs don't touch, total width: 100% -->
  23. 	<div class="wrapperleft"><div class="divleft">some text</div></div>
  24. 	<div class="wrapperright"><div class="divright">and more</div></div>
  25. 	<div class="wrappermiddle"><div class="divmiddle">more text</div></div>
  26. 	<br/><br/>
  27.  
  28. 	<!-- 3 cols div's inside wrappers. Divs don't touch, total width: width off bodywrapper (80%) -->
  29. 	<div class="bodywrapper">
  30. 		<div style="width:200px; float:left;"><div class="divleft">some text</div></div>
  31. 		<div style="width:200px; float:right;"><div class="divright">and more</div></div>
  32. 		<div class="wrappermiddle"><div class="divmiddle">more text</div></div>
  33. 	</div>
  34. </body>
  35. </html>
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 1,335
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 163
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso

Re: Floating problems

 
0
  #5
Mar 5th, 2009
•
•
•
•
The middle column is 600px wide and the left and right 15% each
resize the window, ~500px, now the layout is 150% wide
the op wants to avoid having the right div drop below the others when the window is resized, not cause further layout problems, overlays, scroll bars
This why the W3C css standard is relative sizes and postioning.
Last edited by almostbob; Mar 5th, 2009 at 2:26 pm.
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2007
Posts: 45
Reputation: colweb is an unknown quantity at this point 
Solved Threads: 1
colweb colweb is offline Offline
Light Poster

Re: Floating problems

 
0
  #6
Mar 6th, 2009
•
•
•
•
Originally Posted by almostbob View Post
resize the window, ~500px, now the layout is 150% wide
the op wants to avoid having the right div drop below the others when the window is resized, not cause further layout problems, overlays, scroll bars
This why the W3C css standard is relative sizes and postioning.
I agree. If you see my first reply, all the divs have relative width's. But, you can have a div on the right side and stay there, so not dropping to the left if the window size is becoming smaller even if you use fixed width's.
When using fixed width's, Firefox will let the divs overlap while IE will drop the middle div below the left and right one if the window size becomes to small.
With relative width divs IE will sometimes drop the right div below the two others, but will keep it on the right. Don't know what should be the correct action, but to me it seems Firefox is doinig it right, relative and fixed always stay on the same level and fixed will eventually overlap.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: Floating problems

 
0
  #7
Mar 9th, 2009
So how do you make it use scrollbars instead of dropping a div down?
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2007
Posts: 45
Reputation: colweb is an unknown quantity at this point 
Solved Threads: 1
colweb colweb is offline Offline
Light Poster

Re: Floating problems

 
0
  #8
Mar 11th, 2009
•
•
•
•
Originally Posted by MidiMagic View Post
So how do you make it use scrollbars instead of dropping a div down?
Wrap all the floating divs inside a really wide div. That should give you a horizontal scrollbar.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC