CODEWITHSUNDEEP
htmlcss
Justin C.
Justin C.

Reputation: 109

Centering CSS divs that are floated

I'm doing a practice exercise where I'm trying to re-create this: https://ibb.co/Nx48VbD 

* {
  box-sizing: border-box;
}

.row-1 {
  background-color: grey;
  border: 1px solid black;
  width: 1178px;
  height: 146px;
  margin: 96px auto 0 auto;
  position: relative;
  right: 12px;
}

.row-2 {
  float: left;
  margin: 0 auto;
}

.b1 {
  background-color: grey;
  border: 1px solid black;
  width: 346px;
  height: 248px;
  margin-top: 24px;
  float: left;
}

.b1:nth-of-type(1) {
  margin-right: 90px;
}

.b1:nth-of-type(2) {
  margin-right: 46px;
}

.b1:nth-of-type(3) {
  bottom: 12px;
  right: 12px;
}

.row-3 {
  background-color: grey;
  border: 1px solid black;
  width: 1188px;
  height: 326px;
  margin: 24px auto;
  border-radius: 36px;
}

.b2 {
  background-color: gray;
  border: 1px solid black;
  height: 202px;
  border-radius: 24px;
  float: left;
}

.b2:nth-of-type(1) {
  width: 726px;
  margin-right: 24px;
}

.b2:nth-of-type(2) {
  width: 438px;
}

.b3 {
  background-color: gray;
  border: 1px solid black;
  height: 202px;
  margin-top: 24px;
  float: left;
}

.b3:nth-of-type(1) {
  width: 436px;
  margin-right: 84px;
  border-radius: 24px;
}

.b3:nth-of-type(2) {
  width: 666px;
}
<div class="row-1"></div>
<div class="row-2">
  <div class="b1"></div>
  <div class="b1"></div>
  <div class="b1"></div>
</div>
<div style="clear: both;"></div>
<div class="row-3"></div>
<div class="row-4">
  <div class="b2"></div>
  <div class="b2"></div>
</div>
<div style="clear: both;"></div>

<div class="row-5">
  <div class="b3"></div>
  <div class="b3"></div>
</div>

I was able to get the 1st and 3rd rows to center by using margin: 0 auto;. However, when I try this on the 2nd, 4th, and 5th rows, it doesn't seem to work. How can I center them like how it is shown in the image?

Also, I have background-color: gray; border: 1px solid black; in a lot of places. Is there a way I could do this DRY-er?

I also have a lot of margin-top margin-bottoms since every box has a border of 12px. Is there a way I could do this DRY-er as well?

Note: This exercise is supposed to be done without using flexbox or css grid.

Thanks!

Upvotes: 1

Views: 129

Answers (4)

Saravana
Saravana

Reputation: 3506

You can separate column follow this code. No need to set any margin space for every column . You can adjust the container width based on your need. No Bootstrap and flexbox used in this code. I hope this answer will be helpful.

* {
    box-sizing: border-box;
}

.container {
    max-width: 1178px;
    margin: 0 auto;
}

.row-3 {
    background-color: grey;
    border: 1px solid black;
    border-radius: 15px;
}

.row-1 {
    background-color: grey;
    border: 1px solid black;
    margin: 50px 0 0;
}

.col-4 {
    background-color: grey;
    border: 1px solid black;
    width: 32.26%;
    height: 250px;
    display: inline-block;
    padding: 0 0;
}

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

.row {
    clear: both;
    padding: 0px;
    margin: 0 0 15px;
    overflow: hidden;
    height: 140px;
}

.col-4:first-child,
.col-9:first-child,
.col-3:first-child {
    margin-left: 0;
}

.col-4,
.col-9,
.col-3 {
    display: block;
    float: left;
    margin: 0 0 0 1.6%;
    height: 140px;
}

.col-9 {
    background-color: grey;
    border: 1px solid black;
    width: 60%;
    display: inline-block;
    padding: 0 0;
    border-radius: 15px;
}

