Change order of floated elements

Question

I have the following code of divs

div {
  float: left;
  width: 33.33%;
  height: 50px;
}

#container {
  width: 100%;
}

#title,
#image,
#descr {
  display: inline-block;
}

#title,
#descr {
  float: right;
}

@media only screen and (max-width: 480px) {
  div {
    width: 100%;
  }
}

<div id="title">This is a title</div>
<div id="image">This is an image</div>
<div id="descr">This is a description</div>

What I want to do is, arrange the divs so that, on desktop, the image comes first, followed by the title and the description. Like so:

[This is an image] [This is a title] [This is a description]

However, when I float the title and description to right, the result I get is:

[This is an image] [This is a description] [This is a title]

Also, please not that while I can change the order of the divs in HTML to get the order I want, I want title to come first on mobile followed by image and description, hence, the order.

Edit: please note that the layout is made responsive by floating the divs. I'm looking for a workaround without removing the floats entirely.

jsfiddle

Floating is an old way of doing things - flex is just as responsive allows you to do a lot more things than floating - eg equal height columns for your desktop layout. [Have a read of this](https://stackoverflow.com/questions/9776840/are-floats-bad-what-should-be-used-in-its-place) - it may change your mind about using floats (ie they were never meant for what they are currently being used for) — Pete, Jun 06 '18 at 14:57
This is probably a better article: https://christianlilley.wordpress.com/2015/01/18/about-using-css-floats-for-primary-layout-stop-it/ — Pete, Jun 06 '18 at 15:06

score 3 · Answer 1 · answered Jun 06 '18 at 14:45

I would use flex to do this as it would be easier:

.container {
  display: flex;
  /* make things line up in a column */
  flex-direction: column;
}

.container>div {
  width: 100%;
  height: 50px;
}


/* do mobile first and media query for larger */

@media only screen and (min-width: 481px) {
  .container {
    /* make things line up in a row */
    flex-direction: row;
  }
  .container>div {
    width: 33.33%;
  }
  
  #title {
    order: 2;
  }
  #image {
    order: 1;
  }
  #descr {
    order: 3;
  }
}

<div class="container">
  <div id="title">This is a title</div>
  <div id="image">This is an image</div>
  <div id="descr">This is a description</div>
</div>

score 1 · Answer 2 · answered Jun 06 '18 at 14:45

1

Float only the image and keep the other float:none.

Pay attention to whitespace between inline-block when removing the float

div {
  width: 33.33%;
  height: 50px;
}

#container {
  width: 100%;
}

#title,
#image,
#descr {
  display: inline-block;
}

#image {
  float: left;
}

@media only screen and (max-width: 480px) {
  div {
    width: 100%;
  }
}

<div id="title">This is a title</div><div id="image">This is an image</div><div id="descr">This is a description</div>

answered Jun 06 '18 at 14:45

Temani Afif

245,468
26
309
415

My whole layout is made responsive by floating the divs. Changing it so breaks the layout. – Surfine Jun 06 '18 at 14:49
@Surfine I changed nothing ;) float and inline-block will behave the same if you simply pay attention to whitespace – Temani Afif Jun 06 '18 at 14:50

score 0 · Answer 3 · answered Jun 06 '18 at 14:44

Use flexbox to change order of elements. Also floats not needed.

.container {
  display: flex;
  justify-content: space-between;
}

#title {
  order: 2;
}

#image {
  order: 1;
}

#descr {
  order: 3;
}

@media only screen and (max-width: 480px) {
  div {
    width: 100%;
  }
}

<div class="container">
  <div id="title">This is a title</div>
  <div id="image">This is an image</div>
  <div id="descr">This is a description</div>
</div>

score 0 · Answer 4 · answered Jun 06 '18 at 14:44

You have to change the order in the HTML code accordingly. If you float: right two elements, the first one will be far right, the next one left of it (if there is enough space)

div {
  float: left;
  width: 33.33%;
  height: 50px;
}

#container {
  width: 100%;
}

#title,
#image,
#descr {
  display: inline-block;
}

#title,
#descr {
  float: right;
}

@media only screen and (max-width: 480px) {
  div {
    width: 100%;
  }
}

<div id="image">This is an image</div>
<div id="descr">This is a description</div>
<div id="title">This is a title</div>

Change order of floated elements

4 Answers4