INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

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

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

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

(OP)
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="http://shop.ezbookeep.com/assets/resources/images/sample/snapshot9.jpg"/>
                <p>
                    Product Description<br />
                    List Price: $ ##,###.##<br />
                    Our Price: $ ##,###.##
                </p>
            </div>
            <div class="one-third">
                <img class="hotlink" src="http://shop.ezbookeep.com/assets/resources/images/sample/snapshot10.jpg" />
                <p>
                    Product Description<br />
                    List Price: $ ##,###.##<br />
                    Our Price: $ ##,###.##
                </p>
            </div>
            <div class="one-third one-third-second">
                <img class="hotlink" src="http://shop.ezbookeep.com/assets/resources/images/sample/snapshot11.jpg" />
                <p>
                    Product Description<br />
                    List Price: $ ##,###.##<br />
                    Our Price: $ ##,###.##
                </p>
            </div>

            <div class="one-third">
                <img class="hotlink" src="http://shop.ezbookeep.com/assets/resources/images/sample/snapshot9.jpg"/>
                <p>
                    Product Description<br />
                    List Price: $ ##,###.##<br />
                    Our Price: $ ##,###.##
                </p>
            </div>
            <div class="one-third one-third-second">
                <img class="hotlink" src="http://shop.ezbookeep.com/assets/resources/images/sample/snapshot10.jpg" />
                <p>
                    Product Description<br />
                    List Price: $ ##,###.##<br />
                    Our Price: $ ##,###.##
                </p>
            </div>
            <div class="one-third">
                <img class="hotlink" src="http://shop.ezbookeep.com/assets/resources/images/sample/snapshot11.jpg" />
                <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
http://www.fp2php.com
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

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

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.

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

(OP)
@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
http://www.fp2php.com
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close