.col-3 {
    background-color: grey;
    border: 1px solid black;
    width: 38.26%;
    display: inline-block;
    padding: 0 0;
    border-radius: 15px;
}
<div class="container">
    <div class="row row-1"></div>
  
    <div class="row">
        <div class="col-4"></div>
        <div class="col-4"></div>
        <div class="col-4"></div>
    </div>

    <div class="row row-3"></div>
  
    <div class="row">
        <div class="col-9"></div>
        <div class="col-3"></div>
    </div>

    <div class="row">
        <div class="col-3"></div>
        <div class="col-9"></div>
    </div>
</div>

Upvotes: 0

Air
Air

Reputation: 203

I'm not trying to solve a problem for you, this is not an exact example. This is a hint that you would pay attention to flex

Flex does not cancel margins or padding, there are also rules for flex children. Which can indicate without margins where to locate and how much space to occupy in the container .. There are a lot of interesting rules

* {
  box-sizing: border-box;
}

.root {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.row-1 {
  background-color: grey;
  border: 1px solid black;
  width: 1178px;
  height: 146px;
}

.row-2 {
  display: flex;
  align-items: center;
  display: flex;
  align-items: center;
}

.b1 {
  background-color: grey;
  border: 1px solid black;
  width: 346px;
  height: 248px;
}

.row-3 {
  background-color: grey;
  border: 1px solid black;
  width: 1188px;
  height: 326px;
  border-radius: 36px;
}

.row-4 {
  display: flex;
}

.row-5 {
  display: flex;
}

.b2 {
  background-color: gray;
  border: 1px solid black;
  height: 202px;
  border-radius: 24px;
}

.b2:nth-of-type(1) {
  width: 726px;
}

.b2:nth-of-type(2) {
  width: 438px;
}

.b3 {
  background-color: gray;
  border: 1px solid black;
  height: 202px;
}

.b3:nth-of-type(1) {
  width: 436px;
  border-radius: 24px;
}
<div class="root">
  <div class="row-1">row-1</div>
  <div class="row-2">
    <div class="b1">b1 in row-2</div>
    <div class="b1">b1 in row-2</div>
    <div class="b1">b1 in row-2</div>
  </div>
  <div class="row-3">row-3</div>
  <div class="row-4">
    <div class="b2">b2 in row-4</div>
    <div class="b2">b2 in row-4</div>
  </div>
  <div class="row-5">
    <div class="b3">b3 in row-5</div>
    <div class="b3">b3 in row-5</div>
  </div>
</div>

Upvotes: 1

Gal Talmor
Gal Talmor

Reputation: 1014

From your image, it does not seem like you actually want any of your rows to float. What float does is take your element out of the flow of the document and put them in a new detached flow that is only affected by other floating elements in the same context.

It seems like what you want to have is all the rows centered with the same width, one after the other and the elements inside the rows floated.

Instead of what you currently have for row-2 I would do the following:

.row-2, .row-4, .row-5 {
   width: 1178px;
   margin: 0 auto;
}

Here's a jsfiddle that shows the fixed code: https://jsfiddle.net/fvzaujob/1/

On a side note, a more widely used solution nowadays is using flex or grids instead of float to control the flow of elements in a document, since it gives you more control over the elements.

Upvotes: 0

Pixelomo
Pixelomo

Reputation: 6737

Use display: inline-block instead of floats on .b1

Setting them to equal width using calc and then setting text-align: center on the row-2 should do it

.row-2{
  text-align: center;
}

.b1{
  display: inline-block;
  vertical-align: top;
  width: calc(100%/3 - 10px);
  height: 100px;
  border: 2px solid grey;
}
<div class="row-2">
    <div class="b1"></div>
    <div class="b1"></div>
    <div class="b1"></div>
</div>

if you want to make your colors/borders DRY-er I'd recommend learning SASS/SCSS then you can make use of variables and mixins

https://sass-lang.com/guide

Upvotes: 1

Related Questions