CODEWITHSUNDEEP
htmlcss
Guybrush
Guybrush

Reputation: 1611

CSS - Div does not stay separated from another div

I am a CSS newbie, maybe you laugh about my problem...

I have 2 main DIVs ("topinfo" and "navigat"), and I need them to stay separated, one after other, but for some reason they don't.

Running code on Fiddle: https://jsfiddle.net/7mgfrhq6/

Here is the HTML code:

<div id="topinfo">
  <div id="infowin">
    <div id="computer">
      <b>Computer:</b> 123456789012345 (192.168.560.000)
      <img src="http://i.imgur.com/Y1CJmSa.png" id="more"/>
    </div>
  </div>
  <div id="statbtn">
    <a href="stats.htm" target="_blank">
      <img src="http://i.imgur.com/rh4XEOQ.png" id="bstats">
    </a>
  </div>
</div>

<div class="navigat">
  <a href="" class="navbtn">&laquo; First</a>
  <a href="" class="navbtn">&laquo; Prior</a>
  <select class="navsel" onchange="self.location.href=options[selectedIndex].value">
    <option selected="selected">Page 001</option>
    <option value="pag002.htm">Page 002</option>
    <option value="pag003.htm">Page 003</option>
    <option value="pag004.htm">Page 004</option>
    <option value="pag005.htm">Page 005</option>
  </select>
  <a href="" class="navbtn">Next &raquo;</a>
  <a href="" class="navbtn">Last &raquo;</a>
</div>

Here is the CSS code:

#topinfo {
  width: 420px;
  margin: 16px auto 4px auto;
}
#topinfo #infowin {
  float: left;
  width: 380px;
  border: 1px dotted #292929;
  border-radius: 4px;
  background-color: #FFFFE8;
}
#topinfo #infowin #computer {
  padding: 6px;
  font-family: Verdana, Tahoma, Helvetica;
  font-size: 10pt;
  text-align: center;
}
#topinfo #statbtn {
  float: right;
  width:32px;
  height:32px;
  border: 0;
}

.navigat {
  width: 600px;
  margin: 18px auto 14px auto;
  font-family: Tahoma, Verdana, Helvetica;
  text-align: center;
}
.navigat a.navbtn {
  display: inline-block;
  width:70px;
  padding: 3px 3px 4px 3px;
  margin: 3px;
  font-size: 9pt;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  background-color: #1D63C8;
  border-radius: 10px;
  cursor: pointer;
}
.navigat select.navsel {
  display: inline-block;
  width:100px;
  padding:3px;
  margin: 3px;
  font-size: 9pt;
  line-height: 1;
  cursor: pointer;
}

Here is what I got:

enter image description here

And here is what I really need:

enter image description here

Thanks for any help!

Upvotes: 1

Views: 47

Answers (3)

Pbk1303
Pbk1303

Reputation: 3802

This happens because of your float, you can solve this by adding an empty div in between "topinfo" and "navigat" with clear:both

HTML:

<div id="topinfo">
  <div id="infowin">
    <div id="computer">
      <b>Computer:</b> 123456789012345 (192.168.560.000)
      <img src="http://i.imgur.com/Y1CJmSa.png" id="more"/>
    </div>
  </div>
  <div id="statbtn">
    <a href="stats.htm" target="_blank">
      <img src="http://i.imgur.com/rh4XEOQ.png" id="bstats">
    </a>
  </div>
</div>
<div class="clear"></div>
<div class="navigat">
  <a href="" class="navbtn">&laquo; First</a>
  <a href="" class="navbtn">&laquo; Prior</a>
  <select class="navsel" onchange="self.location.href=options[selectedIndex].value">
    <option selected="selected">Page 001</option>
    <option value="pag002.htm">Page 002</option>
    <option value="pag003.htm">Page 003</option>
    <option value="pag004.htm">Page 004</option>
    <option value="pag005.htm">Page 005</option>
  </select>
  <a href="" class="navbtn">Next &raquo;</a>
  <a href="" class="navbtn">Last &raquo;</a>
</div>

CSS:

.clear
{
clear:both;
}

DEMO

Upvotes: 0

Moid
Moid

Reputation: 1447

This is happending because of the floats that you are using to align the div of #topinfo.

What you can do is make the inside as display:inline-block. So this will be something like this..

#topinfo #infowin {
  display:inline-block
  width: 380px;
  border: 1px dotted #292929;
  border-radius: 4px;
  background-color: #FFFFE8;
}

#topinfo #statbtn {
  display:inline-block;
  width:32px;
  height:32px;
  border: 0;
  vertical-align: bottom;
}

If you want to use floats you can use clear:both on .navigat class.

Upvotes: 0

denmch
denmch

Reputation: 1516

You need to clear the floats above when you get to .navigat and then add a bit of padding to get the desired spacing.

.navigat {
  clear: both;
  padding-top: 18px;
}

Recommended reading: Chris Coyier, All About Floats

Upvotes: 1

Related Questions