DeepestGray DeepestGray - 1 year ago 86
CSS Question

Text beside image moving when resized

I'm working on a website and I'm trying to list some text with image about it, but when the win is resized the text move behind image..
I look for answers on related topics, try all solutions but nothing to do.



sorry for the paint draft,
but we can see a container div, div for img (to manage display) and anothe div for the text


#listWithImg .img {
display: inline-block;
float: left;
width: 45px;
height: 45px;
margin: 10px;
#listWithImg ul {
padding-bottom: 0px !important;
padding-top: 0px !important;
margin-top:0px !important;
margin-bottom: 0px !important;
#listWithImg .description {
display: inline-block;
#listWithImg .line {
display: inline-block;

<div class="line">
<div class="img">
<img class="alignnone size-full wp-image-380" src="linkImg" alt="img.png" width="32" height="32" />
<div class="description">

Thanks all for help !

Answer Source

It's ok! if you want children "img" and "text" side by side you need to change display of parent:

.line {display: flex;}

You can play with children's display CSS

.img {
   flex-direction: row;

.text {
   flex-direction: row-reverse;

Thanks all!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download