CODEWITHSUNDEEP
csshtmlresponsive-design
Jane
Jane

Reputation: 816

Responsive css divs won't stay next to each other

I'm trying to make a responsive web layout. On the front page there is a div, with two divs in it. One for the caption and one for the image. The caption should stay next to the image at all times, but the image and caption should scale for smaller screens.

Here is my html;

<div class="content">
        <div class="caption">
        <h1>Blablabla</h1>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ipsum quam, semper volutpat massa. Cras mattis malesuada sagittis. Cras luctus erat quis orci condimentum quis vulputate lectus venenatis. Proin lorem lorem, vehicula in porta id, facilisis id massa. Phasellus venenatis eros et diam dictum faucibus. Donec at rutrum orci. Vivamus quam sapien, mollis sed aliquet blandit, viverra nec enim. In sapien lectus, fringilla pretium sollicitudin eu, eleifend id mi. Phasellus ullamcorper massa vitae mauris</p>
        </div>
        <div class="image">
            <img src="pics02.jpg">
        </div>
    </div>

And this is my css;

    .content {
    margin: 0px auto;
    width:60%;
    background-color:black;
    margin-top:4em;
    display:block;
}

.caption {
    width:30%;
    background-color:white;
    height: auto;
    display:inline;
    margin:0px;
    color:green;
    float:left;
    padding:6px;
    display:block;
}

.image {
    display:inline;
    margin:0px;
    float:right;
    display:block;
}

.image img {
      max-width:100% !important;
    max-height:100% !important;
    display:block;
}

In another topic here on stack I found that I should set the img tag with a max width and height and set the display to block everywhere. Unfortunately that doesn't work when I'm scaling, the image gets smaller when you scale but it slides underneath the caption.

Upvotes: 0

Views: 2421

Answers (2)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Live Demo

Why are you used to multiple value 

.caption {
    width:30%;
    background-color:white;
    height: auto;
    display:inline;   // used to any one value
    margin:0px;
    color:green;
    float:left;   // used to any one value
    padding:6px;
    display:block; // used to any one value
}

Used to one property in your class .caption

do't used to multiple display value in a single class

I think You want to this Live Demo

Upvotes: 1

Romain
Romain

Reputation: 1948

just add this to your image css class:

   .image {
    display:inline;
    margin:0px;
    float:right;
    display:block;
    width: 60%;
}

Hope this is what you want.

Otherwise, if you can update this example with real picture etc, we can help so much more: http://jsfiddle.net/BJ8gK/30/

Upvotes: 1

Related Questions