CODEWITHSUNDEEP
csshtml
Vladimir
Vladimir

Reputation: 1694

CSS, aligning HTML header content with navigation bar

i have a header that has one div and two spans inside it:

<header class="page_header">

            <div id="title">Some title</div>    
            <span id="user">User: <i>${username }</i></span>
            <span id="search"/><input type="text"><input type="submit" value="Search"/></span>

CSS styling for header content is:

.page_header {
    padding: 30px;
    margin: 10px;
    width: 940px;
}
.page_header #user {
    float: left;
    margin: 0;
}
.page_header #title {
    text-align: center;
    font-size: 24px;
}
.page_header #search {
    float: right;
    text-align: right;
}

Underneat the header is navigation bar. The problem i am having is that my header content is shifted to the right side a little, comparing to navigation bar, and i cant find a way how to fix this. You can see HTML and CSS code here: http://jsfiddle.net/vvozar/QU542/1/

Appreciate any help or advice.

Upvotes: 1

Views: 994

Answers (2)

Danield
Danield

Reputation: 125433

Add box-sizing: border-box to your .page_header class.

FIDDLE

.page_header {
    padding: 30px;
    margin: 10px 0;
    width: 940px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Upvotes: 2

brian
brian

Reputation: 2775

In page_header, you need to either (in order of technical preference)

  • Remove the width and let it auto size, or
  • Set the width to 880px to account for the 60px of padding around the inside or
  • Remove the padding and leave the width as 940px.

Your body is also fixed to 940px and technically the inside of page_header only has 880px to work with, so, 940px pushed it outside of its limits, or, in this case, out the right side of the div.

Upvotes: 1

Related Questions