Float Breaking Out

HTML & CSS
1

I’m doing a project with responsive web design and started at the mobile resolution. Everything seemed fine and thought it was going to easy, so I thought.

I have a small test for a grocery store sales ad that displays the items in thumbnails, with the description and price. Each image is in a <div> and the description (floated left) and price (floated right) is in a span positioned at the bottom of each div. As stated, I thought it was going good, tested it on android and iPhone phones and it works. Of course since it worked on android it worked on Chrome on my desktop and Safari 5 and 6. However, according to Sauce Labs and their browser testing, not much luck on Opera, IE or Firefox. So hoping someone can give some opinion or answers on the matter to match up to Chrome and Safari.

NOTE: I haven’t started the up-coding in CSS to target higher resolutions, I thought it would be best to fix the problem first. So if you go to the link don’t panic at the gigantic thumbnails, lol. I’ve been working with my phone and browser at the 320px range to test and I freak out when I go back to fullscreen.
http://www.wordlocker.com/demos/ad_view.html



<!DOCTYPE html>
<html>
<head>
<title>Ad View</title>
<meta name="viewport" content="width=device-width" />
<link href="saleAd.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
	<div id="content">
		<div class="adBlock">
			<img src="english_cut_roast.jpg" title"DEL MONTE VEGETABLES" />
				<span>
					<p class="description">14.5 - 15.25 OZ CAN<br />SWEET PEAS, WHOLE KERNEL OR CREAM STYLE CORN, CUT GREEN BEANS OR FRENCH STYLE GREEN BEANS<br />DEL
                       MONTE VEGETABLES</p>
					<p class="price">5/$3</p>
              	</span>
    	</div>
        <div class="adBlock">
        	<img src="progresso_soup.jpg" title"PROG SOUP" />
				<span>
					<p class="description">12.5<br />ALL VARATIES<br />PROG SOUP</p>
					<p class="price">3/$5</p>
              	</span>
     	</div>
       	<div class="adBlock">
        	<img src="bnls_sknls_chkn_brst.jpg" title"BONELESS SKINLESS CHICKEN BREAST" />
				<span>
					<p class="description"><br />GRADE A<br />BONELESS SKINLESS CHICKEN BREAST</p>
					<p class="price">1<sup>49</sup>/lb.</p>
               	</span>
    	</div>
       	<div class="adBlock">
        	<img src="tav_bacon.jpg" title"THORN APPLE VALLEY BACON" />
				<span>
					<p class="description"><br />PORKY<br />THORN APPLE VALLEY BACON</p>
					<p class="price">3/$10</p>
              	</span>
      	</div>
        <div style="clear:both;"></div>
	</div>
</div>
</body>
</html>


@charset "utf-8";
/* CSS Document */

/*@import url(http://reset5.googlecode.com/hg/reset.min.css);*/

body {
	font-size:100%;
	background-color:#09F;	
}

#container {
	background-color:#FFF;
	width:100%;
	margin:0 auto;
	
}

#content {
	margin:0 auto;
	width:99%;
	background-color:#F33;
	padding:0 .5555555555%;
}

.adBlock {
	float:left;
	position:relative;
	width:48%;
	margin:1% 1%;
}

.adBlock span {
	position:absolute;
	bottom:0;
	width:100%;
	max-height:100%;
	
	background: rgb(255, 255, 255);
	
	/* RGBa with 0.6 opacity */
	
	background: rgba(255, 255, 255, 0.8);
	
	/* For IE 5.5 - 7*/
	
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000);
	
	/* For IE 8*/
	
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000)";
}

img {
	width:100%;	
}

.description {
	float:left;
	width:65%;
	font-size:.6em;
}

.price {
	text-align:right;
	float:right;
	background-color:#E8F30C;
	/*width:35%;*/
}

sup {
	vertical-align:super;
}
2

What happens if you add a left setting?

.adBlock span {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
    bottom: 0;
    [COLOR="#FF0000"]left: 0;[/COLOR]
    max-height: 100%;
    position: absolute;
    width: 100%;
}

That fixes it in Firefox for me. :slight_smile:

3

Note that it is invalid to wrap p elements in a span. p elements need to be in a div.

As Ralph said you need to supply co-ordinates where specific position is required as auto position will vary between browsers depending on text-alignment and other factors.