CODEWITHSUNDEEP
cssresponsive-design
2339870
2339870

Reputation: 1487

Responsive divs won't scale

So I have two divs next to each other which have the class .category and they are supposed to be responsive.

<div class="content">
    <div class="category">
        <img src="images/category1.jpg" alt="" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor.
        </p>
    </div
    <div class="category">
        <img src="images/category2.jpg" alt="" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
        </p>
    </div>
</div>

This is my CSS:

.content {
    width: 100%;
    background: red;
}

.category {
    max-width: 470px;
    background: #ffffff;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

When I start resizing the window, the second .category block moves underneath the first .category block. However, I want both the .category blocks to reduce in width and stay next to each other.

Anybody got any suggestions?

Upvotes: 1

Views: 426

Answers (2)

web-tiki
web-tiki

Reputation: 103750

First, you have some typographic errors in your HTML Markup (you are missing the > sign on the closing div tag of the first category div).

Second, you should be using percentage widths for responsive elements like this :

FIDDLE

CSS :

.content {
    width: 100%;
    background: red;
}

.category {
    max-width:470px;
    width: 50%;
    background: #ffffff;
    float:left;
    vertical-align: top;
    position: relative;
}

Upvotes: 3

user2539369
user2539369

Reputation:

add float:left; to .category in css and use either % or a css media query

@media(min-width:something;){
   .category {
      width: something;
   }
}

to set the width of the elements.

Upvotes: 0

Related Questions