SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS problem with floating element

    Hi,
    I am having a problem with something that looks to be really simple but i am a rookie at this. here is my simple html:

    Code HTML4Strict:
    <div class="subtitle">
    <img src="expand.gif" style="float:left" />TestTitle<img style="float:right" src="help.gif"/>
    <hr />
    </div>

    my 'subtitle' css class looks like this:
    Code CSS:
    .subTitle
    {
        overflow:auto;
        color: #78B0F2;
        padding-top: 8px;
        padding-bottom: 4px;
    }

    my problem is that my image 'help.gif' is breaking to a new line and not staying on the same line as the 'expand' image and the 'TestTitle' text, (the help image is actually covering the HR line beneath it). can someone explain how i can make it so that both images and text all stay on the same line, with the HR sitting beneath them?
    thanks so much in advance!!

    dw

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since you're floating the images you need to add clear: both to your hr to clear the floats and make it come beneath the images. When it comes to aligning the images and text, I would add a paragraph element around the text, give it a width and float it.
    Code:
    .subTitle
    {
        overflow:auto;
        color: #78B0F2;
        padding-top: 8px;
        padding-bottom: 4px;
    }
    
    hr {
        clear: both;
    }
    
    p {
        width: xxx;
        float: left;
        margin: 0;
        padding: 0;
    }
    Code:
    <div class="subtitle">
    <img src="expand.gif" style="float:left" /><p>TestTitle</p><img style="float:right" src="help.gif"/>
    <hr />
    </div>

  3. #3
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, that worked

    so just to try to understand more clearly, by setting a 'margin:0' on the P element tells the browsers to display the element 'inline' vs 'block' style.
    I noticed that if i took the margin property out, the P element would display on a new line ....?
    is that normal behavior ?

    thanks for shedding some light.

    Dw

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A paragraph element is a block element (a, span, em, strong, i, b etc are inline). I just added margin: 0; and padding: 0 to make sure that the default margins and padding where taken away so that they all lined up correctly (the new line you're referring to is actually the margin-top of the p element).

  5. #5
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •