CODEWITHSUNDEEP
htmlcss
slandau
slandau

Reputation: 24052

Not able to apply margin to div

<input type="text" id="title" />
<input type="button" id="save_post" class="button" value="Submit" />
<div id="map" style="margin-top:10px;"></div>

For some reason there is no margin in the rendered page.

The first input is directly to the left of the second input, and the div is directly under both, with no spacing in between.

I've also tried placing <br /> tags but that didn't work either.

What am I doing wrong?

CSS

.button {
    width: 80px;
    height: 34px;
    border: none;
    background: #673491;
    color: #fff;
    float: left;
}

#title {
    height: 30px;
    width: 276px;
    border: 1px solid #cbcbcb;
    background: #fff;
    text-indent: 10px;
    color: #999999;
    float: left;
}

#left {
    width: 360px;
    float: left;
    margin-right: 7px;
    padding-top: 24px;
}

#content {
    width: 800px;
    margin: 0 auto;
    text-align: left;
}

body {
    background: #f2f2f2;
    text-align: center;
    color: #999999;
    font-family: arial, verdana;
    font-size: 13px;
    margin: 0;
    padding: 0;
}

Upvotes: 0

Views: 190

Answers (3)

German Attanasio
German Attanasio

Reputation: 23663

Check in your CSS code to see if there is a rule like:

#map { ...}

Or try with:

<div id="map" style="margin-top:10px !important;"></div>

Upvotes: 0

Stevanicus
Stevanicus

Reputation: 7761

Try putting the two inputs in the a div of their own with no styling.

If you are using firefox get the extension firebug as it shows you padding and margins etc. Very, very handy tool!

If all else fails. Try a div between the inputs and your div 'map' and put style="clear:both;" also try padding-top instead

Upvotes: 1

Valamas
Valamas

Reputation: 24729

The above code works for me. Try finding another style which is overriding your margin. Or place !important 

<div id="map" style="margin-top:10px !important;"></div>

Upvotes: 0

Related Questions