Headings floating left and right

Hi!

I'm having a bit of trouble getting my floats to float in the right place. I have the following in HTML:

Code: Select all

<div id="header">
     
    <div id="headings">
        <h1>Nature photography in Yorkshire</h1>
         <h2>by Jonathan Mortimer</h2>
         
     </div>
     
 </div>

and this in my stylesheet:

Code: Select all

#header {
    width:900px;
    background: url(../images/cloudscape_banner.jpg) no-repeat top left;
    height: 120px;
    }   
    
#headings {
    width:900px;
    background: url(../images/ladybirds_cone.png) no-repeat bottom left;
    height: 120px;
    }     

#headings h1 {
    font: 32pt helvetica;
    color: #ffffcc;
    float: right;
    /* margin-left: 220px; */
    margin-right: 26px;
    margin-top: 10px;
    margin-bottom: 0px;
    text-shadow: black 2px 3px 2px;

    }
    
#headings h2 {
    font: italic normal 18pt helvetica;
    color: #ffffcc;
    float: right;
    margin-right: 30px;
    margin-top: 8px;    
    text-shadow: black 2px 3px 2px;

    }

Now for some odd reason the H2 subheading "by Jonathan Mortimer" floats to the top left in Firefox, but is OK in Safari. I've tried juggling them around but nothing seems to work. Any clues as to what's going on? This was working fine until very recently, can't remember what I did to make it go wobbly but I certainly wasn't working on the headings at the time

Add a clear: both; to the h2!

Code: Select all

#headings h2 {
    font: italic normal 18pt helvetica;
    color: #ffffcc;
    float: right;
    margin-right: 30px;
    margin-top: 8px;
    text-shadow: black 2px 3px 2px;
    clear: both;
    }

Wow thanks, that did the trick! Care to explain how that works or is it too complicated? Sometimes I get the feeling I may never understand these things, just code blind until something works

Sure I'll see if I can explain it.
The float property moves an element left or right. (In your case.. right). In the process, content below the float will move up and wrap around the float. So the next thing under the float will fill in the empty space ON THE LEFT.
If you put a clear: both; it's almost as if you have placed an imaginery line under the first float:right. The imaginery line fills up the entire width of the container, in this case headers.

header
------------------------------
header

If you float something to the left, it leaves empty space on the right.

To stop a float you use clear. The clear property tells an element not to wrap around a floated item. By clearning you force the next element below.

A clear left will drop below elements that are floated left but will still wrap around the right.

A clear right will drop below elements that are floated right but will still wrap around the left.

A clear both drops the element below both left and right floated elements.

So technically you could use clear: right;
but I told you clear: both; because I can never remember and I didn't want to take a chance!

Totally confused now?

EDIT: The words headers in the diagram should be moved over to the right but I can't make them move...darn..

By golly I think I actually understood most of that!

Way to go Jonny!
Isn't it addictive?