here is the live link
I have horizontal scrollbar which doesn't really makes sense. Does anyone know how to get rid of it?
+1
A:
Make your content fit in the window.
or
<body scroll="no" style="overflow: hidden">
jimplode
2010-10-04 13:53:24
+10
A:
Remove width:100% from your three main elements.
By adding width: 100%, you force the client area of each element to fill the browser.
Since the elements' borders add an additional pixel on each side, you end up with a scrollbar.
SLaks
2010-10-04 13:53:52
by default, divs being block level elements will fill 100% of the space they can (horizontally) so you never really need to specify width 100%
jimplode
2010-10-04 14:13:03
+1
A:
It is your 1px border. You have set the main elements widths to 100% then added a 1px border around the objects
Paul Hadfield
2010-10-04 13:56:10
It's things like this that I've always found annoying in CSS that it doesn't allow you to specify expressions like "100%-4px".
Spudley
2010-10-04 13:58:57
+1
A:
Hello!
The #top-wrapper element has 100% width and 1px border (left and right) that sums to a total of 100% + 2px (2px more that there is available) so a scroll-bar appears. The recommended solution (not a workaround!) is not to add width:100%; for elements that you want to occupy the whole width of their respective parents, but let the browser take care of that.
Floating boxes are an exception to this recommendation and they need to be handled differently. For more information you can look here http://www.w3.org/TR/CSS2/box.html
Hope this answers your question, Alin
Alin Purcaru
2010-10-04 14:07:16