user6509972 user6509972 - 1 month ago 10
CSS Question

Modify CSS float behavior when the browser becomes small

I am trying to create a nice looking list with css and html. I want to list a bunch of people with there name and their photo. Something like this: enter image description here

The way I did this is I floated each element to the left and then I set a small margin for the title in order to get the spacing right. The issue is when the browser is condensed to the point that the name and the image cannot fit on the same line it moves the image above the title.

What I want it to do instead is put the last name under the first name so that the name and photo can still be aligned. How can I do this?

Answer

This should just work, shrinking the screen will automatically restrict the width of the text and cause it to wrap automatically. Can we see a code sample?

Here's a working fiddle: https://jsfiddle.net/bb3a5wbu/

HTML

<div class="image"></div>
<p class="name">FirstName LastName</p>

CSS

.image {
    width: 75px;
    height: 75px;
    background: grey;
    float: left;
}

.name {
    margin-left: 90px;
}

Hope this helps.