SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to get fluid - getting overlapping text - can I have your advice ?

    Hello,

    I'm still away from finish but, I'm trying to build my first fluid layout. Unfortunately, I'm getting some headaches.

    If you narrow down your window here, and you look at the three columns at the bottom over the white background, you will notice that, at same point, the headings overlap over each other.

    http://tinyurl.com/8dtbv72

    Also, the same "effect" seems to happen to the gray button down the page. The text doesn't seem to go on the flow when you shrink the page.


    I'm not sure if this IS the best result we can get, and if we must use media queries from here, OR if it's still indeed something that needs to be done so that this, pretentious fluid layout could became indeed, a true fluid layout, before, start digging on those media queries.

    Please advice.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Yeah, text can't scale like you want on its own, so this would be a handy time to use @media, and set the font size to something smaller on a narrower screen. But the other (better) option is, at some point, to make the divs site on top of each other—again, using @media.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    As for the button, set display: inline-block; and remove the width. Then the button will just be as wide as it needs to be.

    Then get started with the media queries

    The first thing you might want to do is make the .mini-wrapper wider for smaller browser windows:
    Code:
    @media screen and (max-width: 60em) {
    	.mini-wrapper {
    		width: 90%;
    	}
    }

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both.

    As for the button, I wish not to have inline-block, due to IE7 bad behavior on that.

    Isn't there any other option, or should I conditional target that bad browser with display:inline; and zoom:1; ?

    What would you do ?

    Thanks again, and thanks for the tip related to media queries.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Regarding the button, I wouldn't use a % width on it. There's no point for something so small anyway. But I agree that inline-block would be a good option. Yes, you can provide that hack for IE7. Personally, I don't bother with it any more ... like I don't bother feeding my dead ancestors.


Tags for this Thread

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
  •