HTML / CSS : Creating and positionning 5 blocs - html

Question

I am trying to positionning 5 blocs in my page.
I would like to have 3 columns in fact :
First column : Two blocs (Favorites and meetings)
Second column : (recents news and tweets)
Third column : Other favorites column
Like this :
But i have a problem for positionning the third column.
Here is my HTML code :
<div class="containerBloc" >
<div class="box-1">
<div class="box-menu"><img src="src/ui_dashboard/img/ic_action_users.png" id="imgIntoMenu"><span id="textMenu">Favorites</span></div>
</div>
<div class="box-2">
<div class="box-menu"><img src="src/ui_dashboard/img/ic_action_feed.png" id="imgIntoMenu"><span id="textMenu">Recent news</span></div>
</div>
<div class="box-5">
<div class="box-menu"><img src="src/ui_dashboard/img/ic_action_users.png" id="imgIntoMenu"><span id="textMenu">Favorites</span></div>
</div>
<div class="box-3">
<div class="box-menu"><img src="src/ui_dashboard/img/ic_action_calendar_month.png" id="imgIntoMenu"><span id="textMenu">Upcoming meetings</span></div>
</div>
<div class="box-4">
<div class="box-menu"><img src="src/ui_dashboard/img/ic_action_twitter.png" id="imgIntoMenu"><span id="textMenu">Tweets de</span></div>
</div>
</div>
And CSS :
.containerBloc {
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
margin-top: 150px;
}
.box-1, .box-2, .box-3, .box-4 {
float: left;
margin: 1%;
min-height: 150px;
box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #FFFFFF;
border: 1px solid #B0B0B0;
}
.box-1, .box-2 {
height: 200px;
}
.box-1, .box-3 {
width: 30%;
}
.box-2, .box-4 {
width: 60%;
}
.box-5 {
margin: 1%;
min-height: 150px;
box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #FFFFFF;
border: 1px solid #B0B0B0;
float : right;
height : 100%;
width : 40%;
}
.box-menu {
background-color: #EFEFEF ;
height : 40px;
color : #B0B0B0;
border-bottom: 1px solid #B0B0B0;
}
#imgIntoMenu {
margin-left : 10px;
margin-top : 4px;
}
#textMenu {
margin-left: 10px;
position: absolute;
margin-top: 13px;
}
My complete code is here : http://jsfiddle.net/mzV85/
Thanks a lot for your help.

Answer 1

This FIDDLE should get you going.there is some tydying up to do in the CSS code.
The point is to Use Divs to wrap your columns. To set there added widths to 100% and to float them to the left.
HTML:
<div class="containerBloc">
<div class="col">
<div class="box-1">
<div class="box-menu">
<img src="src/ui_dashboard/img/ic_action_users.png" id="imgIntoMenu" /> <span id="textMenu">Favorites</span>
</div>
</div>
<div class="box-2">
<div class="box-menu">
<img src="src/ui_dashboard/img/ic_action_feed.png" id="imgIntoMenu" /> <span id="textMenu">Recent news</span>
</div>
</div>
</div>
<div class="col">
<div class="box-3">
<div class="box-menu">
<img src="src/ui_dashboard/img/ic_action_calendar_month.png" id="imgIntoMenu" /><span id="textMenu">Upcoming meetings</span>
</div>
</div>
<div class="box-4">
<div class="box-menu">
<img src="src/ui_dashboard/img/ic_action_twitter.png" id="imgIntoMenu" /><span id="textMenu">Tweets de #__Erwan</span>
</div>
</div>
</div>
<div class="col">
<div class="box-5">
<div class="box-menu">
<img src="src/ui_dashboard/img/ic_action_users.png" id="imgIntoMenu" /><span id="textMenu">Favorites</span>
</div>
</div>
</div>
</div>
CSS:
.col{
float:left;
width:33%;
margin:0;
padding:0;
}
.containerBloc {
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
margin-top: 150px;
}
.box-1, .box-2, .box-3, .box-4 {
margin: 1%;
min-height: 150px;
box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #FFFFFF;
border: 1px solid #B0B0B0;
}
.box-1, .box-2 {
height: 200px;
}
.box-1, .box-3 {
width: 98%;
}
.box-2, .box-4 {
width: 98%;
}
.box-5 {
margin: 1%;
min-height: 150px;
box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #FFFFFF;
border: 1px solid #B0B0B0;
float : right;
height : 100%;
width : 98%;
}
.box-menu {
background-color: #EFEFEF;
height : 40px;
color : #B0B0B0;
border-bottom: 1px solid #B0B0B0;
}
#imgIntoMenu {
margin-left : 10px;
margin-top : 4px;
}
#textMenu {
margin-left: 10px;
position: absolute;
margin-top: 13px;
}

Answer 2

You should really be using a responsive grid system like Bootstrap.
However if I understand correctly you're just wanting to put together a three column layout, like this - http://jsfiddle.net/webbymatt/ngxA6/
<div class="container">
<div class="col-1">
<div class="child">
Favourites
</div>
<div class="child clearfix">
Meetings
</div>
</div>
<div class="col-2">
<div class="child">
Recent
</div>
<div class="child clearfix">
Tweets
</div>
</div>
<div class="col-3">
<div class="child">
Favourites
</div>
</div>
</div>

Answer 3

The layout is breaking because the percentage widths you are using add up to more than 100%. If you reduce the width of your columns it works.
http://jsfiddle.net/mzV85/15/
CSS:
.box-1, .box-3 {
width: 25%;
}
.box-2, .box-4 {
width: 50%;
}
.box-5 {
width : 19%;
}

Answer 4

Have Done a fiddle. Please check http://jsfiddle.net/mzV85/21/ . Please check the width of the containers properly.

Answer 5

Problem : your markup has box-1, box-2 and box-5 in one line.....calculate their combined width and it comes > 100%; that's why your third box is not aligning
see this demo http://jsfiddle.net/mzV85/10/ (aligned the box in one line,not did the complete designing)
.box-1, .box-2 {
height: 200px;
width:20%; /* do some changes here */
}
.box-1, .box-3 {
width: 30%;/* do some changes here */
}
Play around with the width and you will get it in one line when its combined width <=100%