Cant figure out how to have image and text side by side in a div and keep it responsive, fiddle included

Question

I am having a hard time coding this effect. So far with what I have it works at certain browser widths but if you stretch the browser around you will see stuff goes out of place.

http://jsfiddle.net/Hq8C4/

I set

           float:right;
           float:left;

and some other stuff I tried you can see in the fiddle.

here is what I need to happen.. 1. I need for the containing div to remain at width 100% 2. I need an image container (that sticks to the bottom of the div) and a paragraph container that each take up 50% of the screen and have some room on the side (padding) as to not touch the browser borders. 3. I need it to be responsive. I can set a meta tag to make the paragraph hop ontop the phone and center both once the browser reaches a smaller width but when its larger it they need to be split like the photo supplied. ***4. no scroll.

If you guys need me to clarify anything please comment and I will respond almost instantly!

Thanks a bunch for the help!

ps. Please include a fiddle.

Answer 1

1) display:block; is 100% already by default

2)vertical-align should do on image

3) min-width will put things on top of each other once full width is less than min-widthX2 + 1 white-space http://jsfiddle.net/Hq8C4/2/

html, body, * {
    padding:0;
    margin:0;
}
#contain {
    background-color:#3b3b40;
    height:100%;/* no need  */
    margin:0;
    padding:0;
    text-align:center;
}
#img {
    padding:0;
    margin:0;
    width:49%;
    min-width:350px;   
    vertical-align:bottom;
}
p {
    width:49%;
    min-width:350px;
    display:inline-block;
    padding:40px;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    color:white;
}

<div id="contain">
    <img src="http://tumster.com/image/iphone.png" id="img" />
    <p>Lorem ipsum dolor ...... t tincidunt turpis vehicula vitae.</p>
</div>

Answer 2

Best practice is to use a grid structure to achieve responsiveness.

I can give you some tips:

• Wrap your content in a div and apply structure to the div, rather then for example the image itself.
• Don't use floats to create structure, they are unreliable. Use display: inline-block; instead.
• Don't use negative pixel values, they are evil and will mess with your bounding boxes.
• Use Box-sizing: Border-box; to prevent an element to grow outward when applying padding. Instead it will shrink inward.

I highly recommend that you look at existing CSS grid frameworks if you're building a big website/web application.