How can I position two divs on the same line and have them act responsive?


Tags: html,css,responsive-design

Problem :

I found how to position two divs on the same line on one screen size, but I can't make it responsive. The right image just goes below the left div. Here is my CSS and HTML

<div id="my-wrapper" style="
    max-width: 941px;
    width: auto;
    height: auto;">
  <div class="left-stuff" style="
    float: left;
    max-width: 100px;
    width:  auto;
    height: auto;">
        <img alt="" src="blah1.png" 
            style="width: auto; height: auto; max-width:100px;">
        <img alt="" src="blah2.png" 
            style="width: auto; height: auto; max-width: 100px;">
       <img alt="" src="blah3.png" 
            style="width: auto; height: auto; max-width: 100px;">
    </div>
    <div class="right-stuff" style="float:right;">
    <img src="banner.png" style="width: auto; height: auto; max-width:100%;">
    </div></div>

An example can be found Here: http://jsfiddle.net/TachionFiddle/c9EYe/4/



Solution :

Floats aren't going to work as well since it rips it out of the layout.

I recommend inline-block and set width:50% on each.

You have to make sure images never bust your divs so do max-width: 95% or something less than that. Depending on how many there are.


    CSS Howto..

    How to only change left padding in javafx css

    How to fixed the form fields alignment issues using css and bootstrap

    How do I center a menu option under it's heading option in a drop down menu?

    How to replace 31 css classes with just one

    How to display vertical text in table headers with auto height / without text overflow?

    How to achieve this header with html and css?

    How to format CSS for 8.5x11 inch printed pages

    how to center anchor tag horizontally css

    how I can set color of anything in css [closed]

    How to display search icon on right side through css?

    CSS Animation: how to trigger the reverse animation?

    jQuery - CSS DropDown Navigation Items - How to build a Carrot Dropdown

    How to add php to wordpress form

    How to convert a rectangle to TRBL CSS rect value?

    How to center a navigation bar with CSS or HTML?

    How can I make an svg scale with its parent container?

    How fix labels placement so them not overlap in DevExpress js chart?

    How do I load / unload css changes quickly on a plone + Zope site ? (noob)

    how to effect td on fixed table layout

    How do you fade horizontal text into a vertical gradient?

    How do I get two divs next to eachother, but spaced?

    How to calculate the multiplication factor for scroll speed on another element so that they both reach end at the same time (top of view)

    How achieve rounded shadow behide a rounded element using css3

    How to place the same image at the top and at the bottom of the same column?

    How do i enable hover effect on an image if the text before it is hovered?

    How to cut down HTTP request on js/css in laravel

    How to stop main scrollbar working when popup modal is activated, which needs also a scrollbar

    How to make the menu contents center aligned?

    How to create circle image and text Which are complementary to each other in bootstrap or pure css?

    How to take whole available width in bootstrap css?