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;
}
html css layout
add a comment |
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;
}
html css layout
Are you willing to usedisplay: grid
ordisplay: flex
?
– yunzen
Nov 21 '18 at 7:52
add a comment |
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;
}
html css layout
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;
}
html css layout
html css layout
asked Nov 21 '18 at 7:23
facechompfacechomp
11818
11818
Are you willing to usedisplay: grid
ordisplay: flex
?
– yunzen
Nov 21 '18 at 7:52
add a comment |
Are you willing to usedisplay: grid
ordisplay: flex
?
– yunzen
Nov 21 '18 at 7:52
Are you willing to use
display: grid
or display: flex
?– yunzen
Nov 21 '18 at 7:52
Are you willing to use
display: grid
or display: flex
?– yunzen
Nov 21 '18 at 7:52
add a comment |
4 Answers
4
active
oldest
votes
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;
}
add a comment |
Adding those to .description perfectly works:
position: absolute;
top: 0;
left: 320px;
However, it would be best if you wrap the image with the description inside a div element then you place them relative to each other
add a comment |
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/
add a comment |
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.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53407070%2fuse-css-to-move-a-div-into-the-row-above-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
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;
}
add a comment |
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;
}
add a comment |
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;
}
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;
}
answered Nov 21 '18 at 7:48
nikitahlnikitahl
123119
123119
add a comment |
add a comment |
Adding those to .description perfectly works:
position: absolute;
top: 0;
left: 320px;
However, it would be best if you wrap the image with the description inside a div element then you place them relative to each other
add a comment |
Adding those to .description perfectly works:
position: absolute;
top: 0;
left: 320px;
However, it would be best if you wrap the image with the description inside a div element then you place them relative to each other
add a comment |
Adding those to .description perfectly works:
position: absolute;
top: 0;
left: 320px;
However, it would be best if you wrap the image with the description inside a div element then you place them relative to each other
Adding those to .description perfectly works:
position: absolute;
top: 0;
left: 320px;
However, it would be best if you wrap the image with the description inside a div element then you place them relative to each other
answered Nov 21 '18 at 7:45
Mustafa AnasMustafa Anas
148
148
add a comment |
add a comment |
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/
add a comment |
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/
add a comment |
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/
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/
answered Nov 21 '18 at 7:59
blackcityhenryblackcityhenry
19018
19018
add a comment |
add a comment |
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.
add a comment |
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.
add a comment |
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.
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.
edited Nov 21 '18 at 8:22
answered Nov 21 '18 at 8:16
Tom CheckleyTom Checkley
236
236
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53407070%2fuse-css-to-move-a-div-into-the-row-above-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Are you willing to use
display: grid
ordisplay: flex
?– yunzen
Nov 21 '18 at 7:52