Search code examples
csspositioning

How to correct div overlapping the title

EDIT: Added jsFiddle: http://jsfiddle.net/gdHuh/

On my page there is a title with a bottom border. There is padding between the title and the border. Floating to the right on the title area, touching the bottom border, is a search box. Here is what it looks like:

enter image description here

However, when the title and search box text are too long, then part of the title text is hidden by the search box:

enter image description here

This is what I want it to look like in cases like this:

enter image description here

Here is my 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>

And 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;
}

How can I change the HTML and CSS so that the elements will be laid out correctly?

Solution

  • Here is the fiddle for my result

    To avoid adding another class I used

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

    I also removed the .column8 and replaced it with .row div, because in this code format, that is what is most appropriate

    Edit

    Another alternative would be to keep all the code the same, but add

    h1 {
  width:300px;
}

    Fiddle

    This option seems to be closer to what you are looking for