.. .. (lots of other elements lik...">
Clever Geek Handbook

Creating an element after another element using only CSS

I have the following HTML:

<h2 class="brand> </h2>
..
.. (lots of other elements like <img, p, h2 etc) 
..

<div class="reviews">...</div>

How can I use CSS to make the testimonials div element appear after the brand h2 element. Something like that:

<h2 class="brand> </h2>
<div class="reviews">...</div>
..
.. (lots of other elements like <img, p, h2 etc) 
..

UPDATE: I was able to set the margin-top to negative so that it appears where I wanted it, but now it looks like it is floating on top of things. I used display: block but still it seems like it is floating on top of things. I want it to take up space.

Negative stock is not displayed correctly as different screen sizes will have different negative margins and they are displayed in different positions.

Thank!

+3


source to share


2 answers


You can use flexbox. It introduces a property order

that allows you to reorder flex items:



#wrapper {
  display: flex;          /* Magic begins */
  flex-direction: column; /* Column layout */
}
#wrapper > .brand ~ :not(.reviews) {
  order: 1;               /* Move to the bottom */
}
      

        
        
        
      

    
<div id="wrapper">
  <h2 class="brand">Title</h2>
  <p>Paragraph</p>
  <div>Div</div>
  <div class="reviews">Reviews</div>
</div>
Run codeHide result


+3


source


you can play around a bit with display: table-*

CSS properties: if all elements are wrapped in a common container (like an element main

)

<main>
  <h2 class="brand">Title</h2>

   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>

   <div class="reviews">reviews</div>
</main>

You can navigate the element .reviews

this way

main          { display: table; }   
main .brand   { display: table-caption; }
main .reviews { display: table-header-group; }


Codepen : http://codepen.io/anon/pen/XbEBma

Result

enter image description here

+2


source






More articles:


All Articles