div/CSS question regarding width and padding

Question

Hi all -

I'm having some trouble with this code:

CSS:

div#header
{
    width: 100%;
    background-color: #252525;
    padding: 10px 0px 10px 15px;
    position: relative;
}

div#login
{
    float: right;
    position: absolute;
    right: 10px;
    top: 5px;
}

HTML:

<div id="header">
    <img src="./img/logo.jpg" />
    <div id="login">
        <form id="header-login" action="#">
            <input type="text" /> <input type="text" /> <input type="submit" value="LOGIN" />
        </form>
    </div>
</div>

The div id=header tag has a left padding of 15px. Because of this, the div itself stretches the width of the page, plus an extra 15px to the right, causing me to have a horizontal scrollbar. I've tried putting the header div inside a container div, with relative positioning, but the padding caused the header div to just overflow 15px over the container, still leaving me with the sidebar. Can someone help me with a better understanding? Thanks.

Answer 1

would 'overflow:hidden' on a properly sized container div work?

Answer 2

Try removing the 100% width of the header. Since divs are line elements, thats not needed.

Answer 3

Try the div header with this.

div#header { width: 100%; height:15px; background-color: #252525; padding: 10px 0px 10px; position: relative; }

Answer 4

I'm not really sure what you're trying to accomplish: but here's a starter:

block elements (like a div, for instance) always expand to the width of your container, unless you're using quirks mode in IE.

there is no point in using position absolute and float right on the same element. use margin to get the appropriate distances. A floated element do need some sizes, a width for instance.

If you want to floated element to be "at top", it need to be specified first in it's parent element. Meaning, put the div before the img.

div#header { 
   background-color: #252525; 
   padding: 10px 0px 10px 15px; 
}

div#login { 
   width: 100px; /* use preferred size here. */
   float: right; 
   margin-right: 10px; 
   margin-top: 5px; 
}