SitePoint Sponsor

User Tag List

Results 1 to 22 of 22

Thread: Float problem

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float problem

    Hello,

    I am currently being defeated by some floats, they don't want to line up in 3's and don't want to clear the left nav. I have tried changing percentages, used a clearfix, tried a nth-child, defined a height and others. Any suggestions are appreciated. The link

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You are better off grouping all those bits on the right into one, right-floated div. If some are taller than the others, then display: inline-block is better than using float. All of those <section> elements are pointless, though. I'd remove them and just use the divs.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you!

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, floats for layouts should only be reserved for very special circumstances. Just make them inline-blocks and get rid of the spacing in between by adding "word-spacing: -1em" to the parent and "word-spacing: normal" to the children. There are other ways to get rid of the spaces, but this one is my favorite because it doesn't require weird markup and you can still use em/% font sizes.

    Like ralph.m said, using inline-blocks has the extra benefit of aligning all the elements to the top with "vertical-align: top".

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tip. I tried to display in inline, but it ignores the width and height percentage of the photo. I'm actually back to square one, because adding a new photo screwed up the flow again. Plus I need to clear the left nav.

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, no, not inline. Inline-block. It allows elements to be displayed next to one another like inline elements, but you can set height/width/margins just like block elements.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rjfec View Post
    Thanks for the tip. I tried to display in inline, but it ignores the width and height percentage of the photo. I'm actually back to square one, because adding a new photo screwed up the flow again. Plus I need to clear the left nav.
    Have you considered display:table-cell? Acts like a table cell. Easy vertical alignment and it should help keep flow.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ha.. craziness. Thanks for pointing that out. I overlooked it or just need to step away for a few.. cheers!

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, but I will try it or at least read about it. Thanks!

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rjfec View Post
    Nope, but I will try it or at least read about it. Thanks!
    The only thing I feel like I should mention is that out of all the main browsers out now, IE7 and down don't support it .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You both are brilliant. Thanks for everything.
    IE7 and down don't support it
    my opinion on that is they should upgrade

  12. #12
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    The document is also structured funny.

    #1 and as an aside (PUN!!!!)
    Code:
    <aside>
    <ul>
    <li><a href='http://cityskylines.org/continent/africa/?tdo_tag=egypt' class='tag-link-16' title='2 topics' rel="tag" style='font-size: 1em;'>Egypt</a>
    <a href='http://cityskylines.org/continent/africa/?tdo_tag=morocco' class='tag-link-12' title='2 topics' rel="tag" style='font-size: 1em;'>Morocco</a>
    <a href='http://cityskylines.org/continent/africa/?tdo_tag=south-africa' class='tag-link-14' title='3 topics' rel="tag" style='font-size: 1.5em;'>South&nbsp;Africa</a></li>
    </ul>
    </aside>
    would be better written as:

    Code:
    <nav>
    <ul>
    <li><a href='http://cityskylines.org/continent/africa/?tdo_tag=egypt' class='tag-link-16' title='2 topics' rel="tag" style='font-size: 1em;'>Egypt</a></li>
    <li></li><a href='http://cityskylines.org/continent/africa/?tdo_tag=morocco' class='tag-link-12' title='2 topics' rel="tag" style='font-size: 1em;'>Morocco</a></li>
    <li><a href='http://cityskylines.org/continent/africa/?tdo_tag=south-africa' class='tag-link-14' title='3 topics' rel="tag" style='font-size: 1.5em;'>South&nbsp;Africa</a></li>
    </ul>
    </nav>
    You may want to reconsider giving S.Af. a size of 1.5em. If what you want is for that text to be bigger but wrap then you can give the NAV tag an explicit width ( this will help with floating, more on that later), if what you want is for it to fit on the same space(!??) then it calculates to .75em or so.

    But really you should EVER use inline CSS!!!

    Back to floats/structuring...
    It seems to me, that what you have is a list of countries should you should be wrapping them in an LI not a DIV (this would also save you from having to have class on the DIV!

    Code:
    <ul class="countryEntry""
    		<li>
    		
    			<a href="http://cityskylines.org/durban/"><img width="300" height="200" src="http://cityskylines.org/wp-content/uploads/2012/05/ciudad-durban-stadt-south-african-skyline-300x200.jpg" class="attachment-medium wp-post-image" alt="City of Durban, South Africa" title="City of Durban, South Africa" /></a>
    
    			<h2><a href="http://cityskylines.org/durban/">Durban</a><br />South Africa</h2>
    			
    		</li>
    
    		<li>
    		
    			<a href="http://cityskylines.org/city-of-casablanca/"><img width="300" height="199" src="http://cityskylines.org/wp-content/uploads/2012/05/ciudad-casablanca-city-in-morroco-300x199.jpg" class="attachment-medium wp-post-image" alt="City of Casablanca, Morroco" title="City of Casablanca, Morroco" /></a>
    			<h2><a href="http://cityskylines.org/city-of-casablanca/">City of Casablanca</a><br />Morocco</h2>
    			
    		</li>
    				
    </ul>
    Now you can float the UL AND NAV.. giving each a width as desired for the layout and float ( lets say float:left) each LI with width of 30% or so ( calculating the gutter space that you want to leave between items. That alone should cause it to wrap/scale fluidly.

  13. #13
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm that is strange about the <li> and the inline css. I never noticed that, must be done by the plugin. Thanks for pointing that out and the pointers as well. Looks like I got so work to be done. Thanks for checking it out and critiquing.

  14. #14
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Keep in mind, that UL just makes more semantic sense. it's funny about these WP plug ins, they are usually LIs themselves, yet generate DIVS for list.

    I just meant that it would make more semantic sense and cleaner code. If you cant get around the plug in you can still WRAP all the DIV in another DIV as if it were a UL and achieve the same thing.

  15. #15
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree and I try to be semantic as possible, but get carried away sometimes. I'm glad you pointed those things out and I am working on the plugin now. Im not sure why each link is not wrapped in its own <li> that is strange.

    Thanks again.

  16. #16
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the culprit. Now I just got to sort it out.

    Code:
    $tag = str_replace(' ', '&nbsp;', esc_html( $tag ));
    		$a[] = "<a href='$tag_link' class='tag-link-$tag_id' title='" . esc_attr( sprintf( __('%d topics'), $count ) ) . "'$rel style='font-size: " .
    			( $smallest + ( ( $count - $min_count ) * $font_step ) )
    			. "$unit;'>$tag</a>";
    	}
    
    	switch ( $format ) :
    	case 'array' :
    		$return =& $a;
    		break;
    	case 'list' :
    		$return = "<ul class='wp-tag-cloud'>\n\t<li>";
    		$return .= join("</li>\n\t<li>", $a);
    		$return .= "</li>\n</ul>\n";
    		break;
    	default :
    		$return = join("\n", $a);
    		break;
    	endswitch;

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    What's needing to be sorted out with that PHP? It echos an anchor with inline CSS, and echos out the list.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #18
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan. I figured out how to remove the inline css, but have yet to figure out how to close off each anchor with an </li> instead of it wrapping all the anchors in one <li>

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Head on over to the PHP forum for that. PHP problem --> PHP forum .

    I understand case/breaks in PHP. Switches and what not. Str replace function I'm forgetful on, along with join(). Just easier to head on over there where they know what they are talking about .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  20. #20
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One step ahead of you.. Thanks for looking out though..

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    At the moment, for me the images are all stepped to the right. Do you really want that? I'd still recommend that you wrap them all in their own floated container, and use display: inline-block instead of float: right.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •