Rearrange the sequence of floating elements

Question

Rearrange the sequence of floating elements

Below is the code for a series 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>

I am trying to rearrange these divs so that on desktop, the image appears first, followed by the title and then the description:

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

However, when I try floating the title and description to the right, the order gets mixed up:

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

It's important to note that while I can change the div order in the HTML to achieve the desired sequence, I need the title to come before the image and description on mobile devices, hence the challenge.

Note: The layout has been made responsive by floating the divs. I'm exploring alternatives without completely removing the floats.

Check out the jsfiddle here

html css

Answer 1

Answer №1

To achieve this layout, I recommend using flex because it provides an easier way to align elements:

.container {
  display: flex;
  /* arrange items in a column */
  flex-direction: column;
}

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


/* start mobile layout and adjust for larger screens */

@media only screen and (min-width: 481px) {
  .container {
    /* arrange items 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>

Answer 2

To achieve this layout, I recommend using flex because it provides an easier way to align elements:

.container {
  display: flex;
  /* arrange items in a column */
  flex-direction: column;
}

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


/* start mobile layout and adjust for larger screens */

@media only screen and (min-width: 481px) {
  .container {
    /* arrange items 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>

Answer 3

Answer №2

Ensure the image is floated while the other elements remain unfloated.

Be mindful of the spaces between inline-block when eliminating the float property.

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>

Answer 4

Ensure the image is floated while the other elements remain unfloated.

Be mindful of the spaces between inline-block when eliminating the float property.

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>

Answer 5

Answer №3

Utilize flexbox for reordering elements without the need for floats.

.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>

Answer 6

Utilize flexbox for reordering elements without the need for floats.

.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>

Answer 7

Answer №4

To properly align elements in HTML, it is important to adjust the order of the code. When you use float: right on two elements, the first one will be positioned at the far right, with the next one appearing to the left of it (if there is available 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>

Answer 8

To properly align elements in HTML, it is important to adjust the order of the code. When you use float: right on two elements, the first one will be positioned at the far right, with the next one appearing to the left of it (if there is available 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>

Rearrange the sequence of floating elements

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Enhancing Speed and Efficiency with Now ui kit CSS Framework

What is the process for automatically activating the Enter key once moving to the next text input field?

Display a block by using the focus() method

Adjust all children's height to match that of the tallest child

Adjust the list separator based on screen size fluctuations using media queries

Is it possible to change the style of the current page in PHP using the ?page href method?

Ensure that the background image adjusts appropriately to different screen sizes while maintaining its responsiveness

Color overlay on top of image background

Issue with setting Y Axis intervals using ticks in d3 library

Utilize the grid system from Bootstrap to style HTML div elements

A gap only appears in the drop-down navigation when the page is scrolled

JavaScript Tab Fade Effect

Growing animated backdrop

Creating a JQuery slider that efficiently loads and displays groups of elements consecutively

Converting plain text to a JSON object using JavaScript: A step-by-step guide

Can an iframe be replicated?

What is the best way to extract the chosen value from a dropdown menu within the $_POST array?

What is the best way to incorporate six rows of paragraphs using bootstrap?

tinyScroll currently disabled

Ensure that a select input, dynamically generated, is marked as 'required' only when other inputs have been filled out