div/CSS question regarding width and padding

Question

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.

Mg. · Accepted Answer · 2008-12-16 18:47:23Z

4

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

answered Dec 16, 2008 at 18:47

Mg.

1,4772 gold badges16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christopher Garcia Over a year ago

That did it, didn't think about the fact that the div would take up the entire line. Thanks!

fasih.rana · Accepted Answer · 2008-12-16 18:51:10Z

Try the div header with this.

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

jishi · Accepted Answer · 2008-12-16 18:52:07Z

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; }

Peter DeWeese · Accepted Answer · 2012-07-23 14:15:51Z

0

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

edited Jul 23, 2012 at 14:15

Peter DeWeese

18.4k8 gold badges83 silver badges104 bronze badges

answered Dec 16, 2008 at 18:42

tafkaks

Collectives™ on Stack Overflow

div/CSS question regarding width and padding

4 Answers 4

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Related