Question

My css looks like this

* {
     margin: 0;
     padding: 0;
}
body {
    background-color: #FFFFFF;
}
div#header {
    background-color: #969696;
    height: 80px;
}
div#mid-bar {
    background: url(images/home.jpg) left no-repeat #6f6565;
    height: 200px;
}

#searchbox {
    background-color: #c1c1c1;
    width: 200px;
    height: 180px;
    margin: 10px 20px 10px 350px;
}

and my html

    <div id="header">

    </div>
    <div id="mid-bar">
        <div id="searchbox">

        </div>
    </div>

you can see the problem. the space between header and mid-bar which is created due to the margin given in the searchbox div.
i want this margin for searchbox within the mid-bar div… and not from header div.

Answer 1

I’s a known bug: would use padding instead of margin. so:

div#mid-bar {
    background: url(images/home.jpg) left no-repeat #6f6565;
    height: 200px;
padding-top: 10px;
}


#searchbox {
    background-color: #c1c1c1;
    width: 200px;
    height: 180px;
    margin: 0px 20px 10px 350px;
}