0

How do I get the red boxes side by side with space between them for separation and how do I get the signin/signup button to be in the blue background of the header?

I have tried using float.

I expect the red boxes to be side by side horizontally with space between them and the signin/signup button to be in the header background.

header {
    background-color: Blue;
    color: yellow;
    margin-top: -21px;
    margin-left: -10px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
nav ul {
    list-style: none;
    position: relative;
    float: right;
}
/* red box */
#a {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
    padding-right: .6em;
    margin: 1em 0;

}
/* red box */
#b {
    width: 100px;
    height: 100px;
    background: red;
    float: ;
    padding-right: .6em;
    margin: 1em 0;
}
/* red box */
#c {
    width: 100px;
    height: 100px;
    background: red;
    float: right;
    padding-right: .6em;
    margin: 1em 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>ABC</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <header>
        <h1>ABC</h1>
        <!-- signin/signup -->
        <nav>
            <ul>
                <li><button type="button" name="signin/signup">signin/signup</button></li>
            </ul>
        </nav>
    </header>
    <body>
        <!-- Video  -->
        <video>
            <source src="Welcome.mp4" type="video/mp4">
        </video>
        <!-- 3 informational red boxes -->
        <div class="">
            <ul>
                <li id="a"></li>
                <li id="b"></li>
                <li id="c"></li>
            </ul>
        </div>
    </body>
</html>

3
  • 2
    Make sure your <header> is inside the <body> to start with. Then we can troubleshoot the other issue from there.
    – Bonnie
    Aug 16, 2019 at 13:04
  • 1
    Getting the red boxes side by side is really simple with Flexbox.
    – Bonnie
    Aug 16, 2019 at 13:14
  • I wouldn't use floats - with css3 you should really be using flex (or if your not bothered about ie, then use grid). Here is a tutorial to get you started.
    – Pete
    Aug 16, 2019 at 13:22

3 Answers 3

1

One way to achieve that is to use display: flex; and justify-content: space-between; both for the ul that contains the red boxes and for the header. This distributes all child elements of these containers horizontally and evenly. In addition, align-items: center does the vertical centered alignment of the child elements in the header.

header {
    background-color: Blue;
    color: yellow;
    margin-top: -21px;
    margin-left: -10px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav ul {
    list-style: none;
    position: relative;
    
}
.x ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    }
/* red box */
#a {
    width: 100px;
    height: 100px;
    background: red;
    padding-right: .6em;
    margin: 1em 0;

}
/* red box */
#b {
    width: 100px;
    height: 100px;
    background: red;
    padding-right: .6em;
    margin: 1em 0;
}
/* red box */
#c {
    width: 100px;
    height: 100px;
    background: red;
    padding-right: .6em;
    margin: 1em 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>ABC</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <header>
        <h1>ABC</h1>
        <!-- signin/signup -->
        <nav>
            <ul>
                <li><button type="button" name="signin/signup">signin/signup</button></li>
            </ul>
        </nav>
    </header>
    <body>
        <!-- Video  -->
        <video>
            <source src="Welcome.mp4" type="video/mp4">
        </video>
        <!-- 3 informational red boxes -->
        <div class="x">
            <ul>
                <li id="a"></li>
                <li id="b"></li>
                <li id="c"></li>
            </ul>
        </div>
    </body>
</html>

0

Try to use this code, little bit changed ur code.

body {
  margin: 0;
  padding: 0;
}

header {
  display: inline-block;
  width: 100%;
  height: auto;
  background-color: Blue;
  color: yellow;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

div ul {
  width: 100%;
  display: inline-block;
}

header h1 {
  float: left;
}

header nav {
  float: right;
}

div ul{
  list-style: none;
  float: right;
}


div ul li{
      display: inline-block;
      width: 100px;
      height: 100px;
      background: red;
      float: left;
      padding-right: .6em;
      margin: 1em 1em;
}
1
  • Can you explain what changes you made and how they solve OP's problem?
    – TylerH
    Aug 16, 2019 at 13:32
0

You need to put display: inline-block; on each box, then they should show up side-by-side. And remove your floats.

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>ABC</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <header>
    <h1>ABC</h1>
    <!-- signin/signup -->
    <nav>
      <ul>
        <li><button type="button" name="signin/signup">signin/signup</button></li>
      </ul>
    </nav>
  </header>
    <!-- Video  -->
    <video>
      <source src="Welcome.mp4" type="video/mp4">
    </video>
    <!-- 3 informational red boxes -->
    <div class="boxes">
      <ul>
        <li id="a"></li>
        <li id="b"></li>
        <li id="c"></li>
      </ul>
    </div>

  </body>
</html>

CSS

header {
  background-color: Blue;
  color: yellow;
  margin-top: -21px ;
  margin-left: -10px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

nav ul{
  list-style: none;
  position: relative;
}

.boxes ul li {
  display: inline-block;
}

/* red box */
#a{
  width: 100px;
  height: 100px;
  background: red;
  padding-right: .6em;
  margin: 1em 0;

}
/* red box */
#b{
  width: 100px;
  height: 100px;
  background: red;
  padding-right: .6em;
  margin: 1em 0;
}
/* red box */
#c{
  width: 100px;
  height: 100px;
  background: red;
  padding-right: .6em;
  margin: 1em 0;
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.