CSS Float Overlap Issue

Question

Может ли кто-нибудь помочь с базовым выпуском HTML/CSS? У меня есть регулярный div с поплавком слева. Я хотел иметь h1 с границей, но он накладывается на float left div. Какие-нибудь советы? Пример кода, чтобы показать проблему ниже.

[EDIT: Вот изображение проблемы: http://anony.ws/i/2012/06/21/UCHvY.png. Я бы хотел, чтобы конечный результат просто позволил мне использовать синюю линию для h1, не перекрывая ее слева. Высота левого столбца является динамическим]

<style> 
.wrapper {width:600px;} 
.boxcolumn { 
      float:left; 
    width:150px; 
    border:1px red solid; 
    margin-right:12px; 
} 
h1 {border-bottom:1px #CCC solid;} 

<div class="wrapper"> 
<div class="boxcolumn"> 
Left Column is not a fixed height. Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a 
</div> 

<h1>Some Title Goes Here</h1> 
blah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah 

<h1>Some Title Goes Here</h1>Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a 
</div> 

Answer 1

Попробуйте это ... Ваш h1 тег также должен поплавка влево, и она должна иметь ширину на нем. Также он должен прибыть перед вашей колонкой коробки.

<style type="text/css"> 
.wrapper {width:600px;} 
.boxcolumn { 
    float:left; 
    width:150px; 
    border:1px red solid; 
    margin-right:12px; 
} 
h1 {border-bottom:1px #CCC solid;float:left;width:100%;} 
</style> 

<div class="wrapper"> 
<h1>Some Title Goes Here</h1> 
<div class="boxcolumn"> 
Left Column is not a fixed height. Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a 
</div> 


blah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah 
</div> 

Answer 2

Попробуйте сделать еще один DIV с заголовком и текстом и плавучие, что один рядом с ним:

<div class="wrapper"> 
    <div class="boxcolumn"> 
     Left Column is not a fixed height. Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a fixed height.Left Column is not a 
    </div> 

    <div class="title"> 
     <h1>Some Title Goes Here</h1> 
     blah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah 
    </div> 
</div> 

Вам необходимо установить ширину заголовка, хотя:

.title { 
     float:left; 
     width:400px; 
    } 

Answer 3

Есть несколько вариантов, которые вы могли бы попробовать.

Один из них обертывает ваш h1 и текст в новый div. Затем дайте это div a float: left; и width: 436px; (граница 600 - 150 - 12 - 2 * 1). Это гарантирует, что ваш контент обернут справа от boxcolumn и останется таким, даже если ваш контент длиннее, чем boxcolumn.

<div class="content"> 
<h1>Some Title Goes Here</h1> 
<p>blah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah</p> 
</div> 

Css:

.content{ float:left; width: 436px; } 

Полный пример можно увидеть here