CODEWITHSUNDEEP
htmlcssalignment
Booba__2012
Booba__2012

Reputation: 153

How to align box in a row

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;}

Upvotes: 0

Views: 276

Answers (5)

Syed Shahzaib
Syed Shahzaib

Reputation: 1

.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

Upvotes: 0

Shafeeque
Shafeeque

Reputation: 2069

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.

Upvotes: 0

Benjamin
Benjamin

Reputation: 2670

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

Upvotes: 0

Alex Wilson
Alex Wilson

Reputation: 2419

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;
}

Upvotes: 2

Bir
Bir

Reputation: 812

you can add css like

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

Upvotes: 0

Related Questions