SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy container problem with position relative

    Afternoon guys!

    I have a problem trying to float <h3> within a div.
    Here: http://www.bluecrushdesign.co.za/sitepoint/home.html

    - have a look at the "restaurants" and "accommodation" divs under discover.
    Client wants heading floated right within these containers.

    It works fine untill you resize the browser window smaller (to 1024px)
    (it has to work on different sizes im coding for this as well)

    The "restaurants" and "accommodation" headings juts out of the block to the right.
    I want to keep these contained in the block

    Anyone know what I am doing wrong?

    Also, at this width the layout of "products" and "travel" gets messed up and i cannot figure out why!
    The code is exactly the same for all the blocks.
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    What i recommend you do is give you .discovercont selectors a relative position and your h3 elements an absolute position as currently you will have a hard time aligning things due the static widths and positions you have set.

  3. #3
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there,
    I have tried that,
    but then the h3 elements dont float to the right, they float to the left

    The text inside the h3 needs to expand from the right as well,
    (starting from right inside border of discover cont element)

    ie the headings may have different character counts.. some are 10 characters some are 7
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    The problem is that you have fixed-width images in the discovercont divs, but the divs expand and contract because they have a % width.

    One thing you could do is float the images right, so that the text is always over the image.

    To stop the snagging problem, it's a good idea to get rid of float: left and use display:inline-block instead:

    Code:
    .discovercont {
      display:inline-block;
      float: left;
    }
    
    .discovercont img {
      float: right;
    }

  5. #5
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi there,
    that worked and it fixed the products/travel alignment issue..

    how does the text fall over the image if its the image that is floated right?

    Thankyou so much!!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by escapedf View Post
    how does the text fall over the image if its the image that is floated right?
    If you stretch the browser wider, the container gets wider, and the text sticks to the right of the container ... but the image has a fixed width, and naturally sits to the left of the container ... so eventually the text moves off the image. If you float the image to the right of the container, it always stays together with the text. Try it and see.

  7. #7
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok ..check this out..
    http://www.bluecrushdesign.co.za/sitepoint/home.html

    i tried it for the business blocks on the page
    (where it says business showcase - blue blocks)

    if you make the browser window smaller - gradually -
    you will see that the headings pop out and do not stay contained
    ie "jays shop" ends up being above the blue block

    I added this to the css:
    .business{
    display: inline-block;
    }

    .business img{
    float: right;
    }

    what did i miss?
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by escapedf View Post
    ok ..check this out..
    http://www.bluecrushdesign.co.za/sitepoint/home.html

    i tried it for the business blocks on the page
    (where it says business showcase - blue blocks)

    if you make the browser window smaller - gradually -
    you will see that the headings pop out and do not stay contained
    ie "jays shop" ends up being above the blue block

    I added this to the css:
    .business{
    display: inline-block;
    }

    .business img{
    float: right;
    }

    what did i miss?
    I would place them absolutely as already mentioned.

    e.g.
    Code:
    .business{position:relative;}
    .business h3{
    position:absolute;
    right:0;
    bottom:0;
    }
    They will then always stick together and expand from the right and bottom up as required


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
  •