css - 如何纠正div与标题重叠的问题

Question

编辑:添加了 jsFiddle:http://jsfiddle.net/gdHuh/

我的页面上有一个带有底部边框的标题。标题和边框之间有填充。搜索框 float 在标题区域的右侧，接触底部边框。它看起来像这样:

但是，当标题和搜索框文本太长时，部分标题文本会被搜索框隐藏:

这就是我希望它在这种情况下看起来像这样:

这是我的 HTML:

<div class="row">
    <div class="column column8">
        <h1>Internship Reviews &amp; Rankings</h1>
    </div>
    <div class="findTop column column8">
        <div class="greyShaded findTab">
            <img class="verticalBottom" src="images/blueMagnify.png"/> 
            <a>Find an Internship Program</a> 
            <img class="verticalTextTop" src="images/greyArrowheadRight.png"/>
        </div>
    </div>
</div>

和CSS:

/* More Specific CSS */    
.findTab{
    float: right;
    margin: 0px 5px;
    padding: 5px 10px;
    font-weight: bold;
    line-height: 24px;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background-color: #f5f5f5;
    font-family: "Helvetica Neue", arial, helvetica, sans-serif;
    font-size: 13px;
}
.findTop{
    border-bottom: 1px solid #ddd;
    margin-top: -23px;
}

/* More general CSS */
.row {
    clear: both;
    width: 100%;
    position: relative;
}
.column {
    margin: 0 15px;
    float: left;
    border: 0;
    padding: 0;
    position: relative;
}
.column8 {
    width: 610px;
}
h1{
    font-size: 28px;
    line-height: 32px;
    margin: 0px;
    padding: 0px;
    font-family: "Helvetica Neue", arial, helvetica, sans-serif;
    font-weight: bold;
}

如何更改 HTML 和 CSS 以使元素正确布局？

Answer 1

这是fiddle对于我的结果

为了避免添加我使用的另一个类

.row div:nth-of-type(1){
  width:300px;
  margin-right:-20px;
}

我还删除了 .column8 并将其替换为 .row div，因为在这种代码格式中，这是最合适的

编辑

另一种选择是保持所有代码相同，但添加

h1 {
  width:300px;
}

Fiddle

此选项似乎更接近您正在寻找的内容