how to align multiple divs using CSS - css

Question

i have a number containers that i want aligned. This is the code i have so far: jsfiddle
First of all, when i run this code from my machine, the "day-label" is double the size that it shows on jsfiddle. the next two ("max-points" and "close-points") are stacked on top of each other and are right text to "day-label", this is as i want it.
Now the next three containers i can't seem to get them lined up, the "points-totals" container i want to be like the "day-label" but to the right of the max and close points. then the next two "thirty-points" and "fifty-points" i want next to the totals.
They should all be on the same line but they're not all the same shape.
Does anyone know what i'm talking about or am i confusing the situation?
I think i'll be able to use "top:X" and "left:X" but i wanted to know if there was an easier way to get them all inline with each other? like the first three containers.
Thanks for the help.
This is a mock up of how i want it to look -

Answer 1

How's this jsFiddle example?
HTML
<div class="day-point-container">
<div class="result-headers">Title</div>
<div class="day-label"><h1>1<small>st</small></h1></div>
<div class="max-points">Max</div>
<div class="close-points">Close</div>
<div class="points-totals">Total</div>
<div class="thirty-points">30 points</div>
<div class="fifty-points">50</div>
</div>​
CSS
.day-point-container
{
width: 100%;
background-color: pink;
}
.result-headers
{
background-color: green;
}
.day-label
{
background-color: lime;
width: 10%;
height: 10%;
text-align: center;
float: left;
}
.max-points
{
background-color: blue;
width: 50%;
height: 5%;
}
.close-points
{
background-color: purple;
width: 50%;
height: 5%;
}
.points-totals
{
background-color: orange;
width: 20%;
height:10%;
float:right;
}
.thirty-points
{
background-color: red;
width: 10%;
float:right;
}
.fifty-points
{
background-color: gold;
width: 10%;
clear:right;
float:right;
}​

Answer 2

I'm not 100% sure what you're trying to achieve but you could try to use the float function in CSS, e.g float:lefthere's a link to W3schools page on float http://www.w3schools.com/cssref/pr_class_float.asp or if you just want them centered you could always try <center>

Answer 3

use this : fiddle
.day-point-container
{
width: 100%;
background-color: pink;
}
.result-headers
{
background-color: green;
}
.day-label
{
background-color: lime;
width: 10%;
height: 10%;
text-align: center;
float: left;
}
.max-points
{
background-color: blue;
width: 50%;
height: 5%;
}
.close-points
{
background-color: purple;
width: 50%;
height: 5%;
}
.points-totals
{
background-color: orange;
width: 20%;
height:10%;
float: left;
}
.thirty-points
{
background-color: red;
width: 10%;
float: left;
}
.fifty-points
{
background-color: gold;
width: 10%;
float: left;
display:inline;
float: left;
}
.clearfix {
clear: both;
}
<div class="day-point-container">
<div class="result-headers">Title</div>
<div class="day-label"><h1>1<small>st</small></h1></div>
<div class="max-points">Max</div>
<div class="close-points">Close</div>
<div class="points-totals">Total</div>
<div class="thirty-points">30 points</div>
<div class="fifty-points">50</div>
<div class="clearfix"></div>
</div>

Answer 4

Update with prettier code
Also- dude, what you look like you're trying to do is display tabular data
If that is the case, there's nothing wrong with using an actual table-- in fact, NOT doing so would be wrong.
html
<section class="container">
<header>
<h1 class="title">Title</h1>
</header>
<ul class="point-container">
<li class="day"><h1>1<span>st</span></h1></li>
<div class="points">
<li class="max">Max</li>
<li class="close">Close</li>
</div>
<div class="results">
<li class="totals">Total</li>
<li class="thirty-points">30 points</li>
<li class="fifty-points">50</li>
</div>
</div>
</section>
css
// ==================
// base
//
//
html{ font-size: 62.5%; }
body{
font-size: 1.6rem;
font: normal normal 100 1.6rem "Helvetica Neue", sans serif;
background-color: black;
}
.container{
width: 90%;
color: white;
margin: auto;
}
// ==================
// layout
//
//
body,
.container,
.points,
.results,
.point-container{
display: flex;
}
.points,
.container{
flex-flow: column;
}
.results{ flex-flow: row;}
.day,
.results li{
flex: 1;
}
.points,
.results{
flex:3;
}
.results li{
text-align: center;
}
// ==================
// colors
//
//
.title{ background-color: #008001; }
.day{ background-color: #00ff00; }
.max{ background-color: blue; }
.close{ background-color: purple; }
.totals{ background-color: orange; }
.thirty-points{ background-color: red; }
.fifty-points{ background-color: gold; }