Question

<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;
}

Answer 1

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