float doesn't work as should - html

Question

Having problems with my code. Why .right_content falls under .left_content?
they both have float: left and .right_content text should adapt to screen width...
.content {
clear: both;
margin-bottom: 50px;
width: 100%;
}
.right_content {
float: left;
max-width: 600px;
}
.left_content {
background: blue;
float: left;
width: 250px;
height: 400px;
}
<div class="content">
<div class="left_content">
</div>
<div class="right_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus,
nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus
dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.
</div>
</div>

Answer 1

The right content has full width in your case. Try to give a width for it!
.content {
clear: both;
margin-bottom: 50px;
width: 100%;
}
.right_content {
float: left;
width: 350px;
}
.left_content {
background: blue;
float: left;
width: 250px;
height: 400px;
}
<div class="content">
<div class="left_content">
</div>
<div class="right_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus,
nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus
dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.
</div>
</div>
Tip: If you are using fixed width + variable width, this is not the approach. Use this:
.parent {padding-left: 100px; position: relative;}
.fixed {width: 90px; left: 5px; background: #fcc; position: absolute;}
.variable {background: #ccf;}
<div class="parent">
<div class="fixed">Fixed</div>
<div class="variable">Variable</div>
</div>

Answer 2

Try using percent widths on your left and right content divs: https://jsfiddle.net/cucgc5qh/
<div class="content">
<div class="left_content"></div>
<div class="right_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus, nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.</div>
</div>
.content {
clear: both;
margin-bottom: 50px;
width: 100%;
}
.right_content {
float: left;
width: 50%;
}
.left_content {
background: blue;
float: left;
width: 50%;
height: 400px;
}

Answer 3

The .right_content doesn't have a width. Try adding width:calc(100% - 250px)
.content {
clear: both;
margin-bottom: 50px;
width: 100%;
overflow:auto;
}
.right_content {
float: left;
width:calc(100% - 250px)
}
.left_content {
background: blue;
float: left;
width: 250px;
height: 400px;
}
<div class="content">
<div class="left_content">
</div>
<div class="right_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus,
nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus
dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.
</div>
</div>
Another approach is to forget floats and use table and table-cell. This gives you better browser compatibility as well.
.content {
clear: both;
margin-bottom: 50px;
width: 100%;
display:table;
}
.content> div{
display:table-cell;
vertical-align:top;
}
.left_content {
background: blue;
width: 250px;
height: 400px;
}
<div class="content">
<div class="left_content">
</div>
<div class="right_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus,
nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus
dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.
</div>
</div>

Answer 4

Just don't float the right element:
.content {
overflow: hidden;
margin-bottom: 50px;
width: 100%;
}
.right_content {
max-width: 600px;
}
.left_content {
background: blue;
float: left;
width: 250px;
height: 400px;
}
<div class="content">
<div class="left_content"></div>
<div class="right_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate leo non lacinia euismod. Praesent blandit arcu erat, sed feugiat ipsum vestibulum sit amet. Nulla tincidunt sodales sapien ut convallis. Etiam eget dui purus. Vivamus finibus,
nisi sed ullamcorper malesuada, leo urna dignissim ex, at elementum risus ligula eleifend mi. Cras tristique dolor nunc, id vestibulum lectus laoreet vel. Vivamus at neque et diam auctor porta. Cras efficitur velit sit amet quam pellentesque, luctus
dapibus nibh aliquam. Phasellus vulputate finibus mi in imperdiet. Vivamus nec lorem ultrices sem facilisis pulvinar.
</div>
</div>