CSS div align horizontal in same line - html

Question

Hi I have use CSS to positioning my div box and this is my result:
-------
div i
box1 i
-------
----------
i div i
i box2 i
----------
-------
i div
i box3
-------
I'm sorry that I was unable to upload an image becuz my reputation point is just 2 only, Ok let's continue, the result above I get is breaking each div box into new line but I don't want to be like that, the result I want is align the 3 div boxes into same horizontal line like this:
------ --------- ------
i i i i
i i i i
------ --------- ------
this is my CSS code, can someone correct my mistake?
#divbox1{
display: flex;
height: auto;
width: 40%;
margin-top: 5%;
margin-left: -25%;
position: relative;
border-style: solid;
border-color: #888888;
}
#divbox2{
display: flex;
height: auto;
width: 60%;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
position: relative;
border-style: solid;
border-color: #888888;
}
#divbox3{
display: flex;
height: auto;
width: 40%;
margin-top: 5%;
margin-left: 85%;
position: relative;
border-style: solid;
border-color: #888888;
}
Addition point: I want to show 20% display of the the divbox1 and 3 only that's why im using -% margin

Answer 1

#divbox1{
float:left;
height: 50px;
width: 10%;
position: relative;
border-style: solid;
border-color: #888888;
}
#divbox2{
float:left;
height: 50px;
width: 50%;
position: relative;
border-style: solid;
border-color: #888888;
}
#divbox3{
float:left;
height: 50px;
width: 20%;
position: relative;
border-style: solid;
border-color: #888888;
}
<div id='divbox1'></div>
<div id='divbox2'></div>
<div id='divbox3'></div>
Don't use
display:flex;
Instead just go
float:left;
in each of the boxes. And play around with the widths, you might need to lessen the values a little bit. and get rid of those margins.

Answer 2

You are using display:flex; wrong. It needs to be applied to a parent container to work the way you are expecting it to. You'll need to add an extra div encasing the whole thing like this:
<div id="group">
<div id="divbox1"></div>
<div id="divbox2"></div>
<div id="divbox3"></div>
</div>
After doing that, you will need to remove display:flex; from the inner divs. And add it to the grouping div. The resulting CSS should look something like this:
#group{
display:flex;
width:100%;
}
#divbox1{
flex:4;
margin-top: 5%;
margin-left: -25%;
position: relative;
border-style: solid;
border-color: #888888;
}
#divbox2{
flex:6;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
position: relative;
border-style: solid;
border-color: #888888;
}
#divbox3{
flex:4;
margin-top: 5%;
margin-left: 85%;
position: relative;
border-style: solid;
border-color: #888888;
}
Adding the flex:4; or flex:6; to each inner div is basically telling the flexbox what size you want your divs in relation to each other. Then, by default, flexbox will fit them to the width of the screen unless you have things like min-width on your divs.
Hope I helped. Cheers.

Answer 3

Is this were you looking for..?
.container {
width: 960px; /* define your container width */
}
.box {
width: 30%; /* whatever width */
height: 200px; /* whatever height */
background: #ccc;
margin: 30px 1%;
float: left;
}
<div class="container">
<div class="box box1">
<!-- your content goes here -->
</div>
<div class="box box2">
<!-- your content goes here -->
</div>
<div class="box box3">
<!-- your content goes here -->
</div>
</div>