SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using a floated image within inline-block

    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!

    HTML Code:
    #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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    <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. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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.

    Code:
    #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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.
    If Ie6 and 7 support was needed then its just a matter of a couple of little hacks.
    Code:
    .inline-blockElement {
    	width:47%;
    	margin: 20px 20px 20px 0;
    	display: -moz-inline-box; /* FF2 & under */
    	display: inline-block;
    	vertical-align: top;
    	background-color:#F3C;
    }
    * html .inline-blockElement{display:inline}
    *+html .inline-blockElement{display:inline}
    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.


    . 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. #5
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ikandee View Post
    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?
    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. #7
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for clarifying Paul :-)


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
  •