How to put three divs next to each other in HTML? [duplicate] - html

Question

This question already has answers here:
CSS two divs next to each other
(13 answers)
Closed 7 years ago.
Hello I'm trying to display 3 div elements inline with each other and does not resize even if you change the size of the browser how do I go about it?
How it should look like:
Code:
body {}
#wrap {
width: auto;
margin: 0 auto;
border: 0px solid;
height: 200px;
display: block;
}
#one {
width: 40%;
float: left;
background: red;
}
#two {
background: yellow;
}
#three {
width: 40%;
float: inherit;
background: blue;
}
<div id="wrap">
<div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

Answer 1

Check this fiddle
#wrap::after {
display: block;
height: 0px;
clear: both;
float: none;
}
#wrap div {
float: left;
word-break: break-all;
}
#one {
width: 40%;
background-color: red;
}
#two {
width: 20%;
background-color: yellow;
}
#three {
width: 40%;
background-color: blue;
}
<div id="wrap">
<div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

Answer 2

#two and #three(inherits from parent which is none) do not have float:left and you should give width to those element. For example, here I give width:32% to all div elements(#one, #two, #three).
.fl-l
{
float:left;
word-break: break-all;
width: 32%;
}
#wrap{
width:auto;
margin:0 auto;
border:0px solid;
height:200px;
display:block;
}
#one {
background:red;
}
#two {
background:yellow;
}
#three {
background:blue;
}
<div id="wrap">
<div id="one" class="fl-l"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="two" class="fl-l"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="three" class="fl-l">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

Answer 3

To fix the width, set an absolute value to the wrap element.
body {}
#wrap {
width: auto;
margin: 0 auto;
border: 0px solid;
height: 200px;
word-break: break-all;
font-size: 0;
}
#wrap > div {
height: 100%;
display: inline-block;
overflow: auto;
font-size: 14px;
}
#one {
width: 40%;
background: red;
}
#two {
width: 20%;
background: yellow;
}
#three {
width: 40%;
background: blue;
}
<div id="wrap">
<div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
<div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>