Divs not flush-right

[Cherubae]

I have a set of 3 divs that are situated horizontally across the page. The problem is even though the width is set to be 100%, there's still a gap along the right side where the divs abruptly stop. The gap is in the same spot as where the scroll bar would normally be, but the page doesn't have enough height to it for scrolling :confused:

I'm using...

#top {border:1px solid red; margin: 0; padding:0; width:100%; height:100px;
top:0; left:0; overflow:hidden; position:absolute;}
#bottom {border:1px solid blue; margin:0; padding:0; width:100%; height:100px;
top:420px; left:0px; overflow:hidden; position:absolute;}
#middle {border:1px solid green; margin:0; padding:0; width:100%; height:320px;
top:100px; left:0; overflow:hidden; position:absolute;}


I would really like to have the div's strech to fit 100% of the window width, but they seem to think otherwise :D suggestions would be welcomed.


- C

[meow]

body { margin: 0; padding: 0 }

[Cherubae]

That sort of helps :D thanks. Now the div's are going 101% of the screen, which adds a horizontal scroll bar too.

Oh those divs are being so stubborn!

So I must of missed something else again (semicolon, colon, etc.) but I just can't see it. Here's the code I'm using now:

#top {border:1px solid red; margin: 0; padding:0; width:100%; height:100px;
top:0px; left:0px; overflow:hidden; position:absolute;}
#bottom {border:1px solid blue; margin:0; padding:0; width:100%; height:100px;
top:420px; left:0px; overflow:hidden; position:absolute;}
#middle {border:1px solid green; margin:0; padding:0; width:100%; height:320px;
top:100px; left:0px; overflow:hidden; position:absolute;}
body {background-color:#99CCFF; background-image:none;
font-family: verdana, sans-serif; color:#000000; font-size:12px;
z-index:1; padding:0; margin:0;
}


.. and here's the test page:

http://www.fogu.com/hm4/text.htm

Anything else I could be missing?


- C

[meow]

I'm not sure what you try to do but from the look of it it could be as simple as this. Sorry, if I misunderstand. :o

body { margin: 0; padding: 0 }

#top,#middle,#bottom
{ border: 1px solid }
#top { height:100px; border-color: red }
#middle { height:320px; border-color: green }
#bottom { height:100px; border-color: blue }

[cg9com]

meow, the demo page shows it was done correct.

you could try eliminating margin and padding in the html element also, although in my experiences with IE6, when i remove margin and padding from either or, i get some stretched out divisions as well :rolleyes:

also why do you have position:absolute; in there?
and just to clarify, are you trying to get the divs beside eachother?

[meow]

No, the demo page shows the problem Cherubae says he has (not in IE of course). The page is wider than 100% because of the borders + 100% width on the DIVs.

My point is that without the positioning no width is needed either. The DIVs will stretch to the full width of the page if they are left alone.

[Cherubae]

I just threw those positions in there but they aren't needed :o I've taken them out now. Yes, I'm trying to have the 3 divs layed out in that way; I'm trying to avoid using tables for layout; I've got another bunch of divs that have to go into the middle too, but I've saving those for a later challenge.

After doing some dink'n around, it turns out that extra 1% of width came from the fact that I had a border:1px set in the divs. When I switched the 1 to a 0 (and eventually removed the border: style), the divs stretched out the full width of the screen. My test dots (. . . . . ) went all the way to the end and then wrapped properly. Adding in background-color to the divs also showed they did stretch all the way to the window's border.

*shrug* :thumbsup: thanks for all your help. Now I just need to get rid of the scrollbar track...


- C

[meow]

Cherubae, you can have your borders. Take all the 'width: 100%' away instead. The code I posted above is all that's needed if you don't position the DIVs. ;)

[Cherubae]

Thanks but I don't want the borders :o They were just there so I could see where the divs where going

[meow]

http://forums.yupapa.com/images/smiles/eek2.gif :p