Two adjacent elements in a responsive layout

HTML & CSS
1

I have two adjacent elements in a responsive layout.

The left element contains just an image and can be fixed width; the right element should fill the remaining available space, but not overlap or drop below.

With my don’t-really-know-what-I’m doing very limited knowledge, I currently have them floated left and right respectively, although without a width.

What’s the sensible way to code/style this?

2

If I am understanding correctly, what you want is a ‘column’ for the image and a column for the content on the right.
if that is correct , just float the left element, and give the right element overflow:hidden;


.left { float:left; width:150px;}
.right {overflow: hidden;}
<div class='left'><img src='image.jpg'></div>
<div class='right'>content</div>

hope that helps

3

Yes, it does - thanks.

I don’t pretend to understand it, so I’ll clearly have to learn a bit more.

4

Overflow other than visible creates a new block formatting context and in this context the element no longer slides under the float and creates a rectangular block to the side of any previous floated children (assuming there is room). (For IE7 and under you would need to use the haslayout trigger (zoom:1.0) to create the same effect).

It’s the same reason that overflow other than visible will contain child floats automatically.

5

Thanks.