Reputation: 99

CSS - How do I align my divs horizontally?

I am a HTML/CSS beginner, who wants to create four colored boxes an align them horizontally. I was able to build those four boxes individually. Yet, I do have to comment boxes 2-4 out because they overlap each other. Does someone in this community has the answer to my newb problem?

The divs should ultimately look like the one in the picture below:

Here is my code:

body {

}

#box-grey {
  background-color: grey;
  height: 200px;
  width: 200px;
  }
#box-grey #box-orange {
  background-color: orange;
  height: 50%;
  width: 50%;
  display: inline-block;
  position: relative;
  fixed: 100px;
  left: 100px;
}
/*
#box-black {
  background-color: black;
  height: 200px;
  width: 200px;
  }
#box-black #box-yellow {
  background-color: yellow;
  height: 50%;
  width: 50%;
  display: inline-block;
  position: relative;
  top: 100px;
  left: 100px;
}

#box-blue {
  background-color: blue;
  height: 200px;
  width: 200px;
  }
#box-blue #box-green {
  background-color: green;
  height: 50%;
  width: 50%;
  display: inline-block;
  position: relative;
  top: 100px;
  right: 0px;
}

#box-purple {
  background-color: purple;
  width: 200px;
  height: 200px;
  }
#box-purple #box-pink {
  background-color: pink;
  height: 50%;
  width: 50%;
  display: inline-block;
  position: relative;
  top: 0px;
  right: 0px;
}

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <title>Boxes</title>
</head>
<body>
    <div id="box-grey">
      <div id="box-orange"</div>
      </div>
    <div id="box-black">
      <div id="box-yellow"</div>
      </div>
    <div id="box-blue">
      <div id="box-green"</div>
      </div>
    <div id="box-purple">
      <div id="box-pink"</div>
      </div>
</body>
</html>

Upvotes: 2

Answers (11)

Paul Tanné

Reputation: 77

You are missing closing tag of the div.

Also just put a display: flex in your CSS.

See working example: https://codepen.io/anon/pen/wjqmOK

Upvotes: 0

Progromatic

Reputation: 20

try this on {body} or {*} to apply for all div elements :-

body
{
margin: auto;
vertical-align: center;
text-align: center;
}

//if you apply on this div only
#box-blue 
{
background-color: blue;
height: 200px;
width: 200px;
margin: auto;
vertical-align: center;
text-align: center;
}

can you apply this codes and tell me the result, it's right for you.

Upvotes: -1

Jordan Quartermain

Reputation: 652

Example using flexbox

        .parent {
            display: flex;
            justify-content: center;
        }
        .child {
            height: 100px;
            width: 100px;
        }
        .child:nth-child(1) {
            background-color: pink;
        }
        .child:nth-child(2) {
            background-color: green;
        }
        .child:nth-child(3) {
            background-color: blue;
        }

  <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
  </div>

Upvotes: 0

cnnr

Reputation: 1307

It's rather usual solution without modern css3 grid and flex abilities. We can set display: inline-block and position: relative for wrapper boxes, after that we set position: absolute for inner boxes and positioning them to corners.

body {
  min-width: 840px;
}

.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  position: relative;
}

.box-inner {
  height: 50%;
  width: 50%;
  position: absolute;
}

#box-grey {
  background-color: grey;
}
#box-grey #box-orange {
  background-color: orange;
  right: 0;
  top: 0;
}
#box-black {
  background-color: black;
}
#box-black #box-yellow {
  background-color: yellow;
  bottom: 0;
  right: 0;
}
#box-blue {
  background-color: blue;
}
#box-blue #box-green {
  background-color: green;
  bottom: 0;
  left: 0;
}
#box-purple {
  background-color: purple;
}
#box-purple #box-pink {
  background-color: pink;
  top: 0;
  left: 0;
}

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <title>Boxes</title>
</head>
<body>
    <div id="box-grey" class="box">
      <div id="box-orange" class="box-inner"></div>
    </div>
    <div id="box-black" class="box">
      <div id="box-yellow" class="box-inner"></div>
    </div>
    <div id="box-blue" class="box">
      <div id="box-green" class="box-inner"></div>
    </div>
    <div id="box-purple" class="box">
      <div id="box-pink" class="box-inner"></div>
    </div>
</body>
</html>

Upvotes: 3

dennisN86

Reputation: 99

With Aryans additional "class" I could finally get the desired outcome! Added a margin:right 5px; to get the spacing between the boxes right. Problem solved - thank you!

Upvotes: -1

Ash

Reputation: 31

Horizontal boxes can be done in a variety of ways.

You can use float: left on the box class or display: inline-block

.box {
 float: left; // comment out this or display: inline-block
 display: inline-block; // comment out this or float: left
 height: 200px;
 width: 200px;
 position: relative;
}

.box.grey {
 background-color: #808080;
}

.box.black{
 background-color: #000000;
}

.box.blue{
 background-color: #0000FF;
}

.box.purple{
 background-color: #810081;
}

.inner-box{
 position: absolute;
}

.inner-box.orange{
 top: 0;
 right: 0;
 background-color: #FFA600;
}

.inner-box.yellow{
 bottom: 0;
 right: 0;
 background-color: #FFFF00;
}

.inner-box.green{
 bottom: 0;
 left: 0;
 background-color: #008100;
}

.inner-box.pink{
 top: 0;
 left: 0;
 background-color: #FFC0CB;
}

You can wrap the box divs in another wrapper and utilise flexbox

.boxes { display: flex; flex-direction: row; }

HTML

<!doctype html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <title>Boxes</title>
    </head>
    <body>
        <div class="box grey">
          <div class="inner-box orange"></div>
        </div>
        <div class="box grey">
          <div class="inner-box yellow"></div>
        </div>
        <div class="box blue">
          <div class="inner-box green"></div>
        </div>
        <div class="box purple">
          <div class="inner-box pink"></div>
        </div>
    </body>
    </html>

I also suggest using classes instead of ids unless you are planning and affecting the dom with js at some point

Upvotes: 0

Harish ST

Reputation: 1503

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 1em;
}

#box-1,
#box-2,
#box-3,
#box-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 200px;
  width: 200px;
}

#box-1 {
  background-color: grey;
}

#box-2 {
  background-color: black;
}

#box-3 {
  background-color: blue;
}

#box-4 {
  background-color: purple;
}

#box-grey {
  background-color: grey;
}

#box-orange {
  background-color: orange;
}

#box-black {
  background-color: black;
}

#box-blue {
  background-color: blue;
}

#box-purple {
  background-color: purple;
}

#box-yellow {
  background-color: yellow;
}

#box-green {
  background-color: green;
}

#box-pink {
  background-color: pink;
}

<!doctype html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <title>Boxes</title>
</head>

<body>
  <div id="container">
    <div id="box-1">
      <div></div>
      <div id="box-orange">
      </div>
    </div>
    <div id="box-2">
      <div></div>
      <div></div>
      <div></div>
      <div id="box-yellow"></div>
    </div>
    <div id="box-3">
      <div></div>
      <div></div>
      <div id="box-green"></div>
    </div>
    <div id="box-4">
      <div id="box-pink"></div>
    </div>
  </div>
</body>
</html>

Using CSS Grid Approach! Easier to Understand!

Upvotes: 2

Tom

Reputation: 1829

I have added classes to the divs to manage code better.

body {}

.outerbox {
  display: inline-block;
  height: 100px;
  width: 24%;
  position: relative;
}

.innerbox {
  height: 50px;
  width: 50px;
  position: absolute;
}

#box-grey {
  background-color: grey;
}

#box-grey #box-orange {
  background-color: orange;
  right: 0;
  top: 0;
}

#box-black {
  background-color: black;
}

#box-black #box-yellow {
  background-color: yellow;
  right: 0;
  bottom: 0;
}

#box-blue {
  background-color: blue;
}

#box-blue #box-green {
  background-color: green;
  left: 0;
  bottom: 0;
}

#box-purple {
  background-color: purple;
}

#box-purple #box-pink {
  background-color: pink;
  top: 0;
  left: 0;
}

<!doctype html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <title>Boxes</title>
</head>

<body>
  <div id="box-grey" class="outerbox">
    <div id="box-orange" class="innerbox"></div>
  </div>
  <div id="box-black" class="outerbox">
    <div id="box-yellow" class="innerbox"></div>
  </div>
  <div id="box-blue" class="outerbox">
    <div id="box-green" class="innerbox"></div>
  </div>
  <div id="box-purple" class="outerbox">
    <div id="box-pink" class="innerbox"></div>
  </div>
</body>

</html>

Upvotes: 0

Gagan Deep

Reputation: 1509

Try with this css

#box-grey {
  background-color: grey;
  height: 200px;
  width: 200px;
  float:left;
  margin:10px;
  }
#box-grey #box-orange {
  background-color: orange;
  height: 50%;
  width: 50%;
  display: inline-block;
  position: relative;
  float:left;
  left: 100px;
}

#box-black {
  background-color: black;
  height: 200px;
  width: 200px;
  float:left;
  margin:10px;
  }
#box-black #box-yellow {
  background-color: yellow;
  height: 50%;
  width: 50%;
  display: inline-block;
  position: relative;
  top: 100px;
  left: 100px;
  float:left;
}

#box-blue {
  background-color: blue;
  height: 200px;
  width: 200px;
  float:left;
  margin:10px;
  }
#box-blue #box-green {
  background-color: green;
  height: 50%;
  width: 50%;
  display: inline-block;
  position: relative;
  top: 100px;
  right: 0px;
  float:left;
}

#box-purple {
  background-color: purple;
  width: 200px;
  height: 200px;
  float:left;
  margin:10px;
  }
#box-purple #box-pink {
  background-color: pink;
  height: 50%;
  width: 50%;
  display: inline-block;
  position: relative;
  top: 0px;
  right: 0px;
  float:left;
}

<div id="box-grey">
      <div id="box-orange"></div>
      </div>
    <div id="box-black">
      <div id="box-yellow"></div>
      </div>
    <div id="box-blue">
      <div id="box-green"></div>
      </div>
    <div id="box-purple">
      <div id="box-pink"></div>
      </div>

Upvotes: 0

Aryan Twanju

Reputation: 2516

You have issues with your code. You have lots of unclosed <div>. Try this code.

body {}

.box-wrap {
  display: flex;
}

#box-grey {
  background-color: grey;
  height: 200px;
  width: 200px;
  position: relative;
}

#box-grey #box-orange {
  background-color: orange;
  height: 50%;
  width: 50%;
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
}

#box-black {
  background-color: black;
  height: 200px;
  width: 200px;
  position: relative;
}

#box-black #box-yellow {
  background-color: yellow;
  height: 50%;
  width: 50%;
  display: inline-block;
  position: absolute;
  bottom: 0;
  right: 0;
}

#box-blue {
  background-color: blue;
  height: 200px;
  width: 200px;
  position: relative;
}

#box-blue #box-green {
  background-color: green;
  height: 50%;
  width: 50%;
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0px;
}

#box-purple {
  background-color: purple;
  width: 200px;
  height: 200px;
  position: relative;
}

#box-purple #box-pink {
  background-color: pink;
  height: 50%;
  width: 50%;
  display: inline-block;
  position: absolute;
  ;
  top: 0px;
  left: 0px;
}

<!doctype html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <title>Boxes</title>
</head>

<body>
  <div class="box-wrap">
    <div id="box-grey">
      <div id="box-orange"></div>
    </div>
    <div id="box-black">
      <div id="box-yellow"></div>
    </div>
    <div id="box-blue">
      <div id="box-green"></div>
    </div>
    <div id="box-purple">
      <div id="box-pink"></div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

ADyson

Reputation: 62074

To get the boxes to align horizontally one very simple solution is to set a float:left on all of them. If the screen is not wide enough to display them all horizontally, then those which do not fit will automatically be pushed to the next line.

To achieve this in your code I've put a class called "outer-box" on all the outer divs, and then set a rule in CSS that all elements with this class will be floated left. This stops them being block-level elements (i.e. block-level elements which always cause a new line to be started).

See https://developer.mozilla.org/en-US/docs/Web/CSS/float for more in-depth documentation of floats.

body {}

.outer-box {
  float: left;
}

#box-grey {
  background-color: grey;
  height: 200px;
  width: 200px;
}

#box-grey #box-orange {
  background-color: orange;
  height: 50%;
  width: 50%;
  display: inline-block;
  position: relative;
  fixed: 100px;
  left: 100px;
}



#box-black {
  background-color: black;
  height: 200px;
  width: 200px;
  }
#box-black #box-yellow {
  background-color: yellow;
  height: 50%;
  width: 50%;
  display: inline-block;
  position: relative;
  top: 100px;
  left: 100px;
}

#box-blue {
  background-color: blue;
  height: 200px;
  width: 200px;
  }
#box-blue #box-green {
  background-color: green;
  height: 50%;
  width: 50%;
  display: inline-block;
  position: relative;
  top: 100px;
  right: 0px;
}

#box-purple {
  background-color: purple;
  width: 200px;
  height: 200px;
  }
#box-purple #box-pink {
  background-color: pink;
  height: 50%;
  width: 50%;
  display: inline-block;
  position: relative;
  top: 0px;
  right: 0px;
}

<!doctype html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <title>Boxes</title>
</head>

<body>
  <div id="box-grey" class="outer-box">
    <div id="box-orange"></div>
  </div>
  <div id="box-black" class="outer-box">
    <div id="box-yellow"></div>
  </div>
  <div id="box-blue" class="outer-box">
    <div id="box-green"></div>
  </div>
  <div id="box-purple" class="outer-box">
    <div id="box-pink"></div>
  </div>
</body>

</html>

Upvotes: 1

CSS - How do I align my divs horizontally?

Answers (11)

Related Questions