HTML div is ignoring div for margin-bottom
Question
This is kinda confusing to explain but I'll give it a shot. Basically, I have 3 'main' divs on one page. The first is the navbar, the second is a search box and the third is a content box.
I want them to be one under the other, so navbar > search box > content box. The problem I have is that when I set margin-top: 10px; to the content box it goes directly underneath the navigation bar and not the search box. It seems to be ignoring the search box and I can't for the life of work out why. I'm pretty new to all this so please bear with me if this is a newbie mistake.
Thank you!
<body>
<div id="navbar">
<img class="navbar" src="images/homebutton.png" />
<img class="navbar" src="images/e-3button.png" />
<img class="navbar" src="images/resignedbutton.png" />
<img class="navbar" src="images/firedbutton.png" />
<img class="navbar" src="images/desertersbutton.png" />
<img class="navbar" src="images/mosrosterbutton.png" />
<img src="images/divider.png" />
<p><script language="JavaScript">dT();</script></p>
</div>
<div id="search">
<img src="images/logo.png" />
<b><p>Search</p></b>
<form action="" id="search_habbo">
<input type="text" name="habbo_name" id="habbo_name" size="30" required>
<br>
<input type="submit" value="Search" name="send" id="send">
</form>
<div id="search_results">
<div id="loadingimage">
<img src="images/ajax-loader.gif" />
</div>
</div>
</div>
<div id="content">
</div>
</body>
#navbar {
background: url(images/navbarbg.png);
width: 100%;
height: 55px;
line-height: 20px;
margin: 0;
white-space: nowrap;
display: inline-block;
}
#search {
display: block;
width: 920px;
height: auto;
background: #fff;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 5px;
position: absolute;
top: 65px;
left: 50%;
margin-left: -462px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
-moz-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
-webkit-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
box-shadow:0px 0px 2px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
}
#content {
width: 920px;
height: auto;
margin-top: 10px;
background: #fff;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 5px;
position: absolute;
left: 50%;
margin-left: -462px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
-moz-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
-webkit-box-shadow:0px 0px 1px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
box-shadow:0px 0px 2px 1px rgba(50, 50, 50, 0.75), inset 0 -5px 5px -5px #000000;
}
3 answers
solution1
3 2013-12-15 21:57:14
it's ignoring the search box because you have this for #content
postion: absolute;
change it to
position: relative;
or add something like
top: 40px;
solution2
1 2013-12-15 22:04:43
If you just want them one on top of the other, then delete these lines of code:
#search
position: absolute;
top: 65px;
left: 50%;
#content
position: absolute;
left: 50%;
Also, why these:
margin-left: -462px;
Delete those too
solution3
0 2013-12-15 22:29:51
Indeed, absolute positioning is the problem - I tend to avoid it for all general positioning.
Take a look at this link, it has some really handy examples for positioning boxes - I still make reference to it.
https://developer.mozilla.org/samples/cssref/css-positioning.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.