Why two float divs are standing one under another? - html

Question

Why is the second div going under the first? Both of them are "float" elements. When I set a width of the second div, all works well. But I expect these two divs are being located to one row.
.one {
background-color: green;
float: left;
border: 1px solid green;
}
.two {
float: left;
background-color: red;
border: 1px solid red;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<div class="one">Menu</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>

Answer 1

This is because you didn't define the width's of the floating elements. If you define a max-width, say 50%, they will no longer be on the same line. I recommend giving max-width in contrast to width because, I believe you don't want to give the elements, a static width. Plus, they should be flexible to take as much as space they want, unless they shouldn't mess up with one another, which happens after 50%.
.one {
background-color: green;
float: left;
border: 1px solid green;
max-width: 50%;
}
.two {
float: left;
background-color: red;
border: 1px solid red;
max-width: 50%;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<div class="one">Menu</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>

Answer 2

You can use flex instead float.
Add display: flex; for a container. And flex: 0 0 auto; for the first div and flex: 1 1 auto; for the second. flex: 0 0 auto; means that element will take as much space as needed. flex: 1 1 auto; means that element will take all available space.
.container {
display: flex;
}
.one {
flex: 0 0 auto;
background: red;
}
.two {
flex: 1 1 auto;
}
<div class="container">
<div class="one">Menu</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>
</div>

Answer 3

You can just give them some width options in %, or pixels using calc CSS functions, something like this...
.one {
background-color: green;
float: left;
border: 1px solid green;
display: block;
width: 10%;
}
.two {
width: 70%;
float: left;
background-color: red;
border: 1px solid red;
display: block;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<div class="one">Menu</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>

Answer 4

Flexbox is what you really want I think, float is great but always felt like a hack as opposed to a real solution.
You can use flexbox across all browsers, IE8 can't handle it but that's not a supported browser anymore. I suggest you read up on it on w3schools they generally have quite nice tutorials.
.flex-container {
display: flex;
}
.one,
.two {
padding: 5px;
}
.one {
background-color: green;
border: 1px solid green;
}
.two {
background-color: red;
border: 1px solid red;
}
html,
body {
margin: 0;
}
<div class="flex-container">
<div class="one">Menu</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>
</div>
As to why it's was happening with float, unless you say otherwise anything display block will take up the entire space allotted, which is 100%, with one of the divs taking up 100% there is no room for the other one on the same line.
You could have given it a set width, or changed the display to inline and removed the float left from .two (though that would have been a little odd looking).
.one {
float: left;
background-color: green;
border: 1px solid green;
}
.two {
display: inline;
background-color: red;
border: 1px solid red;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<div class="one">Menu</div>
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>