943,771 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Floating problems
Ad:
Permalink
Mar 4th, 2009
0

Floating problems

Expand 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!
Similar Threads
Reputation Points: 10
Solved Threads: 3
Junior Poster in Training
alimoe is offline Offline
82 posts
since Jun 2008
Permalink
Mar 5th, 2009
0

Re: Floating problems

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.
Reputation Points: 34
Solved Threads: 52
Posting Whiz
colweb is offline Offline
316 posts
since Nov 2007
Permalink
Mar 5th, 2009
0

Re: Floating problems

Click to Expand / Collapse  Quote originally posted by alimoe ...
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
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Mar 5th, 2009
0

Re: Floating problems

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>
Reputation Points: 34
Solved Threads: 52
Posting Whiz
colweb is offline Offline
316 posts
since Nov 2007
Permalink
Mar 5th, 2009
0

Re: Floating problems

Quote ...
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.
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Mar 6th, 2009
0

Re: Floating problems

Click to Expand / Collapse  Quote originally posted by almostbob ...
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.
Reputation Points: 34
Solved Threads: 52
Posting Whiz
colweb is offline Offline
316 posts
since Nov 2007
Permalink
Mar 9th, 2009
0

Re: Floating problems

So how do you make it use scrollbars instead of dropping a div down?
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Permalink
Mar 11th, 2009
0

Re: Floating problems

Click to Expand / Collapse  Quote originally posted by MidiMagic ...
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.
Reputation Points: 34
Solved Threads: 52
Posting Whiz
colweb is offline Offline
316 posts
since Nov 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Open source for video tutorial
Next Thread in HTML and CSS Forum Timeline: View page from bottom?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC