Created Div Standard of 3 columns with CSS - html

Question

I am new website designer. i would like to create website which is separated in 3 columns, when i zoom out my website with Firefox and Chrome it doesn't has any problems; however, when i zoom out with Safari it has some whitespace between right div and middle. please help me to fix it.
my css script as below:
div#left{
float: left;
width: 205px;
max-width:205px;
background-color:#999;
height:200px;
}
div#middle{
float:left;
max-width:555px;
width: 555px;
background-color:#366;
}
div#right{
float: right;
width: 200px;
max-width:200px;
background-color:#F00;
height:200px;
}
div#content{
width: 960px;
margin-top: 0 auto;
white-space:nowrap;
}
My HTML
<div id="content">
<div id="left">
Test
</div>
<div id="middle">
Middle
</div>
<!--white space here when zoom out in safari-->
<div id="right">Right</div>
</div>
How to fixed with safari ?

Answer 1

because the width of the browser has increased your middle is floating left and your right is floating right which cause a white space in the middle.. try making your right float left also
div#right{
float: left;
width: 200px;
max-width:200px;
background-color:#F00;
height:200px;
}
but this will leave you a white space on the right side.
you can fix this by making your left middle and right in percent. so that it would adopt the length of its parent.
div#left{
float: left;
width: 25%;
background-color:#F00;
height:200px;
}
div#middle{
float: left;
width: 50%;
background-color:#F00;
height:200px;
}
div#right{
float: left;
width: 25%;
background-color:#F00;
height:200px;
}

Answer 2

Add float:left to right div and correct the classes names.
DEMO
HTML
<div id="hcontent">
<div id="hleft">Test</div>
<div id="middle">Middle</div>
<!--white space here when zoom out in safari-->
<div id="right">Right</div>
</div>
CSS
div#hcontent {
margin: 0 auto;
width:960px;
}
div#hleft {
float: left;
width: 205px;
max-width:205px;
background-color:#999;
height:200px;
}
div#middle {
float:left;
max-width:555px;
width: 555px;
background-color:#366;
}
div#right {
float: left;
width: 200px;
max-width:200px;
background-color:#F00;
height:200px;
}

Answer 3

DEMO with width px
DEMO with width %
Your "content" div is not appeared to be in your HTML. If you mean that hcontent == content, then there is a problem with your width. You have width set to 100% to the parent "hcontent" block, and child div's just positioned with float and have width set in px. You need to change your hcontent style to fixed width in px, or change your child div's to width in percent.
You can try something like this:
div#left{
float: left;
width: 205px;
max-width:205px;
background-color:#999;
height:200px;
}
div#middle{
float:left;
max-width:555px;
width: 555px;
background-color:#366;
}
div#right{
float: right;
width: 200px;
max-width:200px;
background-color:#F00;
height:200px;
}
div#content{
width: 960px;
margin: auto;
white-space:nowrap;
}
As you can see I've just changed your content width and margin to "auto" so it would be always positioned at the center.
Either way:
div#left{
float: left;
width: 30%;
background-color:#999;
height:200px;
}
div#middle{
float:left;
width:40%;
background-color:#366;
}
div#right{
float: right;
width: 30%;
background-color:#F00;
height:200px;
}
div#content{
width: 100%;
margin: auto;
white-space:nowrap;
}
Note that I've changed all of your div width to percent value.

Answer 4

I did this for you. It may help.
Santy beat me to it. Basically the same thing but with a .clearfix class added to get rid of any other extra whitespace which might appear because of the floating elements.
I'd recommend moving away from pixel units. Try experimenting percentages or something scalable like rem or em units.
HTML
<div id="content">
<div id="left">Left</div>
<div id="middle">Middle</div>
<!--white space here when zoom out in safari-->
<div id="right">Right</div>
<div class="clearfix"></div>
</div>
CSS
#content{
width: 900px;
margin: 0 auto;
white-space:nowrap;
}
#left{
float: left;
width: 200px;
min-height:200px;
background-color:#999;
}
#middle{
float:left;
width: 500px;
min-height: 200px;
background-color:#366;
}
#right{
float: left;
width: 200px;
min-height: 200px;
background-color:#F00;
}
.clearfix{
clear: both;
}
JSFiddle
http://jsfiddle.net/LVLMz/

Answer 5

Use percentage for the widths (20%, 60%, 20%).
div#left{
float: left;
width: 20%;
background-color:#999;
height:200px;
}
div#middle{
float:left;
width: 60%;
background-color:#366;
}
div#right{
float: right;
width: 20%;
background-color:#F00;
height:200px;
}
Fiddle

Answer 6

here it is [tested]
just changed hleft => left and hcontent => content
<style>
div#left{
float: left;
width: 205px;
background-color:#999;
height:200px;
}
div#middle{
float:left;
width: 555px;
background-color:#366;
}
div#right{
float: left;
width: 200px;
background-color:#F00;
height:200px;
}
div#content{
width: 960px;
margin: 0 auto;
white-space:nowrap;
}
</style>
<div id="content">
<div id="left">
Test
</div>
<div id="middle">
Middle
</div>
<!--white space here when zoom out in safari-->
<div id="right">Right</div>
</div>

Answer 7

<div id="hleft"> &amp <div id="hcontent">
should be:
<div id="left"> &amp <div id="content">