CODEWITHSUNDEEP
htmlcssxhtml
oshirowanen
oshirowanen

Reputation: 15965

CSS Margin Problem

EDIT: my question was not clear, so this is just to clarify.

20px left margin moves the div a total of 20px, but the input control seems to move a total of 40px.

ORIGINAL QUESTION:

The following script is the whole script, I have no other script/style attached to the script below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Page</title>
    </head>
    <body>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
            <input type="text"/>
        </div>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
            <input type="text" />
        </div>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
            <input type="text" />
        </div>
    </body>
</html>

For some reason, when I add 20px margin to the left of any of those div tags, for some reason, it not only moves all the divs 20px to the right, but it also moves the input field within the div tags 20px to the right within the div tag.

For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Page</title>
    </head>
    <body>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 20px;border:1px black solid;">
            <input type="text"/>
        </div>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
            <input type="text" />
        </div>
        <div style="float:left;width:300px;height:400px;margin:0px 0px 0px 0px;border:1px black solid;">
            <input type="text" />
        </div>
    </body>
</html>

Why is that happening?

I am testing in internet explorer 8 using internet explorer 7 mode. I have tested it in internet explorer 8, using standard internet explorer 8 mode, and it works perfectly.

Upvotes: 0

Views: 898

Answers (2)

user527892
user527892

Reputation:

This looks like a weird manifestation of the double float margin bug. Putting display: inline within your style attribute of your first div will stop the doubling of the margins in older versions of IE.

However, as others have said, I'd create classes. It keeps things tidier.

Upvotes: 3

coreyward
coreyward

Reputation: 80140

You don't seem to be understanding how margins work. When you add a left-margin to a text document (like in MS Word), you shift the contents of the paper to the right by the margin, thus spacing it away from the edge of the page.

When you add a left-margin to an element in CSS, you do the same basic thing. You're telling the browser to make sure it has n space from the block-level element to the left, whether that is the edge of the page or another div. All of the contents of the element you added the margin on retain their position relative to their parent; in your case that means that the input moves when the div moves.

Also, it might just be a transcription problem, but you added 20px margins on the bottom of the first div, not to the left like you mentioned.

Upvotes: 2

Related Questions