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!
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style = "text/css">
.bodywrapper {width:80%;margin-left:auto;margin-right:auto;}
.wrapperleft {width:15%; float:left;}
.wrappermiddle {width:70%; float:left;}
.wrapperright {width:15%; float:right;}
.divleft {margin:3px; padding:3px; border:1px solid red;}
.divmiddle {margin:3px; padding:3px; border:1px solid green;}
.divright {margin:3px; padding:3px; border:1px solid blue;}
</style>
</head>
<body>
<!-- 3 cols div's. All divs touch, total width: 100% -->
<div class="wrapperleft" style="background-color:red">some text</div>
<div class="wrappermiddle" style="background-color:green;">more text</div>
<div class="wrapperright" style="background-color:blue;">and more</div>
<br/><br/>
<!-- 3 cols div's inside wrappers. Divs don't touch, total width: 100% -->
<div class="wrapperleft"><div class="divleft">some text</div></div>
<div class="wrappermiddle"><div class="divmiddle">more text</div></div>
<div class="wrapperright"><div class="divright">and more</div></div>
<br/><br/>
<!-- 3 cols div's inside wrappers. Divs don't touch, total width: width off bodywrapper (80%) -->
<div class="bodywrapper">
<div class="wrapperleft"><div class="divleft">some text</div></div>
<div class="wrappermiddle"><div class="divmiddle">more text</div></div>
<div class="wrapperright"><div class="divright">and more</div></div>
</div>
</body>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
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type = "text/css">
.bodywrapper {width:80%;margin-left:auto;margin-right:auto;}
.wrapperleft {width:15%; float:left;}
.wrappermiddle {width:600px; margin-left:auto; margin-right:auto;}
.wrapperright {width:15%; float:right;}
.divleft {margin:3px; padding:3px; border:1px solid red;}
.divmiddle {margin:3px; padding:3px; border:1px solid green;}
.divright {margin:3px; padding:3px; border:1px solid blue;}
</style>
</head>
<body>
<!-- 3 cols div's. All divs touch, total width: 100% -->
<div class="wrapperleft" style="background-color:red">some text</div>
<div class="wrapperright" style="background-color:blue;">and more</div>
<div class="wrappermiddle" style="background-color:green;">more text</div>
<br/><br/>
<!-- 3 cols div's inside wrappers. Divs don't touch, total width: 100% -->
<div class="wrapperleft"><div class="divleft">some text</div></div>
<div class="wrapperright"><div class="divright">and more</div></div>
<div class="wrappermiddle"><div class="divmiddle">more text</div></div>
<br/><br/>
<!-- 3 cols div's inside wrappers. Divs don't touch, total width: width off bodywrapper (80%) -->
<div class="bodywrapper">
<div style="width:200px; float:left;"><div class="divleft">some text</div></div>
<div style="width:200px; float:right;"><div class="divright">and more</div></div>
<div class="wrappermiddle"><div class="divmiddle">more text</div></div>
</div>
</body>
</html>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.
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.
So how do you make it use scrollbars instead of dropping a div down?
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.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.