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
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. 
Thank you!
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”.
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.
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.
Have you considered display:table-cell? Acts like a table cell. Easy vertical alignment and it should help keep flow.
Ha… craziness. Thanks for pointing that out. I overlooked it or just need to step away for a few… cheers!
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 :(.
You both are brilliant. Thanks for everything.
IE7 and down don’t support it
my opinion on that is they should upgrade
The document is also structured funny.
#1 and as an aside (PUN!!!)
<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 Africa</a></li>
</ul>
</aside>
would be better written as:
<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 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!
<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.
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.
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.
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.
Here is the culprit. Now I just got to sort it out.
$tag = str_replace(' ', ' ', 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'>\
\ <li>";
$return .= join("</li>\
\ <li>", $a);
$return .= "</li>\
</ul>\
";
break;
default :
$return = join("\
", $a);
break;
endswitch;
What’s needing to be sorted out with that PHP? It echos an anchor with inline CSS, and echos out the list.
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>
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 :p.
One step ahead of you… Thanks for looking out though…