why is this div below the other and not beside it?

Question

I'm looking to get the yellow div containing 'vending machines | distributors etc' positioned next to the logo (right of the logo). Not sure why it's not working as it's floating left, but for some reason falls below the logo div. Can anybody tell me what mistake I am making?

body{
 background-color:#fff; 
 padding:0px;
 margin:0 auto;
}

#header-wrap{
 width:100%;
 height:100px;
 margin: 0 auto;
 background:#BABABA;
 border-bottom: 1px solid #211c20;
 border-top: 1px solid #211c20;
}

#header{
 width:960px;
 height:auto;
 margin: 0 auto;
 background:#72A1D9;
 padding-top:15px;
}

.logo{
 width:130px;
 height:50px;
 border:1px solid black;
 padding-top:20px;
 padding-left:50px;
 font-size:24px;
}

.links{
 background:#FFFD00;
 float:left;
 height:50px;
 width:820px;
 font-size:24px;
}

<div id="header-wrap">
    
    <div id="header">

        <div class="logo">LOGO</div>

        <div class="links">VENDING MACHINES | DISTRIBUTORS | SUPPORT | CONTACT</div>

    </div>

</div>

like this https://jsfiddle.net/n6w2w7yh/ – Leo the lion Feb 03 '16 at 13:16 — Leo the lion, Feb 03 '16 at 13:16

score 0 · Accepted Answer · answered Feb 03 '16 at 13:17

0

Your class logo has to be float left too, and then your header width is 960 and your logo+links size is superior than 960px (130+50+2+820=1002px)

Correct css is `

#header{
    width:960px;
    height:auto;
    margin: 0 auto;
    background:#72A1D9;
    padding-top:15px;
}

.logo{
    width:130px;
    height:50px;
    border:1px solid black;
    padding-top:20px;
    padding-left:50px;
    font-size:24px;
    float:left;
}

.links{
    background:#FFFD00;
    float:left;
    height:50px;
    width:778px;
    font-size:24px;
}

`

answered Feb 03 '16 at 13:17

Raphael

1,708
13
11

Please use clear:both after using float so user won't get another gap issue. Thanx – Leo the lion Feb 03 '16 at 13:18
The `.logo` **does not need** `float:left`. One of the things that float does to an element is change it's `display` to `inline-block` and that is the only thing `.logo` needs. The floating itself is useless and can create additional problems (if not cleared). – tao Feb 03 '16 at 13:22
1

@AndreiGheorghiu you are wrong about float, it doesn't turn display, it kills any display (but flex properties) and take elements off of the natural flow, it is more alike an absolute hooked either on the left or the right, that stil use space for its content , and if previous element is not floatting it first break the line(shift under) https://www.w3.org/wiki/CSS/Properties/float – G-Cyrillus Feb 03 '16 at 13:31
It actually enforces `display:block`, but it's a very particular case of `display:block`, that behaves exactly like a `display:inline-block`. Technically, I'm wrong, but in practice, I am right. :) – tao Feb 03 '16 at 13:46

score 0 · Answer 2 · answered Feb 03 '16 at 13:17

You need to set the logo to display: inline-block.

@charset "utf-8";

/* CSS Document */

body {
  background-color: #fff;
  padding: 0px;
  margin: 0 auto;
}
#header-wrap {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  background: #BABABA;
  border-bottom: 1px solid #211c20;
  border-top: 1px solid #211c20;
}
#header {
  width: 960px;
  height: auto;
  margin: 0 auto;
  background: #72A1D9;
  padding-top: 15px;
}
.logo {
  width: 130px;
  height: 50px;
  border: 1px solid black;
  padding-top: 20px;
  padding-left: 50px;
  font-size: 24px;
  display: inline-block;
}
.links {
  background: #FFFD00;
  float: right;
  height: 50px;
  width: 775px;
  font-size: 24px;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title>Untitled Document</title>
</head>

<body>



  <div id="header-wrap">

    <div id="header">
      <div class="logo">LOGO</div>
      <div class="links">VENDING MACHINES | DISTRIBUTORS | SUPPORT | CONTACT</div>
    </div>
  </div>


</body>

</html>

score 0 · Answer 3 · answered Feb 03 '16 at 13:19

You have 2 issues:

.logo must have float property also
The #header width is 960px, and logo width is 130 width + 50 padding + 2px from border left and border right = 182px , and width of .links is 820px so total is bigger than #header# (1002 px).

You need to refine your css, like :

.logo{
    width:130px;
    height:50px;
    border:1px solid black;
    padding-top:20px;
    padding-left:50px;
    font-size:24px;
    float:left;
}

And

.links{
    background:#FFFD00;
    float:left;
    height:50px;
    width:778px +;
    font-size:24px;
}

Peter Wilson · Answer 4 · 2016-02-03T13:31:26.800

@charset "utf-8";
/* CSS Document */
body{
 background-color:#fff; 
 padding:0px;
 margin:0 auto;
}

#header-wrap{
 width:100%;
 height:100px;
 margin: 0 auto;
 background:#BABABA;
 border-bottom: 1px solid #211c20;
 border-top: 1px solid #211c20;
        overflow:hidden;
}

#header{
 width:960px;
 height:100%;
 margin: 0 auto;
 background:#72A1D9;
 padding-top:15px;
}

.logo{
 width:130px;
 height:50px;
 border:1px solid black;
        text-align:center;
 font-size:24px;
        box-sizing: border-box;
        display: inline-block;
}

.links{
 background:#FFFD00;
 float:right;
 height:50px;
 width:820px;
 font-size:24px;
        box-sizing: border-box;
        display: table;
} 
.links p{
        display: table-cell;
        vertical-align: middle;
        margin: 0;
 }
.logo p{
 
        margin: 0;
        line-height: 50px;
        text-align: center;

}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href ="style.css" rel="stylesheet" type="text/css"/>
<title>Untitled Document</title>
</head>

<body>



<div id="header-wrap">

<div id="header">
<div class="logo"><p>LOGO</p></div>
<div class="links"><p>VENDING MACHINES | DISTRIBUTORS | SUPPORT | CONTACT<p></div>
</div>
</div>
      

</body>
</html>

score 0 · Answer 5 · edited May 23 '17 at 12:30

When applying float to an element, this element will keep it's original vertical position, in order to achieve what you want using floats, you should apply float:left to both .logo and .links so both will be floated left and stand side by side.

Another solution of course is to use display:inline-block to both of them again, but with the usual side effect of having a tiny gap between the two elements if there is a space character between them.

Remember that if you float them both, you may have to clearfix the parent so you don't loose its height.

why is this div below the other and not beside it?

5 Answers5