When I have just 2 <div>
I want each one to have same width
but I want to make them smaller when I will have a 3rd <div>
to stay on same line.
But when I'll have a 4th <div>
, I will go back to first width
(same as when I have just 2 <div>
) and will have two lines, in each line 2 <div>
Do I need Javascript to perfom it ? any other way just using HTML/CSS ?
Here is my html and css for 3 div :
.bigBox{
width:100px;
height:50px;
background: red;
}
.A{
width: 40%;
height: 50%;
float: left;
background: blue;
margin-left:5px;
}
<div class="bigBox">
<div class="A a">
</div>
<div class="A b">
</div>
<div class="A c">
</div>
</div>