Skip navigation
broomeGirl
broomeGirl
Currently Being Moderated

Link to line up under the h2

Aug 6, 2012 2:46 AM

Hi, this image is a screenshot of a box that is doing my head in.  Unfortunately site not live, which I know makes it harder for you to help me.  But I will endeavour to be succinct.

 

The box is a div ..

#box1 {

    background-color:yellow;

    height:200px;

    padding:0 1em 0 0;}

link.png

 

The h2 tag has the following class assigned to it ..

 

.floatRighth2{

    float:right;

    width:240px;

    margin:0;

    padding:0;}

 

I am trying to get the link underneath (red) to sit underneath the h2 tag.

 

#linksContent #box1 p a{

    float:right;

    margin:0;

    padding:0;

    color:red;}

 

I have tried clears every which way but it wont budge. This is the html ..

 

<div id="box1">

<a href="http://aicwa.squarespace.com"><img src="images/links/Aust-Inst-of-Conveyancing.jpg" width="144" height="134" alt="Australian Institute of Conveyancing" /></a>

<h2 class="floatRighth2">Australian Institute of Conveyancers WA Division</h2>

<p><a href="http://aicwa.squarespace.com/">http://aicwa.squarespace.com/</a>    </p>

</div><!--END of box 1-->

 

Really appreciate your time, thanks!

558 Views   7 Replies   Latest reply: broomeGirl, Aug 14, 2012 6:35 AM
 
Replies
  • osgood_
    Currently Being Moderated
    1. osgood_,
    Aug 6, 2012 2:57 AM   in reply to broomeGirl
    Report

    Try the below code:

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Untitled Document</title>

    <style>

    #box1 {

    background-color:yellow;

    height:200px;

    padding:0 1em 0 0;}

     

    #box1 img {

    float: left;

    }

       

    .floatRighth2{

    float:right;

    width:240px;

    margin:0;

    padding:0;}

     

    #box1 p {

    width: 240px;

    float: right;

    margin:0;

    padding:0;

    clear: right;

        }

       

    #box1 a {

    color: red;

        }

    </style>

    </head>

     

    <body>

     

    <div id="box1">

     

    <a href="http://aicwa.squarespace.com"><img src="images/links/Aust-Inst-of-Conveyancing.jpg" width="144" height="134" alt="Australian Institute of Conveyancing" /></a>

     

    <h2 class="floatRighth2">Australian Institute of Conveyancers WA Division</h2>

     

    <p><a href="http://aicwa.squarespace.com/">http://aicwa.squarespace.com/</a>    </p>

     

    </div><!--END of box 1-->

    </body>

    </html>

     
    |
    Mark as:
  • broomeGirl
    Currently Being Moderated
    2. broomeGirl,
    Aug 6, 2012 3:02 AM   in reply to broomeGirl
    Report

    All good! Yay!  Fixed it, forgot to float the images.

     
    |
    Mark as:
  • broomeGirl
    Currently Being Moderated
    3. broomeGirl,
    Aug 6, 2012 5:51 AM   in reply to osgood_
    Report

    Thank you soooo much

     
    |
    Mark as:
  • broomeGirl
    Currently Being Moderated
    4. broomeGirl,
    Aug 14, 2012 5:47 AM   in reply to broomeGirl
    Report

    Hi Thought I had this all fixed but it appears not.  The first screenshot shows the page in firefox

     

    Screen shot 2012-08-14 at 10.07.45 PM.png

     

    the second screenshot is from Adobe Browser Lab using internet explorer 9

     

    Screen shot 2012-08-14 at 10.08.26 PM.png

     

    Why do the h2 tags look a completely different size and font and also why doesnt the link in the first box line up with the h2 tags like in every other box.  I have been all over my code and can find no difference for box1 as opposed to all the other boxes, ie box2, box3 etc.

    Site is:

     

    http://kimberleypropertysettlements.com.au/links.html

     

    I would really appreciate learning how to fix this.  Thanks so much for your time.

     
    |
    Mark as:
  • broomeGirl
    Currently Being Moderated
    5. broomeGirl,
    Aug 14, 2012 5:52 AM   in reply to broomeGirl
    Report

    Actually sorry forgot to upload the revised code and links are now floated to the left.  Except for box 1 link which seems to have a mind of its own.

     

    Screen shot 2012-08-14 at 10.19.31 PM.png

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    6. osgood_,
    Aug 14, 2012 6:21 AM   in reply to broomeGirl
    Report

    OhDer wrote:

     

    Hi Thought I had this all fixed but it appears not.  The first screenshot shows the page in firefox

     

    Screen shot 2012-08-14 at 10.07.45 PM.png

     

    the second screenshot is from Adobe Browser Lab using internet explorer 9

     

    Screen shot 2012-08-14 at 10.08.26 PM.png

     

    Why do the h2 tags look a completely different size and font

     

    http://kimberleypropertysettlements.com.au/links.html

     

     

     

    When using shorthand css you have to observe strict rules as to the order of the attributes: The font-family must always go at the end and the size must come directly before it:

     

     

    h2 {  font: bold 2.4em "Palatino Linotype", "Book Antiqua", Palatino, serif; margin:0;  padding:0; }

     

     

    You'll probably want to re-adjust the size now as 2.4ems is too big.

     

     

     

    Remove float: right; from 'box1 p' thats why your link is not sitting flush left under the heading:

     

     

    #box1 p {

    width: 240px;

    float: right; /* REMOVE THIS */

    margin:0;

    padding:0;

    clear: right;}

     
    |
    Mark as:
  • broomeGirl
    Currently Being Moderated
    7. broomeGirl,
    Aug 14, 2012 6:35 AM   in reply to osgood_
    Report

    Wow you are absolutely awesome !!!! Thanks so much.  I did not know about the order of bold versus size .. I did know that the font family name went at the end .. life is always learning!!

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points