Simple problem I guess, but I can't seem to figure out why.
I'm using two seperate div's to split a page (one naviagational, one content)
This is my CSS
/* CSS Document */
body
{
background-color: #000;
color: #FFF
}
div#alpha
{
float: left;
width: 10%;
height: 100%;
margin: 0;
border-top: none;
border-right: 2px solid #333;
border-bottom: 2px solid #333
}
div#beta
{
float: left;
width: 80%;
height: 100%;
margin: 0;
text-align: center
}
See the widths on them, 10% and 80%, this makes the text center as it should be, but if I ajust it to fit 100%, it uncenters. Example.
/* CSS Document */
body
{
background-color: #000;
color: #FFF
}
div#alpha
{
float: left;
width: 10%;
height: 100%;
margin: 0;
border-top: none;
border-right: 2px solid #333;
border-bottom: 2px solid #333
}
div#beta
{
float: left;
width: 90%;
height: 100%;
margin: 0;
text-align: center
}
Now the total width is equal to 100%, but the text in beta class is uncentered. Any ideas to what is causing this?Dave Shea: Sometimes rounding errors will cause something like 50% + 50% to add up to 100.1%, which ends up breaking layouts in some browsers. Try bumping down the 50% to 49%, or even 49.9%.just try to remove the float from the div beta
div#beta
{
width: 90%;
height: 100%;
margin: 0;
text-align: center
}
------------------------
or
------------------------
.alpha
{
float: left;
width: 10%;
height: 100%;
margin: 0;
border-top: none;
border-right: 2px solid #333;
border-bottom: 2px solid #333
}
.beta
{
width: 90%;
height: 100%;
margin: 0;
text-align: center
}
and call beta class in the div
I'm using two seperate div's to split a page (one naviagational, one content)
This is my CSS
/* CSS Document */
body
{
background-color: #000;
color: #FFF
}
div#alpha
{
float: left;
width: 10%;
height: 100%;
margin: 0;
border-top: none;
border-right: 2px solid #333;
border-bottom: 2px solid #333
}
div#beta
{
float: left;
width: 80%;
height: 100%;
margin: 0;
text-align: center
}
See the widths on them, 10% and 80%, this makes the text center as it should be, but if I ajust it to fit 100%, it uncenters. Example.
/* CSS Document */
body
{
background-color: #000;
color: #FFF
}
div#alpha
{
float: left;
width: 10%;
height: 100%;
margin: 0;
border-top: none;
border-right: 2px solid #333;
border-bottom: 2px solid #333
}
div#beta
{
float: left;
width: 90%;
height: 100%;
margin: 0;
text-align: center
}
Now the total width is equal to 100%, but the text in beta class is uncentered. Any ideas to what is causing this?Dave Shea: Sometimes rounding errors will cause something like 50% + 50% to add up to 100.1%, which ends up breaking layouts in some browsers. Try bumping down the 50% to 49%, or even 49.9%.just try to remove the float from the div beta
div#beta
{
width: 90%;
height: 100%;
margin: 0;
text-align: center
}
------------------------
or
------------------------
.alpha
{
float: left;
width: 10%;
height: 100%;
margin: 0;
border-top: none;
border-right: 2px solid #333;
border-bottom: 2px solid #333
}
.beta
{
width: 90%;
height: 100%;
margin: 0;
text-align: center
}
and call beta class in the div