Float problem

**Rjfec** · May 10, 2012 08:55

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

**ralph.m** · May 10, 2012 09:00

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.

**Rjfec** · May 10, 2012 09:33

Thank you!

**Spritanium** · May 10, 2012 10:21

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".

**Rjfec** · May 10, 2012 10:28

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.

**Spritanium** · May 10, 2012 11:01

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.

**RyanReese** · May 10, 2012 11:04

Originally Posted by Rjfec

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.

**Rjfec** · May 10, 2012 11:06

Ha.. craziness. Thanks for pointing that out. I overlooked it or just need to step away for a few..

cheers!

**Rjfec** · May 10, 2012 11:09

Nope, but I will try it or at least read about it. Thanks!

**RyanReese** · May 10, 2012 11:13

Originally Posted by Rjfec

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

.

**Rjfec** · May 10, 2012 11:21

You both are brilliant. Thanks for everything.

IE7 and down don't support it

my opinion on that is they should upgrade

**dresden_phoenix** · May 10, 2012 11:36

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.

**Rjfec** · May 10, 2012 11:46

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.

**dresden_phoenix** · May 10, 2012 12:58

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.

**Rjfec** · May 10, 2012 13:20

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.

**Rjfec** · May 10, 2012 13:27

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;

**RyanReese** · May 10, 2012 16:13

What's needing to be sorted out with that PHP? It echos an anchor with inline CSS, and echos out the list.

**Rjfec** · May 10, 2012 16:32

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>

**RyanReese** · May 10, 2012 16:34

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

.

**Rjfec** · May 10, 2012 16:35

One step ahead of you.. Thanks for looking out though..

**RyanReese** · May 10, 2012 16:48

You're welcome

.

**ralph.m** · May 10, 2012 16:55

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.

User Tag List

Thread: Float problem

Thread Tools

Display

Float problem

Bookmarks

Bookmarks

Posting Permissions