Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Responsive Design - Get 3 col down to 2 col and down to 1 col

Status
Not open for further replies.

southbeach

Programmer
Jan 22, 2008
879
US
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?
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.
 
float:left; min-width:33%; in a percentage width parent should do that.

minus the display: table; of course


Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.
 
@ChrisHirst,

I tried that but still same problem. What I am looking for is to get two images side by side as the view port reaches 720 or less.

I am doing OK with a single image a 500 or under and three image at 800 or better.


--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top