Why is there a gap when I use float right?

Question

I am trying to make two divs one div takes up 1/3 of the page and the other takes up 2/3 of the page but when I use float:left and float:right the div on the right has a strange gap above it. I am trying to make the width 1440px for now and transform it the percentage later. Does anyone know why it's doing this?

HTML:

main{
  width: 1440px;
  margin: 0px auto;
  float: left;
}
header{
  height: 80px;
  background-color: cadetblue;
}
nav{
  background-color: darkslategray;
  height: 50px;
  margin: 20px;
  width: 200px;
}
.row1{
margin: 0px auto;
}
.height1{
height:400px;
}
.height2{
height: 300px;
}
.height3{
  height:420px;
}
.column1{
  width: 480px;
  background-color: #000;
}
.column2{
  width: 960px;
  background-color: coral;
}
.float-left{
  float:left;
}
.float-right{
  float: right;
}
.red{
  background-color: #d11242;
}
.blue{
  background-color: #00447c;
}
.gray{
  background-color: #717073;
}

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Document</title>
    <meta charset="UTF-8">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="CSS/reset.css" rel="stylesheet" type="text/css">
    <link href="CSS/main.css" rel="stylesheet" type="text/css">

</head>
<body>
<main>
    <header>
    <nav class="float-right">
    </nav>
    </header>
    <div class="height1 row1 red">
        <div class="height1 column1 float-left"></div>
        <div class="height1 column2 float-right"></div>
    </div>
    <div class="height2 row1 blue"></div>
    <div class="height3 row1 gray"></div>
</main>
</body>
</html>

score 0 · Answer 1 · answered Feb 05 '21 at 05:18

0

Your header nav element is causing the displacement.

Check your nav styles and remove either the margin or the fixed height. Another option would be to change the height to 100% and remove the margin and use padding with a box-sizing change.

answered Feb 05 '21 at 05:18

Mihail Minkov

2,463
2
24
41

That works thanks it was driving me crazy! – user3579479 Feb 05 '21 at 05:41
You can accept the answer if it worked for you @user3579479 :) – Mihail Minkov Feb 05 '21 at 17:22

score 0 · Answer 2 · answered Feb 05 '21 at 05:20

<main>
    <header>
    <nav class="float-right">
    </nav>
    </header>
    <div class="height1 row1 red content-wrapper">
        <div class="height1 column1 float-left"></div>
        <div class="height1 column2 float-right"></div>
    </div>
    <div class="height2 row1 blue"></div>
    <div class="height3 row1 gray"></div>
</main>

main{
width: 1440px;
margin: 0px auto;
float: left;
}
header{
height: 80px;
background-color: cadetblue;
}
nav{
background-color: darkslategray;
height: 50px;
margin: 20px;
width: 200px;
}
.row1{
margin: 0px auto;
}
.height1{
height:400px;
}
.height2{
height: 300px;
}
.height3{
    height:420px;
}
.column1{
    width: 480px;
    background-color: #000;
}
.column2{
    width: 960px;
    background-color: coral;
}
.float-left{
    float:left;
    
}
.float-right{
float: right;
}
.red{
    background-color: #d11242;
}
.blue{
    background-color: #00447c;
}
.gray{
    background-color: #717073;
}
.content-wrapper{
  position: relative;
display: block;
width: 100%;
background: red;
overflow: hidden;
}

Thank you for contributing an answer. Would you kindly edit your answer to to include an explanation of your code? That will help future readers better understand what is going on, and especially those members of the community who are new to the language and struggling to understand the concepts. — STA, Feb 05 '21 at 06:16

score 0 · Answer 3 · answered Feb 05 '21 at 05:35

I guess the problem is with your height pixels. You should not give height as pixels. Instead of pixels try using in %. I have made some changes in CSS, can try that.

main{
  width: 1440px;
  margin: 0px auto;
  float: left;
}
header{
  height: 30%;
  background-color: cadetblue;
}
nav{
  background-color: darkslategray;
  height: 50px;
  margin: 20px;
  width: 200px;
}
.row1{
margin: 0px auto;
}
.height1{
height:100%;
}

.column1{
  width: 480px;
  background-color: #000;
}
.column2{
  width: 960px;
  background-color: coral;
}
.float-left{
  float:left;
}
.float-right{
  float: right;
}
.red{
  background-color: #d11242;
}
.blue{
  background-color: #00447c;
}
.gray{
  background-color: #717073;
}

score 0 · Answer 4 · answered Feb 05 '21 at 05:44

Can you please check the below code link? Hope it will work for you. This issue occurs as you have given fixed height in header and more margin to nav so, nav overflows outside of the header.

Please refer to this link: https://jsfiddle.net/yudizsolutions/8gxLu2mn/1/

main {
  width: 1440px;
  margin: 0px auto;
  float: left;
}

header {
  height: 80px;
  background-color: cadetblue;
}

nav {
  background-color: darkslategray;
  height: 50px;
  margin: 15px;
  width: 200px;
}

.row1 {
  margin: 0px auto;
}

.height1 {
  height: 400px;
}

.height2 {
  height: 300px;
}

.height3 {
  height: 420px;
}

.column1 {
  width: 480px;
  background-color: #000;
}

.column2 {
  width: 960px;
  background-color: coral;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.red {
  background-color: #d11242;
}

.blue {
  background-color: #00447c;
}

.gray {
  background-color: #717073;
}

<!DOCTYPE html>
<html>

  <head>
    <title>Untitled Document</title>
    <meta charset="UTF-8">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="CSS/reset.css" rel="stylesheet" type="text/css">
    <link href="CSS/main.css" rel="stylesheet" type="text/css">

  </head>

  <body>
    <main>
      <header>
        <nav class="float-right">
        </nav>
      </header>
      <div class="height1 row1 red">
        <div class="height1 column1 float-left"></div>
        <div class="height1 column2 float-right"></div>
      </div>
      <div class="height2 row1 blue"></div>
      <div class="height3 row1 gray"></div>
    </main>
  </body>

</html>

Why is there a gap when I use float right?

4 Answers4