Btukfyl

I've been trying to put 4 boxes together in CSS, 2 in one row and 2 below the first one like this: result

but i can't manage to do it correctly. So far i have this:
before

Parts of my code:

.div {



display:inline-block;

box-sizing: border-box;

border-width:25%;

bottom: 100;

right: 100;



}



#one {

float:right;

border-style: solid;

border-width:5px;

border-color: blue;

box-sizing: border-box;

width: 200px;

height: 130px;

margin:5px;

padding:5px;

}



#two  {

float:right;

border-style: solid;

border-color: green;

border-width:5px;

box-sizing: border-box;

width: 200px;

height: 110px;

margin:5px;

padding:5px;

}



#three {

float:left;

border-style: solid;

border-color: orange;

border-width:5px;

box-sizing: border-box;

width: 200px;

height: 150px;

margin:5px;

padding:5px;

}



#four {

float:left;

border-style: solid;

border-color: yellow;

border-width:5px;

box-sizing: border-box;

width: 200px;

height: 110px;

margin:5px;

padding:5px;

}

 

p {

padding:5px;

margin:5px;

border-width:25%;

}

p {

margin:10px;

border-width:25%;

}

<div id="one">

</div>

<div id="two">

</div>

<div id="three">

</div>

<div id="four">

</div>

if i put position:fixed so that it won't move every box overlaps the others. How can i make them all aligned like the first image? i want the 2 boxes to be next to each other and the other two at the bottom.
What am i doing wrong with the position of the boxes and the margins? I know the whole box model with padding and margin but i can't understand exactly how i'm supposed to place the boxes correctly.
Thank you in advance.

There are a few ways to approach this, I would say the easiest would be using CSS Grid. CSS Grid is a two-dimensional layout system for the web, allowing for you to have better control over rows and columns.

You could accomplish this by using CSS Flexbox, but it would take a little more configuring and may not look as "eloquent".

Here are some sources for CSS Grid:

Mozilla Docs

CSS Reference

I modified your code by wrapping your html with a container and adding grid to it, the example is below:

CSS

.container {

 display: grid;

 grid-gap: 5rem;

 grid-template-columns: 200px 200px;

}



#one {

 border-style: solid;

 border-width:5px;

 border-color: blue;

 box-sizing: border-box;

 width: 200px;

 height: 130px;

 margin:5px;

 padding:5px;

}



#two  {

 border-style: solid;

 border-color: green;

 border-width:5px;

 box-sizing: border-box;

 width: 200px;

 height: 110px;

 margin:5px;

 padding:5px;

}



#three {

 border-style: solid;

 border-color: orange;

 border-width:5px;

 box-sizing: border-box;

 width: 200px;

 height: 150px;

 margin:5px;

 padding:5px;

}



#four {

 border-style: solid;

 border-color: yellow;

 border-width:5px;

 box-sizing: border-box;

 width: 200px;

 height: 110px;

 margin:5px;

 padding:5px;

}

HTML

<div class="container">

 <div id="one">

 </div>

 <div id="two">

 </div>

 <div id="three">

 </div>

 <div id="four">

 </div>

</div>

What I roughly did :

HTML :

  <div id="one">

</div>



<div id="two">

</div>



<div id="three">

</div>



<div id="four">

</div>

CSS:

#one {

float:left;

border-style: solid;

border-width:5px;

border-color: orange;

box-sizing: border-box;

width: 200px;

height: 130px;

margin:5px;

padding:5px;

}



#four  {

float:left;

border-style: solid;

border-color: yellow;

border-width:5px;

box-sizing: border-box;

width: 200px;

height: 110px;

margin-top:50px;

padding:5px;

}



#two {

float:left;

border-style: solid;

border-color: green;

border-width:5px;

box-sizing: border-box;

width: 200px;

height: 130px;

margin-left:100px;

margin-top:7px;

padding:5px;

}



#three {

float:right;

border-style: solid;

border-color: blue;

border-width:5px;

box-sizing: border-box;

width: 200px;

height: 110px;

margin-top:50px;

margin-right:90px;

padding:5px;

}



p {

padding:5px;

margin:5px;

border-width:25%;

}

p {

margin:10px;

border-width:25%;

}

When you have the divs set as inline blocks they will render in the order of the HTML, starting from the top left of their container. The rules are applied as though the browser is reading text: left to right. You can get something closer to what you are trying to achieve by reordering the divs like this:

<div id="three">

</div>

<div id="two">

</div>

<div id="one">

</div>

<div id="four">

</div>

In a larger container this will show all the boxes on a single line, but on a smaller screen (or inside a smaller container) they will look like this:

Orange box (left float)..........Green box (right float)

Yellow box (left float)..........Blue box (right float)

There are a lot of different approaches to make this layout work for you:

1. You can use the display: table property and treat the divs like a two-row two-column table


2. wrap the two divs on top in another div container (display: block
   


3. Use the code listed above with re-ordered divs (using your existing css)

I hope this helps. If I had a more concrete understanding of what you were trying to accomplish I could give you a more directed answer.

A couple of changes to your CSS/HTML code should be all it takes.

Add the following lines to the corresponding CSS ID's:

#one {

    grid-area: orange 1/1/2/2; 

    ...



#two {

    grid-area: green 1/2/2/3; 

    ...



#three {

    grid-area: yellow 2/1/3/2;

    ...



#four {

    grid-area: blue 2/2/3/3;

    ...

The grid-area element will "lock in" or assign a specific placement for each box. The area(s) count the lines of your boxes top/left/bottom/right based on the desired image. Note: your image shows 4 equally sized boxes, but your CSS code shows 2 square and 2 rectangular boxes. This code will work well with 4 squares, but you might have some editing for different shapes.

Next:
Add a CSS class for a container and slightly adjust the div class you currently have:

.grid-container {

    display: grid;

    grid-template areas: 'orange green yellow blue';

    grid-gap: 0;

    margin-left: auto;

    margin-right: auto;

    padding: 0;

    max-width: 1150px;

    position: center;  }



 .grid-container > div {

    padding 0;  

    ...

Then:
Add the container (or wrapper) div tag to your HTML code:

    <div class="grid-container">

        <div id="one">  </div>

        ...

    </div>

That should produce the desired results. Hope it helps!