Float "edit" link to right of Heading (must keep heading tag block)

Question

Given the following html

<div class="module">           
            <div class="header">
                <h1>Test Heading</h1>
                <a href="">edit</a>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu lacus at augue tristique dignissim. Nunc vitae porta lorem. Nullam eu nunc sit amet arcu dictum convallis. Vestibulum quis purus quis sem rhoncus imperdiet eget at nisl. Fusce non metus libero, vel viverra purus. Quisque ullamcorper congue risus vel adipiscing. Quisque vehicula ante in quam malesuada at porta diam gravida. Aenean sagittis, ipsum eget egestas malesuada, turpis neque aliquam metus, lobortis congue ligula nisi quis purus. Integer nec dui et elit suscipit ultrices et sit amet enim. Nulla euismod commodo metus, eget luctus urna dignissim in.</p>
            </div>
        </div>

and the following css

body { font-family: Helvetica, Arial, "Lucida Sans Unicode", Tahoma, Verdana, Arial, Helvetica, sans-serif; }
      h1 { margin: 0; padding: 0; border-bottom: 3px solid #333333; color: #333333; font-size: 40px; font-weight: normal; letter-spacing: 0; line-height: 1.3em; }

      .module { }
       .module .header h1 { }
       .module .header a { }

I'm having a tough time figuring out how to float the "edit" link to the right of the h1 tag, but keeping the h1 tag as a block element so that it has its underline (border-bottom)

Can anyone offer me some advise ... done this before? Thank you in advance

Answer 1

There are different strategies to achieve this. You could either float a container to fix a float or use generated content to clear a float. I'll attempt to explain both w/ code. For both you can keep your markup, but need to move the underline from the h1 to the .header class. Then float the header to the left, edit to the right and fix the floats by floating the .header class as well. This technique has the disadvantage of depending on what comes after, but works for your isolated piece of code:

h1 {
    margin: 0;
    padding: 0;
    color: #333333;
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1.3em;
}

.header { border-bottom: 3px solid #333333; }
.module .header h1 { float: left; }
.module .header a { float: right; }
.module .header { float: left; width: 100%; }

The imho nicer solution is to use CSS-generated content to clear the opposing floats instead of floating the .header container. But be aware that this will cause trouble on less CSS capable browser versions.

h1 {
    margin: 0;
    padding: 0;
    color: #333333;
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1.3em;
}

.header { border-bottom: 3px solid #333333; }
.header:after { content: "."; display: none; clear: both; }
.module .header h1 { float: left; }
.module .header a { float: right; }
.module .header { width: 100%; }

For more information on the first method see Eric Meyer's article http://www.complexspiral.com/publications/containing-floats/. The second method is documented in http://www.positioniseverything.net/easyclearing.html.