Positioning div's in html and CSS [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have 5 div's as follows:
<div class="centered" style="background-color:red;">top</div>
<div style="background-color:orange;">left</div>
<div style="background-color:yellow;">center</div>
<div style="background-color:green;">right</div>
<div class="centered" style="background-color:blue;">bottom</div>
I want to place the first one (with centered class) on the top-center, and the second (with "left" text), third (with "center" text) and the fourth (with "right" text) in one row in the center right below the top. Lastly, the fifth (with centered class) in the bottom center below the line of 3 div's.
I tried but it was just a waste of time. Can you help me with css?

Answer 1

Like this?
div {
height: 200px;
display: border-box;
}
.centered {
margin: 0 auto;
width: 33.33%;
}
.row {
}
.row div {
width: 33.33%;
float: left;
}
.row:after {
display: table;
content: ' ';
clear: both;
}
<div class="centered" style="background-color:red;">top</div>
<div class="row">
<div style="background-color:orange;">left</div>
<div style="background-color:yellow;">center</div>
<div style="background-color:green;">right</div>
</div>
<div class="centered" style="background-color:blue;">bottom</div>

Answer 2

you may want to use a framework with a grid such as Twitter Bootstrap: http://getbootstrap.com/ or Zurb Foundation: http://foundation.zurb.com/. These frameworks provide a 12 column grid to make div positioning easier to handle.
The following example is using twitter bootstraps grid to position div's in the manner you are speaking of:
<div class="container">
<div id="top" class="row">
<div class="col-md-2 col-md-offset-5">
<p>...content</p>
</div>
</div>
<div id="middle" class="row">
<div class="col-md-4">
<p>...content</p>
</div>
<div class="col-md-4">
<p>...content</p>
</div>
<div class="col-md-4">
<p>...content</p>
</div>
</div>
<div id="bottom" class="row">
<div class="col-md-2 col-md-offset-5">
<p>...content</p>
</div>
</div>
</div>
The "row" class will create a new row where the elements will be positioned sort of like hitting enter for a new line in a word document. the "col-md-2" is the bootstrap syntax for how many columns the element will take up out of the 12 column grid. Offsetting this column by 5 on both ends will subtract 10 from the number of columns and so the remaining two in the middle will be reserved for the element. This will position your div in the center. You mentioned that you wanted the second row divs to all be positioned together in the center. The code written above will give each div equal width to take up the whole length of the row across the screen. The container that is wrapped around the code will provide a padding around all of the content inside of it so it will not touch the edges of the window. I hope this helps.