tags:

views:

958

answers:

5
Q: 

Body Margin:0, Div Width:100% problem in FF and Chrome, fine in IE

Hey People,

I'm starting to pull my hair out of my head...

I have the following:

<html>
<head>
<style>
    body { margin:0 auto; }
</style>
</head>
<body>
    <div style="border: solid 1px red; width: 100%;">test</div>
</body>
</html>

This works in IE producing a nice div, 100% width, no H scrollbar...

Now in Chrome and FF, it is 1px wider than the window, causing an H scrollbar...

Why is that? What SHOULD I be using instead?

Thanks a lot! Albert

EDIT:

I added div { margin: 0; } to the head and removed the width: 100% and it worked, thanks.

A: 

You forgot to disable the div's margin.

Scavenger  2010-03-31 11:19:39
A: 

replace the width:100% by margin:0px

Mironline  2010-03-31 11:23:04
+1  A: 

As scavenger already pointed out. The margin of the div ist the problem. Reset everything with this command:

<style>
  * { margin:0; }
</style>

For more information I recommend you to read this article by Eric Meyer about reseting the CSS in all browsers to the same default values.

Raffael Luthiger  2010-03-31 11:27:17
+2  A: 

The border is sitting outside of the width, so you get 100% + 2px. Just drop the width property – a div is per default 100% wide.

toscho  2010-03-31 11:35:55
A: 

I still had issues with this, in the end, I added a style="zoom: 1;" to the divs

<div style="zoom: 1;">
    <div style="zoom: 1;">
        <table style="width: 100%"...
        ...
        </table>
    </div>
</div>

http://stackoverflow.com/questions/139000/div-with-overflowauto-and-a-100-wide-table-problem

Albert  2010-03-31 12:45:46

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?