Is it possible for me to position an element beside the element before it?

Question

Is it possible for me to position an element beside the element before it?

Imagine a traditional layout consisting of paragraphs grouped with a sidebar. However, there are two issues with this setup: first, the browser displays the sidebar (typically used for navigation) before the main content, causing problems for screen readers and text-based browsers. To address this accessibility concern, the sidebar should be positioned after the article. This complicates using the common float:right technique, as absolute positioning can lead to further complications. The second issue is tied to the first; on narrower screens, I don't want the sidebar to sit alongside the text but rather appear below it.

Is there a way to achieve the same visual layout while swapping the positions of the two elements: #main and #sidebar?

#main {
  width: 100%;
}
#sidebar {
  width: 150px;
  height: 200px;
  background-color: #abc;
  float: right;
}

<div id="sidebar"></div>
<div id="main">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy...</p>
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout...</p>
</div>

html css responsive-design

Answer 1

Answer №1

If you know how to utilize FlexBox, you can easily use the order property to change the order of elements.

I have already implemented it for you:

.wrapper {
  display: flex;
}

#main {
  width: 85%;
}

#sidebar {
  width: 150px;
  background-color: #abc;
  order: 1;
}

<div class="wrapper">
  <div id="main">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
      here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
      Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
  </div>
  <div id="sidebar"></div>
</div>

Preview

https://i.sstatic.net/8Yi4y.png

Answer 2

If you know how to utilize FlexBox, you can easily use the order property to change the order of elements.

I have already implemented it for you:

.wrapper {
  display: flex;
}

#main {
  width: 85%;
}

#sidebar {
  width: 150px;
  background-color: #abc;
  order: 1;
}

<div class="wrapper">
  <div id="main">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
      here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
      Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
  </div>
  <div id="sidebar"></div>
</div>

Preview

https://i.sstatic.net/8Yi4y.png

Answer 3

Answer №2

My approach to creating a float layout involved floating the first item to the left and then floating the second item to the right in a row. By doing this, I was able to place the #main element first in the markup and assign it a percentage width. Since the #sidebar had a fixed width, I had to use a media query to adjust its layout when it no longer fit on the same row. In such cases, I simply removed the floats to reorganize the layout. Assuming there were no other elements above or below these two, the process was relatively straightforward. The media query I used set a max-width of 408px, but this value may vary depending on your webpage.

#main {
  width: 60%;
  float:left;
}
#sidebar {
  width: 150px;
  height: 200px;
  background-color: #abc;
  float:right;
}

#main p {margin-top:0;}

@media screen and (max-width:408px) {
  #main {
    float:none;
  }
  
  #sidebar {
    float:none;
  }
}

<div id="main">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<div id="sidebar"></div>

Answer 4

My approach to creating a float layout involved floating the first item to the left and then floating the second item to the right in a row. By doing this, I was able to place the #main element first in the markup and assign it a percentage width. Since the #sidebar had a fixed width, I had to use a media query to adjust its layout when it no longer fit on the same row. In such cases, I simply removed the floats to reorganize the layout. Assuming there were no other elements above or below these two, the process was relatively straightforward. The media query I used set a max-width of 408px, but this value may vary depending on your webpage.

#main {
  width: 60%;
  float:left;
}
#sidebar {
  width: 150px;
  height: 200px;
  background-color: #abc;
  float:right;
}

#main p {margin-top:0;}

@media screen and (max-width:408px) {
  #main {
    float:none;
  }
  
  #sidebar {
    float:none;
  }
}

<div id="main">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<div id="sidebar"></div>

Answer 5

Answer №3

To achieve the desired layout, one option is to create a faux float element using a pseudo-element before, and then utilize absolute positioning to overlay the sidebar on top of it.

#main {
  width: 100%;
}
#main:before {
 content:'';
 float:right;
 background:red;
 width:150px;
 height:200px;
}
#sidebar {
  width: 150px;
  height: 200px;
  background-color: #abc;
  position:absolute;
  top: 16px;
  right: 8px;
}

<div id="main">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<div id="sidebar"></div>

Answer 6

To achieve the desired layout, one option is to create a faux float element using a pseudo-element before, and then utilize absolute positioning to overlay the sidebar on top of it.

#main {
  width: 100%;
}
#main:before {
 content:'';
 float:right;
 background:red;
 width:150px;
 height:200px;
}
#sidebar {
  width: 150px;
  height: 200px;
  background-color: #abc;
  position:absolute;
  top: 16px;
  right: 8px;
}

<div id="main">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<div id="sidebar"></div>

Is it possible for me to position an element beside the element before it?

Answer №1

Answer №2

Answer №3

Similar questions

Calculating the width of fluctuating DOM elements in AngularJS

Modify the placeholder color for a disabled Input element to match the overall Mui theme design

Issue encountered with sortable table in list.js

Error message occurs when attempting to use the ->num_rows function on inner join statement and accessing a property of a non-object

Retrieve the selected date from the date picker widget

Reorganize elements using CSS styling

The AJAX data variable fails to send to PHP script although $_POST is defined

The event is being triggered on two separate occasions

How can I prevent Chrome from constantly prompting for permission to access the camera?

Encountering difficulties accessing XML file on server via anchor tag

Select dropdown in AngularJS for Date formatting

What is the best way to increase the height of an image beyond the limits of its container, causing it to overlap with other elements

Is it possible to modify the class attribute of an HTML element in PHP upon clicking an input?

A step-by-step guide to invoking a function upon submitting a form with an external JavaScript file

Determine if I'm actively typing in the input field and alter the loader icon accordingly with AngularJS

The clip-path in Div: Css is malfunctioning and not displaying correctly

Tackling the sticky header problem with in-browser anchoring and CSS dynamic height restrictions

Material UI causing animation to fail to trigger

A straightforward guide on utilizing data-attributes to achieve a linear-gradient background

What are the steps to design a versatile gallery page that can serve various projects?