Why is this third div being pushed down?

Question

My question is why is that third div( class= "right") goes downward??

I tried using vertical-align:top; also but didn't work.

I want div.nav to be at mid and div.right to be at right with all three of them being at the same top postition

body{
    margin:0px;
    padding:0px;
    background-color:red;
    /*background-image:url('../images/GOW_1.jpg');
    background-size: cover;*/
}

.left{
    float:left;
    display:inline-block;
}

.nav{
    display:block;
    width:20%;
    margin:auto;
}

.right{
    float:right;
    display: block;
    vertical-align: top;
}

.group:before,
.group:after{
    content:"";
    display:table;
}

.group:after{
    clear:both;
}

.group{
    zoom:1;
}

<!DOCTYPE html>
<html>
<head>
    <title>Gaming world</title>
    <meta charset="utf-8">
    <meta name="viewport"  content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="css/style.css">
</head>
<body>
    <header class="top-header group">
            <div class="left">left</div>
            <div class="nav">Nav</div>
            <div class="right">right</div>
    </header>

</body>
</html>

You gave it `display: block;`. display: block will take a 100% width — GucciBananaKing99, Sep 01 '21 at 07:56
nav is in the regular flow, then right floats but will go under nav. make nav also float or use from the parent a flex or grid display. — G-Cyrillus, Sep 01 '21 at 08:13
@GucciBananaKing99 of course, read my other comment ;) , .right moves below .nav before floatting, that's how float elements behave **since ever**. the non floatting element is to be placed behind , not before. example https://jsfiddle.net/sz9rakw5/ - https://jsfiddle.net/sz9rakw5/1/ with or without a width set and borders to show where nav stands — G-Cyrillus, Sep 01 '21 at 08:29
You can just float all three elements to the left, with their widths set to - 40% 20% 40% respectively. And `vertical-align` doesn't works with floating elements. — Rohit Kumar, Sep 01 '21 at 08:34

GucciBananaKing99 · Answer 1 · 2021-09-01T08:15:22.310

Answering your question

You used display: block;. display: block will take a 100%. If you want the div to only take the width of the item itself then use display: inline-block;

Fixing your code

Use display: flex; with justify-content: space-between; and remove all the other stuff. You can also add other divs in the header but flex will position them perfectly

That means you can also remove the classes from the divs in the header

Optimized Code:

body{
    margin:0px;
    padding:0px;
    background-color:red;
    /*background-image:url('../images/GOW_1.jpg');
    background-size: cover;*/
}

header {
  display: flex;
  justify-content: space-between;
}

<!DOCTYPE html>
<html>
<head>
    <title>Gaming world</title>
    <meta charset="utf-8">
    <meta name="viewport"  content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="css/style.css">
</head>
<body>
    <header class="top-header group">
            <div class="left">left</div>
            <div class="nav">Nav</div>
            <div class="right">right</div>
    </header>

</body>
</html>

Example with more Divs in the header:

body{
    margin:0px;
    padding:0px;
    background-color:red;
    /*background-image:url('../images/GOW_1.jpg');
    background-size: cover;*/
}

header {
  display: flex;
  justify-content: space-between;
}

<!DOCTYPE html>
<html>
<head>
    <title>Gaming world</title>
    <meta charset="utf-8">
    <meta name="viewport"  content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="css/style.css">
</head>
<body>
    <header class="top-header group">
            <div>Text</div>
            <div>Text</div>
            <div>Text</div>
            <div>Text</div>
            <div>Text</div>
            <div>Text</div>
            <div>Text</div>
            <div>Text</div>
            <div>Text</div>
            <div>Text</div>
    </header>

</body>
</html>

G-Cyrillus · Answer 2 · 2021-09-01T08:27:59.517

floatting elements will make a break before floatting if anything in the regular flow stands before it , that's why .right shows right under .nav.

You can set .nav after the floatting elements in the code, so it doesn't disturb the floatting elements.

body{
    margin:0px;
    padding:0px;
    background-color:red;
    /*background-image:url('../images/GOW_1.jpg');
    background-size: cover;*/
}

.left{
    float:left; 
}

.nav{
    display:block;
    width:20%;
    margin:auto;
}

.right{
    float:right; 
}

.group:before,
.group:after{
    content:"";
    display:table;
}

.group:after{
    clear:both;
}

.group{
    zoom:1;
}

<!DOCTYPE html>
<html>
<head>
    <title>Gaming world</title>
    <meta charset="utf-8">
    <meta name="viewport"  content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="css/style.css">
</head>
<body>
    <header class="top-header group">
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="nav">Nav</div>
    </header>

</body>
</html>

Nowdays, flex or grid is used for this

flex

body {
  margin: 0px;
  padding: 0px;
  background-color: red;
  /*background-image:url('../images/GOW_1.jpg');
    background-size: cover;*/
}

.top-header {
  display: flex;
}

.nav {
  width: 20%;
  margin: auto;
}

<!DOCTYPE html>
<html>

<head>
  <title>Gaming world</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header class="top-header group">
    <div class="left">left</div>
    <div class="nav">Nav</div>
    <div class="right">right</div>
  </header>

</body>

</html>

grid

body {
  margin: 0px;
  padding: 0px;
  background-color: red;
}

.top-header {
  display: grid;
  grid-template-columns: auto 20% auto;
  justify-content: space-between
}

.left {}

.nav {}

.right {}

<!DOCTYPE html>
<html>

<head>
  <title>Gaming world</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header class="top-header group">
    <div class="left">left</div>
    <div class="nav">Nav</div>
    <div class="right">right</div>
  </header>

</body>

</html>

Nice! good reply. It worked – pattrick james Sep 01 '21 at 15:58 — pattrick james, Sep 01 '21 at 15:58

score 0 · Answer 3 · answered Sep 01 '21 at 08:04

body{
    margin:0px;
    padding:0px;
    background-color:red;
    /*background-image:url('../images/GOW_1.jpg');
    background-size: cover;*/
}

.left{
    float:left;
    display:inline-block;
    width: 50%;
}

.nav{
  display: inline-block;

  
}

.right{
  display:inline-block;
    float:right;
    display: block;
    vertical-align: top;
}

.group:before,
.group:after{
    content:"";
    display:table;
}

.group:after{
    clear:both;
}

.group{
    zoom:1;
}

<!DOCTYPE html>
<html>
<head>
    <title>Gaming world</title>
    <meta charset="utf-8">
    <meta name="viewport"  content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="css/style.css">
</head>
<body>
    <header class="top-header group">
            <div class="left">left</div>
            <div class="nav">Nav</div>
            <div class="right">right</div>
    </header>

</body>
</html>

Try using display:inline-block; on all divs. Then you can set the location of the nav with width of the first div

Not a bad solution but I’m guessing you are going to have troubles when screen width varies. (Response). The flex box solution will space out well for a pretty large variety of display screen widths. — zipzit, Sep 01 '21 at 08:16

Why is this third div being pushed down?

3 Answers3

Answering your question

Fixing your code

Example with more Divs in the header: