How to align box in a row

Question

Here is what I have now :

enter image description here

But I want something more like this :

enter image description here

So here is my code :

HTML :

    <div class = "gros_box">    <!-- gros box -->

    <div class = "titre_num_serie"> N° Serie : 
    </div> <!-- end titre n° serie -->

    <div class = "model_box"> Info Basic : 
    </div> <!-- end model box -->

    <div class = "compo_box"> Composant : 
    </div> <!-- end compo box -->

    <div class = "autre_box"> Autres Info : 
    </div> <!-- end autre info -->

</div> <!-- end du gros box -->

CSS :

.gros_box{
padding-top : 20px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 50px;

/*width: 850px;*/
border: 5px solid navy;
margin: 25px;
}

.titre_num_serie{

padding-top : 10px;
padding-right : 10px;
padding-left : 10px;
padding-bottom : 10px;

width: 200px;
border: 5px solid navy;
margin:0 auto;

text-align : center;

}

.model_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;

width: 350px;
border: 5px solid navy;
margin: 25px;
}

.compo_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;

width: 350px;
border: 5px solid navy;
margin: 25px;
}

.autre_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;

width: 350px;
border: 5px solid navy;
margin: 25px;
}

I tried also to put the 3 boxes in a span, tried with a inline, tried to play with the width/margin/padding but I can't really get what I'm looking for :/

EDIT My Solution

.gros_box{
padding-top : 20px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 50px;
border: 5px solid navy;
margin: 25px;
}

.titre_num_serie{

padding-top : 10px;
padding-right : 10px;
padding-left : 10px;
padding-bottom : 10px;
width: 200px;
border: 5px solid navy;
margin:0 auto;
text-align : center;

}

.model_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;
width: 25%;
height : 350px;
border: 5px solid navy;
margin: 25px;

}

.compo_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;
width: 30%;
height : 350px;
border: 5px solid navy;
margin: 25px;

}

.autre_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;
width: 25%;
height : 350px;
border: 5px solid navy;
margin: 25px;

}

.model_box ,.compo_box,.autre_box{display: inline-block;}
.autre_box{margin-right: 0;}

I would look up flexbox, if you don't need great browser support. — Jacob Lauritzen, Sep 10 '14 at 09:06
I wouldn't use the `°` in the `titre_n°_serie` class name. As it's not a standard `[a-z0-9]` character, it will make it more difficult for anyone, possibly even yourself to reference at a later date. — Novocaine, Sep 10 '14 at 09:07
I tried also with a "float : left" for my ".model_box" but it did nothing :/ — Booba__2012, Sep 10 '14 at 09:07
@Jacob Lauritzen : The flexbox stuff doens't look very easy to understand. I'm really looking for a basic thing, I'm just a beginner. — Booba__2012, Sep 10 '14 at 09:12
@Novocaine Not true, while it is non-ASCII it is still a valid character (Unicode character) can be used for [CSS identifiers](http://stackoverflow.com/questions/2812072/allowed-characters-for-css-identifiers) — Hashem Qolami, Sep 10 '14 at 09:19
@HashemQolami I didn't say it was invalid - just more difficult to use. — Novocaine, Sep 10 '14 at 09:20
@Novocaine `it's not a standard [a-z0-9] character` - you said; Please define the *standard*. — Hashem Qolami, Sep 10 '14 at 09:21
@HashemQolami the `[a-z0-9]` that I wrote is defining the standard characters in a regular expression. — Novocaine, Sep 10 '14 at 09:22

score 2 · Answer 1 · answered Sep 10 '14 at 09:11

rty this code DEMO

.gros_box{
padding-top : 20px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 50px;
  text-align:center;

/*width: 850px;*/
border: 5px solid navy;
margin: 25px;
}

.titre_n°_serie{

padding-top : 10px;
padding-right : 10px;
padding-left : 10px;
padding-bottom : 10px;

width: 200px;
border: 5px solid navy;
margin:0 auto;

text-align : center;

}

.model_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;
  display:inline-block;

/*width: 350px;*/
border: 5px solid navy;
margin: 25px;
}

.compo_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;
  display:inline-block;

/*width: 350px;*/
border: 5px solid navy;
margin: 25px;
}

.autre_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;
  display:inline-block;

/*width: 350px;*/
border: 5px solid navy;
margin: 25px;
}

When I do your code, it removed me all my box border and the paddings of my "gros_box" and "titre_num_serie" :/ — Booba__2012, Sep 10 '14 at 09:16
it means that something is wrong doing .... there is only a sketch in the future you yourself can set the height and width, and even if you want to be taken into account and that the boarders that need to add box-sizing: border-box; — Alex Wilson, Sep 10 '14 at 09:18

score 0 · Accepted Answer · answered Sep 10 '14 at 09:10

0

you can add css like

.model_box ,.compo_box,.autre_box{display: inline-block;}
.autre_box{margin-right: 0;}

answered Sep 10 '14 at 09:10

Bir

794
1
15
31

Thanks ^^ After a mix with all the answers I get, I managed to get what I wanted :D – Booba__2012 Sep 10 '14 at 09:27

score 0 · Answer 3 · answered Sep 10 '14 at 09:13

You can change the style as follows to achieve your requirements

.gros_box {
    padding-top : 20px;
    padding-right : 50px;
    padding-left : 50px;
    padding-bottom : 50px;
    /*width: 850px;*/
    border: 5px solid navy;
    margin: 25px;
}
.titre_n°_serie {
    padding-top : 10px;
    padding-right : 10px;
    padding-left : 10px;
    padding-bottom : 10px;
    width: 200px;
    border: 5px solid navy;
    margin:0 auto;
    text-align : center;
}
.model_box, .compo_box, .autre_box {
    display: inline-block;
    margin: 20px 10px;
    height: 300px;
}
.model_box {
    width: 25%;
    border: 5px solid navy;
}
.compo_box {
    width: 30%;
    border: 5px solid navy;
}
.autre_box {
    width: 25%;
    border: 5px solid navy;
}

DEMO

I don't know why but my paddings and box border dissapear for "gros_box" and "titre_num_serie" with your code too :/ — Booba__2012, Sep 10 '14 at 09:22

score 0 · Answer 4 · answered Sep 10 '14 at 09:15

0

I suggest you to use Bootstrap CSS, you don't have to worry about these box arrangement nav bar and also it is responsive. Work perfectly on all screen size including mobile, Tablets. It will make easier to design any pages.

answered Sep 10 '14 at 09:15

Shafeeque

2,039
2
13
28

I'm using Boostrap but not everywhere because I don't understand all the time how it works. – Booba__2012 Sep 10 '14 at 09:19

score 0 · Answer 5 · answered Sep 10 '14 at 09:16

.gros_box{
padding-top : 20px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 50px;

/*width: 850px;*/
border: 5px solid navy;
margin: 25px;

float:left;
}

.titre_num_serie{

padding-top : 10px;
padding-right : 10px;
padding-left : 10px;
padding-bottom : 10px;

width: 200px;
border: 5px solid navy;
margin:0 auto;

text-align : center;

}

.model_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;

width: 230px;
height:250px;
border: 5px solid navy;
margin: 25px;
float:left;
}

.compo_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;

width: 230px;
border: 5px solid navy;
margin: 25px;

float:left;
height:250px;
}

.autre_box{
padding-top : 10px;
padding-right : 50px;
padding-left : 50px;
padding-bottom : 15px;

width: 230px;
border: 5px solid navy;
margin: 25px;

height:250px;
float:left;
}

use this css

How to align box in a row

5 Answers5