CSS not floating right...

Printable View

Oct 23, 2003, 09:24
trigger

CSS not floating right...

I got a element called middlebox, the css is

Quote:

#middlebox{
width: 100%;
position: relative;
border-top-width: thin;
border-top-style: solid;
border-top-color: #CCCCCC;
height: auto;
}

and there are three elements in there, left container, center container, and right container. The css is

Quote:

#leftcontainer{
background: #E9D611;
margin: 0 auto;
padding: 0 0 0;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
position: relative;
width: 13%;
border-right-width: 0.25em;
border-right-style: solid;
border-right-color: #CCCCCC;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
border-top-width: thin;
border-top-style: solid;
border-top-color: #FFFFFF;
left: 0;
float: left;
height: 100%;
overflow: hidden;
}
#centercontainer{
position: relative;
width: 70%;
left: 15%;
}
#rightcontainer{
position: relative;
width: 13%;
border-bottom-width: thin;
border-left-width: thin;
border-bottom-style: dashed;
border-left-style: dashed;
border-bottom-color: #002196;
border-left-color: #002196;
float: right;
height: 100%;
top: 0%;
padding-bottom: 0.5em;
display: block;
}

The containers aren't showing up in horizontal line, what's up? Is it borders or margins or something? In Firebird/Mozilla its fine, but in Opera and IE the right container wraps to another line, and shows below.
Oct 23, 2003, 10:01
Paul O'B

Hi,

Are you putting the floats first in the html.
e.g.

Code:

<div id="middlebox"> <div id="leftcontainer">left</div> <div id="rightcontainer">right</div> <div id="centercontainer">centre</div> </div>

(This is not causing you any problems as you have used no values but be careful when you use top and left as it doesn't apply to floats. Use margin-top etc when referring to floats. Otherwise if the float has a position relative statement then the float stops becoming a float and becomes a positioned element.)

Paul
Oct 23, 2003, 10:12
trigger

no I'm not, so I should look at elements above it in the html, and see if there is anything with top or left attributes? If the middlebox has a clear: both; attribute it doesn't seem to fix it either, which doesn't make sense. I wish I could just apply percentage values to borders....
Oct 23, 2003, 10:26
Paul O'B

Hi,

I got the above code to display ok. I just copied it from above and used the html I posted. There were three boxes along the top all on one line ok.

Are you using a full doctype?

If you want it exact you will need to put padding and borders on an inner element so that you make up your 100% etc. (Remember that IE also has a rounding bug that if you add elements up to make 100% IE may round them higher. (Just try two floats at 50% and then resize the screen in IE to see the effect.))

Paul
Oct 23, 2003, 11:22
trigger

I'm using the

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

doctype. Should I be using the strict doctype? My css is http://www.nasi.com/test/style.css and my page is http://www.nasi.com/test.htm. I just can't get my finger on it!
Oct 23, 2003, 13:50
Paul O'B

Hi,

I've only had a quick look at your page. Are you talking about the rightcontainer that has the letters PDFS in it. It appears on the right hand side but jumps up and down a line as the browsers is resized smaller. You need to set the width smaller as I think you are experiencing the rounding bug I spoke of earlier.

e.g.

Code:

#rightcontainer{ position: relative; width: 14%; etc....

Also you are still working in quirks mode because you have left comment tags above the doctype. Ie6 assumes quirks mode if the doctype isn't the first line of the code. However, taking the comment line out will leave you with a few more things to fix, so it's up to you.

(In my previous post I wan't very clear about the floats. What I meant to say was make sure that your left and right floated items come before the content, however I don't think it applies to your code as you are using relative positioning for the content.)

Paul
Oct 23, 2003, 14:04
trigger

thanks, and some more thoughts

Thanks for the advice, especially on the IE quirks mode. I'll have to give that a try. What other problems do you anticipate once I get into Standards mode?

I noticed that even if I nest an absolute div within a relatively positioned one, it seems to mess up the relative positioning of my other divs in Mozilla. For example, my topbox contains a absolutely positioned div for my upper left logo, because if I didn't, the two menus on the right weren't floating right. Then in Mozilla, my bottombox div (relatively positioned) was at the top of the doc. Assigning bottom: 0; to that element seemed to fix it.

I'm still getting the nasty horizontal scrollbar in Mozilla, too. So if you have any idea what I'm doing wrong there, please tell me.

Thanks for your help, you really are a SitePoint Guru.
Oct 23, 2003, 14:19
Paul O'B

Hi,

Quote:

I'm still getting the nasty horizontal scrollbar in Mozilla, too. So if you have any idea what I'm doing wrong there, please tell me.

The reason for the scroll bars is that you have widths adding up to 100% but you also have padding and borders added. In the correct box model the padding and borders are added to the content which is why you get the scroll bar in Mozilla. In Ie6 you are still working in quirks mode which uses the broken box model and padding and borders are contained within the 100% width which means you don't get a scrollbar.

You may need to re-jig your code by applying borders and padding to the inner element and just declare the width on the outer element. Although this does sometimes make the code a little more complicated due to the extra nesting, but many times you have inner elements (such as <p>) etc that you can apply padding to anyway.

The best way to achieve consistency between your targetted browsers is to use a full doctype with uri (don't use the xml prologue either) and then test each element as you go in each browser. This way you will spot differences before you build on them and as you found out it can be tricky to accomodate them afterwards.

Hope some of this helps.

Paul
Oct 23, 2003, 14:47
trigger

you've helped me a lot! Thank you very much. Feel free to keep giving me suggestions on my css, and if you want, keep an eye, because I'll be adding stuff in daily now.That fixed a lot, and with the way I've structured my divs, it wasn't hard at all to eliminate the padding on the containing blocks. Thanks again, I really appreciate the help. I was close to going back to tables.