southbeach
Programmer
I have been playing with this - and for the life of me I cannot get the <div> to ling up two across.
Here is the complete code. Can you spot why am I having this problem?
as usual, your help is truly appreciated.
--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
Here is the complete code. Can you spot why am I having this problem?
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Responsive Web Design</title>
<meta name="viewport" content="width=device-width">
<!-- css -->
<style>
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
div.section-inner {
padding: 0 25px;
margin: 0 auto;
}
/* Thirds */
div.thirds {
padding-bottom: 30px;
width: 100%;
}
div.one-third {
width: 30%;
float: left;
margin-right: 2%;
}
img {
max-width: auto;
height: 100%;
margin: 5px 0 5px 0;
}
@media screen and (max-width: 800px) {
body { background-color: #FFCC00; }
div.one-third {
width: 46%;
margin-right: 2%;
}
div.one-third-second {
margin: 0;
}
}
@media screen and (max-width: 590px) {
body { background-color: #FFCCAA; }
div.one-third {
width: 100%;
margin: 0;
}
}
</style>
</head>
<body>
<div class="body-content">
<div class="section-inner">
<div class="thirds clearfix">
<div class="one-third">
<img class="hotlink" src="[URL unfurl="true"]http://shop.ezbookeep.com/assets/resources/images/sample/snapshot9.jpg"/>[/URL]
<p>
Product Description<br />
List Price: $ ##,###.##<br />
Our Price: $ ##,###.##
</p>
</div>
<div class="one-third">
<img class="hotlink" src="[URL unfurl="true"]http://shop.ezbookeep.com/assets/resources/images/sample/snapshot10.jpg"[/URL] />
<p>
Product Description<br />
List Price: $ ##,###.##<br />
Our Price: $ ##,###.##
</p>
</div>
<div class="one-third one-third-second">
<img class="hotlink" src="[URL unfurl="true"]http://shop.ezbookeep.com/assets/resources/images/sample/snapshot11.jpg"[/URL] />
<p>
Product Description<br />
List Price: $ ##,###.##<br />
Our Price: $ ##,###.##
</p>
</div>
<div class="one-third">
<img class="hotlink" src="[URL unfurl="true"]http://shop.ezbookeep.com/assets/resources/images/sample/snapshot9.jpg"/>[/URL]
<p>
Product Description<br />
List Price: $ ##,###.##<br />
Our Price: $ ##,###.##
</p>
</div>
<div class="one-third one-third-second">
<img class="hotlink" src="[URL unfurl="true"]http://shop.ezbookeep.com/assets/resources/images/sample/snapshot10.jpg"[/URL] />
<p>
Product Description<br />
List Price: $ ##,###.##<br />
Our Price: $ ##,###.##
</p>
</div>
<div class="one-third">
<img class="hotlink" src="[URL unfurl="true"]http://shop.ezbookeep.com/assets/resources/images/sample/snapshot11.jpg"[/URL] />
<p>
Product Description<br />
List Price: $ ##,###.##<br />
Our Price: $ ##,###.##
</p>
</div>
</div>
</div>
</div>
<div style="clear: both; height: 0px;"></div>
</body>
</html>as usual, your help is truly appreciated.
--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.