CSS / HTML Help

[lifebynate13]

I'm Designing a site and I used width:100%; to Make the header Span the whole top of the page as was desired but now its overflowing and creating a scrollbar to the side which is undesired. How can i fix but keep it spanning 100%?

The url is Lifebynate.pcriot.com

[techairlines]

The width:100% doesn't seem to necessary in div.head. You already specified that for the div.construction.

[lifebynate13]

div.Construction is simply a notice that is going to be removed after its done

[essellar]

100% is the width of the content. Onto that, you have added a border and some padding, so the actual width of the box is 100% plus 4px for the borders plus 15px for the left-side padding. Just leave the 100% out of the deal, and any standards-compliant browser will do what it's supposed to do -- assume that the block-level element spans its entire container. It's only when you specify a width that it should act differently.

[lifebynate13]

Thanks Guys.
I wanted to keep at least the bottom border so i replaced border with border-bottom and I nixed padding-left and it did the trick. If i feel the title needs to be moved over a little bit I'll use a Nbsp or two. Thanks for the Help!

[misson]

If i feel the title needs to be moved over a little bit I'll use a Nbsp or two.

Bad idea. Don't add meaningless content to affect layout; use styling. Drop the "width: 100%" (as essellar suggests) and you can use padding. Also, use a heading element rather than a division for the heading. Headings are semantic, while divisions aren't.

[friendsplice83]

Use...

<div style="position:absolute; left: 0px; right: 0px;">

Content.

</div>

... to make content stretch across the whole page. You can customize the background, borders, etc.

Check out w3schools.com

[leafypiggy]

Use...



Content.




... to make content stretch across the whole page. You can customize the background, borders, etc.

Check out w3schools.com

Bad idea. W3schools is outdated...

Misson is correct in this, but also remember this:

Real measure = size + padding + margin. It doesn't matter if you tell an element to be "100%", since that is a relative figure, it will simply expand to fill the content given.

[essellar]

Actually, real measure = content + padding + border + margin (forgetting the border will bite you every time).

Good news, though -- CSS3 will probably allow us to get back to the intuitive border-box model (where the height and width denote the external dimensions of the content box plus the padding plus the border) if we want using

box-sizing: border-box;

That's the way it should have been in the first place. No, MS didn't "do it wrong", they invented CSS. Netscape wanted to use JavaScript Style Sheets. Netscape lost, but they were influential enough to make sure that the CSS standard RFC didn't exactly match what Microsoft was doing. The content-box model has always been a disaster from a design/layout perspective, but it was easier to implement in the JSS-to-CSS translation layer in NSN 4.x since it cut down on the recursion. NS never did get CSS support right in Navigator 4.x (their recursion reluctance meant that a style for TABLE didn't apply to a TABLE in a DIV) but they did manage to screw up the standard AND get everybody cursing MS at the same time.

[misson]

Neither model is unconditionally wrong; they both have their place, depending on whether you're fitting stuff around content (NS's model), or content inside something else (IE's model); I've come across both situations. I'm just glad we will finally have a choice.