float не работает, как следует

Question

Проблемы с моим кодом. Почему. Right_content попадает под .left_content? они оба имеют поплавок: левые и .right_content текст должен адаптироваться к ширине экрана ...

.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

Права содержания имеет полную ширину в вашем случае. Постарайтесь дать ему ширину!

.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>

---

Совет: Если вы используете фиксированную ширину + переменную ширину, это не подход. Используйте это:

.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

.right_content не имеет ширину. Попробуйте добавить 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>

Другой подход заключается забыть поплавки и использовать table и table-cell. Это дает вам лучшую совместимость с браузером.

.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 3

Попробуйте использовать процентов ширины на левой и правой дивы содержания: 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 4

Просто не всплывают правильный элемент:

.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>