CODEWITHSUNDEEP
htmlcsslayout
facechomp
facechomp

Reputation: 164

use css to move a div into the row above it

My code has 3 divs in a row (gallery, sidebar, description). The HTML needs to remain unchanged, but I need to use CSS to get the .description up under the .sidebar (beside the .gallery) instead of beneath the .gallery. I want to move that div like so Code:

<div class="product">
  <div class="gallery">
    <img src="https://via.placeholder.com/300" alt="item" />
  </div>
  <div class="sidebar">
    <h3>
      Sidebar
    </h3>
    <p>
      Product price, etc.
    </p>
  </div>
  <div class="description">
    <h3>
      Details
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed eros sem. Aliquam erat volutpat. Phasellus auctor lorem dolor, vitae egestas neque vestibulum sed. Proin sapien purus, faucibus ut elementum eget, consequat sed arcu. Morbi nisl libero,
      molestie eget ligula quis, feugiat iaculis felis. Donec condimentum, felis eu sodales interdum, ex purus convallis augue, quis sollicitudin nibh ex vel lorem. Sed eget semper ipsum, vel dictum lorem. Proin ornare massa elit, non aliquam erat ultricies
      at.
    </p>
  </div>
</div>

.product {
  box-sizing: border-box;
  position: static;
}

.gallery {
  box-sizing: border-box;
  float: left;
  position: relative;
}

.sidebar {
  box-sizing: border-box;
  float: right;
  position: static;
}

.description {
  box-sizing: border-box;
  clear: left;
  float: left;
  position: static;
}

Upvotes: 1

Views: 757

Answers (3)

Tom Checkley
Tom Checkley

Reputation: 70

css grid would be the easiest, and browser support is now pretty good.

https://css-tricks.com/snippets/css/complete-guide-grid/ https://caniuse.com/#search=grid

If I understand what you are asking correctly you could define your grid template area and then assign your elements to where they need to sit.

From the top of my head it would be something like this, check out the link to css-tricks.

Here is a pen demonstrating https://codepen.io/TomCheckley/pen/dQJQBv

<div class="product">
  <div class="gallery">
    <img src="https://lorempixel.com/400/200/cats/1" alt="">
  </div>
  <aside class="sidebar">
    <h2>Sidebar</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </aside>
  <div class="description">
    <h2>Description</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</div>

img {
  width: 100%;
  height: auto;
}

h2 {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

.product {
  max-width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 1.5rem;
  grid-template-areas: 'gallery gallery sidebar' 'gallery gallery description';
}
.product > * {
  background-color: #c3cece;
  padding: 1.5rem;
}

.gallery {
  grid-area: gallery;
}

.sidebar {
  grid-area: sidebar;
}

.description {
  grid-area: description;
}

Well, actually grid maybe not the easiest if you've not used it! But it will give you the most flexible layout options without changing your markdown. It's definitely worth playing around with as browser support is getting near total (apart from IE). You can always progressively enhance as well - float is then overridden by flex and if you put grid after flex in the cascade the browser will use it if it understands it and use flex if it doesn't.

Upvotes: 0

blackcityhenry
blackcityhenry

Reputation: 727

I suggest you to use a div to wrap both .sidebar and .description.

Then apply display: flex on parent .product.

HTML

<div class="column-wrap">
 <div class="sidebar">..</div>
 <div class="description">...</div>
</div>

CSS

.product{
   display: flex
}

https://jsfiddle.net/blackcityhenry/n9qgvjh6/

Upvotes: 0

nikitahl
nikitahl

Reputation: 446

If you're willing to use floats, set the width for your elements. Here's fiddle http://jsfiddle.net/y6g4p7u8/1/ I've set the background color for visual display.

.product {
  box-sizing: border-box;
  background: green;
}

.product:before,
.product:after {
  content: " ";
  display: table;
}

.product:after {
  clear: both;
}

.gallery {
  box-sizing: border-box;
  width: 35%;
  float: left;
  background: red;
}

.sidebar {
  box-sizing: border-box;
  float: left;
  width: 65%;
  background: lightblue;
}

.description {
  box-sizing: border-box;
  float: left;
  width: 65%;
  background: yellow;
}

Upvotes: 1

Related Questions