Using a floated image within inline-block

HTML & CSS
1

Can someone please confirm if this is correct?

I’m basically trying to achieve a group of divs each containing a left floated image with a nested div containing text that sits on the right hand side of the floated image. I have used inline-block as each group of divs will have varying heights, so wanted to have them wrapping nicely.

From what I have narrowed down, the image within .inline-blockElement is causing issues in Mozilla/netscape as it is stretching to the height of .inline-blockElement, and it’s also doubling the margin in .blockElement. (fyi - It appears every other browser is rendering ok.)

Is there a work-around or a better way of getting the inline-block to behave?

Thanks!


#outer {
              position: relative;
	width: 900px;
	margin: 0 auto;
	padding: 25px 0;
}

.inline-blockElement {
	width:47%;
	margin: 20px 20px 20px 0;
	display: -moz-inline-box; /* FF2 & under */
	display: inline-block;
	vertical-align: top;
	background-color:#F3C;
}


.blockElement {
	width:230px;
	margin: 0 0 0 175px;
	display:block;
	background-color:#FC3;
}

.inline-blockElement img {
	float: left;
	width:150px;
	height:135px;
	margin: 5px 0;
	padding: 5px;
	border: 1px solid #deddd5;
	background-color: #fff;
}

<div id="outer">
<div class="inline-blockElement">
<img src="" width="150" height="135" />

<div class="blockElement">
<h3>Heading</h3>
<p>Some copy...</p>

</div>
</div>  

<div class="inline-blockElement">
<img src="" width="150" height="135" />

<div class="blockElement">
<h3>Heading</h3>
<p>Some copy...</p>

</div>
</div>  

<div class="inline-blockElement">
<img src="" width="150" height="135" />

<div class="blockElement">
<h3>Heading</h3>
<p>Some copy...</p>

</div>
</div>  

<div class="inline-blockElement">
<img src="" width="150" height="135" />

<div class="blockElement">
<h3>Heading</h3>
<p>Some copy...</p>

</div>
</div>

</div>
2

Hi,

It looks ok in modern versions of Firefox. There will be issues in FF2 and below due o the fact that they need the inline-box rule.

If you want to support FF2 then you will need to nest a block element inside the inline-block element to solidify everthing.
e.g.


<div id="outer">
		<div class="inline-blockElement">
				<div><img src="" width="150" height="135" />
						<div class="blockElement">
								<h3>Heading</h3>
								<p>Some copy...</p>
						</div>
				</div>
		</div>
		<div class="inline-blockElement">
				<div> <img src="" width="150" height="135" />
						<div class="blockElement">
								<h3>Heading</h3>
								<p>Some copy...</p>
						</div>
				</div>
		</div>
		<div class="inline-blockElement">
				<div> <img src="" width="150" height="135" />
						<div class="blockElement">
								<h3>Heading</h3>
								<p>Some copy...</p>
						</div>
				</div>
		</div>
		<div class="inline-blockElement">
				<div> <img src="" width="150" height="135" />
						<div class="blockElement">
								<h3>Heading</h3>
								<p>Some copy...</p>
						</div>
				</div>
		</div>
</div>
3

It’s also as a rule of thumb a really bad idea to try and use inline-block on block-level tags… since that can cause all sorts of headaches in IE – even modern versions which allegedly support that. I’d also be questioning the use of inline-block on them altogether as why aren’t you just floating the parent containers? You can’t even predict that 47% will always account for the space character between them. Some names on the elements that say what they are for CONTENT instead of just 'this is a block" – really? A div is a block? Who’d have thunk it?!? wouldn’t hurt either. Also, since you’re working inside a fixed width container, this should be a no-brainer.

So my first step? clean up the markup:


<div id="outer">

	<div class="subSection">
		<img src="" width="150" height="135" alt="test" />
		<div>
			<h3>Heading</h3>
			<p>Some copy...</p>
		</div>
	<!-- .subSection --></div>

	<div class="subSection">
		<img src="" width="150" height="135" alt="test" />
		<div>
			<h3>Heading</h3>
			<p>Some copy...</p>
		</div>
	<!-- .subSection --></div>

	<div class="subSection">
		<img src="" width="150" height="135" alt="test" />
		<div>
			<h3>Heading</h3>
			<p>Some copy...</p>
		</div>
	<!-- .subSection --></div>

	<div class="subSection">
		<img src="" width="150" height="135" alt="test" />
		<div>
			<h3>Heading</h3>
			<p>Some copy...</p>
		</div>
	<!-- .subSection --></div>

<!-- #outer --></div>

Then, we simplify… simplify… simplify the CSS to float so you don’t have the inline-block headaches or oddball sizing issues.


#outer {
	position:relative;
	overflow:hidden; /* wrap floats */
	width:900px; /* also trips haslayout, so IE is float wrapping too */
	margin:0 auto;
	padding:25px 0;
}

.subSection,
.subSection img {
	float:left;
	display:inline; /* prevent IE margin doubling */
}

.subSection {
	width:423px;
	margin:0 20px 20px 0;
	background:#F3C;
}

.subSection img {
	margin:5px 5px 5px 0;
	padding:5px;
	border:1px solid #DEDDD5;
	background:#FFF;
}

.subSection div {
	overflow:hidden; /* prevent float indent past image */
	height:1%; /* trip haslayout, prevent float indent IE */
	margin-right:5px;
	background:#FC3;
}

admittedly there’s the right side padding issue, but that’s why generally I’d not have them flush against the left anyways. (or I’d use alternating classes)

4

If Ie6 and 7 support was needed then its just a matter of a couple of little hacks.


.inline-blockElement {
	width:47%;
	margin: 20px 20px 20px 0;
	display: -moz-inline-box; /* FF2 & under */
	display: inline-block;
	vertical-align: top;
	background-color:#F3C;
}
[B]* html .inline-blockElement{display:inline}
*+html .inline-blockElement{display:inline}[/B]

Any inline element (or a block element with a display of inline) that is in haslayout mode behaves as inline-block in IE7 and under. (I don’t usually have any problems with inline-block in ie8+ apart from the usual whitespace issues but I don’t doubt there are some odd bugs about.)

I’d also be questioning the use of inline-block on them altogether as why aren’t you just floating the parent containers?

I think you missed the part where the OP said they might be different height containers and didn’t want then to snag.:slight_smile:

. I have used inline-block as each group of divs will have varying heights, so wanted to have them wrapping nicely.

I tend to use inline-block a lot these days especially for rows of images or blocks of content that may vary in height.

5

Thanks Paul - your solution has done the trick. (I had already sorted out the IE 6 & 7 fixes, but thnx for covering this anyway - and also thanks for pointing out that I was using inline-block to wrap uneven heights nicely - that was exactly my aim.)
The working page is: http://www.ekidnakinda.com.au/news/ekidna_news1.php

To satisy my curisosity, by adding an extra nested div to the code - is this best practice? Or could there have been a different way I could have achieved this?

6

Adding an extra div is always less than ideal but if you want to support older browsers like ff2 then it does seem to work well. It does depend on the situation and for simpler structures you wouldn’t need the extra div but when you have floats and other elements inside the inline-block parent it seems the extra div is needed. Others have had success using inline-stack instead of inline-box but I’ve found it just as buggy.

7

Thanks so much for clarifying Paul :slight_smile: