I want to make the image move to the right side and text to the left side. I am doing it with float but I am confused, so I have deleted the code. I only have the HTML code. You can check a screenshot that shows the result I expect: http://i.imgur.com/R9aSnmw.jpg
HTML:
<div class="column2">
<p class="aboutdes">A quem consectetur, ut dolore non varias, nostrud noster qui expetendis eruditionem, culpa mandaremus non senserit. A magna fugiat dolore pariatur, ab quid consectetur et qui dolore litteris an malis commodo id nostrud</p>.
</div>
HTML: (I used a sample image)
<div class="column2">
<img src="http://cdn7.facegfx.com/psd/wp-content/uploads/2013/5/6/hd-magical-picture-book-psd.jpg" />
<p class="aboutdes">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius in ligula eget bibendum. Nam faucibus lorem quis mattis rhoncus. Phasellus iaculis felis quis massa molestie rutrum. Praesent elit nisi, facilisis vitae sem eget, faucibus imperdiet elit. Mauris mauris arcu, consectetur in consectetur ac, scelerisque sit amet ante. Nulla ac consequat nibh. Nullam congue massa ipsum, nec venenatis augue semper non. Morbi hendrerit turpis est, eget luctus nulla facilisis sed! Praesent non rhoncus ipsum. Pellentesque lacinia scelerisque rutrum? Donec posuere imperdiet ligula, eget tincidunt metus!
</p>.</div>
CSS:
.column2 > img {
float: right;
width:100px; // or 30% or depends upon your requirement!
border-radius: 50%; // for the rounded image as shown in your example
margin: 0 0 15px 15px; // spacing from text
}
jsfiddle demo
Just place the <img /> element inside the <p> tag, and then set the following CSS:
p > img {
float: right;
margin: 0 0 10px 10px;
}
jsFiddle Demo
Put the <img class="right"> inside the <p>. The use
img.right { float: right; }
p { text-align: left; }
Related
div{
width: calc(5vw + 2.8868vh);
height: 100vh;
background: rgba(255, 255, 255, 0.8);
transform-origin: left;
transform: skewX(30deg) translateX(-28vh) scaleX(10);
float: left;
shape-outside: polygon(0vh 0vh, calc(50vw - 38vh) 0vh, calc(50vw + 20vh) 100vh, 0vh 100vh);
}
p{
word-spacing: 0.9em;
line-height: 1.5;
font-size: 150%;
margin: 0;
padding: 0;
font-weight: 400;
float: right;
width: 70vw;
}
<div></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis iaculis dui, quis dignissim nisi. Pellentesque ac leo neque. Nunc sit amet sollicitudin ligula, in viverra mauris. Nunc viverra mollis erat luctus blandit. Nam pharetra libero et molestie dignissim. Aliquam non mollis mauris. Donec id risus odio. Sed tempus, leo a iaculis iaculis, orci ipsum porttitor ex, in mattis odio massa at ante. Maecenas sit amet finibus lectus. Mauris convallis ullamcorper facilisis. Integer elit augue, finibus sed maximus vel, feugiat vitae tellus. Integer lobortis ultricies massa sit amet porta. Etiam erat ante, pulvinar id nulla in, ultricies consequat urna.
</p>
I did all the research I can, I tried to delete, add or replace any of the properties above, but it isn't working. Transform isn't the reason, the shape-outside shape according to Devtools is the right shape, positions don't matter, the width or height of the text doesn't do nothing, so I need your help now. What's the problem?
The angle you're talking about is shown by the transform property also you don't need to float the p to the right otherwise the text will go to the right and no text will rub against the div,also your polygon syntax is wrong.
I commented out the unnecessary lines of code
div {
width: calc(5vw + 2.8868vh);
height: 100vh;
/* background: rgba(255, 255, 255, 0.8); */
/* transform-origin: left; */
/* transform: skewX(30deg) translateX(-28vh) scaleX(10); */
float: left;
shape-outside: polygon(0 0, 10% 0, 100% 100%, 0% 100%);
}
p {
word-spacing: 0.9em;
line-height: 1.5;
font-size: 150%;
margin: 0;
padding: 0;
font-weight: 400;
/* float: right; */
width: 70vw;
}
<div></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis iaculis dui, quis dignissim nisi. Pellentesque ac leo neque. Nunc sit amet sollicitudin ligula, in viverra mauris. Nunc viverra mollis erat luctus blandit. Nam pharetra libero et molestie
dignissim. Aliquam non mollis mauris. Donec id risus odio. Sed tempus, leo a iaculis iaculis, orci ipsum porttitor ex, in mattis odio massa at ante. Maecenas sit amet finibus lectus. Mauris convallis ullamcorper facilisis. Integer elit augue, finibus
sed maximus vel, feugiat vitae tellus. Integer lobortis ultricies massa sit amet porta. Etiam erat ante, pulvinar id nulla in, ultricies consequat urna. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. 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. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
I'll leave re shaping the polygon to you might wanna consider using this Tool
I displayed text in a two columns layout, with column-count and column-fill: auto so that it fills completely the first column before going to the second.
I also need to add an illustration at the top right (top of the second column). With a position: fixed, the text won't wrap around the image but will hide underneath it. I tried float combinations with no success.
How would you approach this ? Thanks !
<div class="main">
<div class="description">
<div>
longish text
</div>
<figure>
<img class="illustration"
src="data:image:{{ p.id }}">
</figure>
</div>
</div>
.main {
margin-top: 2cm;
padding: 0 1cm 0cm 1cm;
column-count: 2;
column-gap: 2em;
column-fill: auto;
text-align: justify;
}
.produit-title {
color: firebrick;
padding: 2cm 1cm 0cm 1cm;
}
img.illustration {
margin-top: 0.1cm;
margin-left: auto;
margin-right: auto;
display: block;
max-height: 5cm;
max-width: 11cm;
border: solid 0.04cm;
border-color: firebrick;
}
expected result:
(edit) the text can be of variable length, but I would like the layout to stay the same. A short text can stop at the first column (role of colum-fill: auto), but the image would still be on the right.
Not an easy task at all. You can sort of hack it though, if your images have a fixed height:
div {
max-width:420px;
column-count: 2;
column-gap: 20px;
position: relative;
padding-top: 150px;
}
div img {
position: absolute;
top: 0;
right: 0;
height: 150px;
width: 200px;
}
div p:first-of-type {
margin-top: -150px;
}
<div>
<img src="http://via.placeholder.com/200x150px">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?orem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
</div>
The trick is to absolute position the image in the container then pull the text back up by setting a positive padding on the container and negative margin on the first paragrash, both equal number to the image height.
This is one of those things that definitely should be easier.
Can't you structure the html like this? Making sure that the image is positioned relatively inside the div?
<div class="main">
<div class="description">
<div>
longish text
<img class="illustration" src="data:image:{{ p.id }}">
more text
</div>
</div>
</div>
EDIT: If this does not work for you then as I see it you need to either decide where your image is always going to be e.g. always open your article with image followed by text and then you can position as required, or adopt some widely unsupported solution such as regions (https://www.html5rocks.com/en/tutorials/regions/adobe/).
Came upon this stack when trying to find a better solution than the one I went with which was the following. Only advantage to the accepted answer is it doesn't require absolute positioning. Still need to know the height of the image.
Note: the image does have to come before the text.
.columns {
columns: 2;
}
.image {
background-color: green;
width: 100px;
height: 100px;
column-span: all;
margin-left: auto;
}
.text {
margin-top: -100px; /* height of image */
}
<div class="columns">
<div class="image"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam erat velit. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Magna eget est lorem ipsum dolor. Feugiat in ante metus dictum at. Platea dictumst quisque sagittis purus sit amet. Nam aliquam sem et tortor. Velit dignissim sodales ut eu sem integer vitae justo eget. Tempor id eu nisl nunc mi ipsum faucibus vitae aliquet. Dapibus ultrices in iaculis nunc. Condimentum id venenatis a condimentum vitae sapien pellentesque. Luctus accumsan tortor posuere ac ut consequat semper. Viverra orci sagittis eu volutpat odio facilisis mauris. Suspendisse sed nisi lacus sed viverra tellus in hac habitasse. Et netus et malesuada fames ac turpis egestas sed tempus. Sit amet tellus cras adipiscing enim eu turpis egestas. Pretium vulputate sapien nec sagittis aliquam malesuada.
Dis parturient montes nascetur ridiculus mus mauris vitae. Morbi tristique senectus et netus et malesuada fames. Augue lacus viverra vitae congue eu consequat. Lobortis elementum nibh tellus molestie nunc non blandit massa. Dictum at tempor commodo ullamcorper a lacus vestibulum. Risus ultricies tristique nulla aliquet. Nulla pharetra diam sit amet nisl. Sed nisi lacus sed viverra tellus in hac habitasse. Arcu risus quis varius quam quisque id diam vel. Condimentum mattis pellentesque id nibh tortor id. Placerat duis ultricies lacus sed turpis. Quis eleifend quam adipiscing vitae proin sagittis. Ut tristique et egestas quis ipsum suspendisse. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat.
</div>
<div>
JSfiddle
I have a situation where I would like to float a small image to the left of text within a div. I don't want the text to wrap under the image, and some research led me to add the overflow:hidden; property on <p>. While this makes the paragraph next to the image behave as I want, the following paragraphs are then not aligned with the first. Is there a nice way to get all paragraphs aligned? I tried display: table-row;, but this affects other elements on the page (and I have read up on why this is the case).
I need to work within the constraints present in the JSFiddle (i.e., can't really modify html), and cross-browser support is a priority.
.header {
color: white;
background-color: red;
padding: 15px;
}
.header p {
overflow: hidden;
}
.img {
background-color: green;
width: 45px;
height: 45px;
float: left;
}
<div class="header">
<div class="img">
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut
pretium augue vitae neque finibus, quis ornare dolor fermentum.
</p>
<p>
Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus.
</p>
</div>
Use a margin-left on the paragraphs that is the width of the image + the margin/space you want between the image and paragraph. Then you have no need for the overflow.
.header {
color: white;
background-color: red;
padding: 15px;
}
.header p {
margin: 0 0 1em 55px;
}
.img {
background-color: green;
width: 45px;
height: 45px;
float: left;
}
<div class="header">
<div class="img">
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut
pretium augue vitae neque finibus, quis ornare dolor fermentum.
</p>
<p>
Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus.
</p>
</div>
So, you should set a div for the whole thing, one for the image and one for the text.
I don't know if that's what you're looking for, but here you go.
.container {
width: 400px;
height: auto;
}
.imageDiv {
max-width: 200px;
height: auto;
float: left;
}
.image {
max-width: 100%;
}
.text {
max-width: 200px;
min-width: 200px;
text-align: center;
float: left;
}
<div class="container">
<div class="text">
<p>
Some text.
</p>
</div>
<div class="imageDiv">
<img class="image" src="http://nexceris.com/wp-content/uploads/2014/04/bokeh-cover-bg.jpg">
</div>
</div>
Code the one div for other content and manage that two inside div like you want.
<div class="header">
<div class="img">
</div>
<div class="other">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut pretium augue vitae neque finibus, quis ornare dolor fermentum.
</p>
<p>
Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus.
</p>
</div>
</div>
I have a paragraph inside of a div but the text is too long and the text-overflow does not work, and I have read that nowrap fixes my problem but in this case it doesn't as the paragraph needs to be a certain height and not all on 1 line (needs to be multiple lines).
This image shows what I have and what I want it to look like (The image on the left is what I have now and the image on the right is how I want it to look):
http://i.imgur.com/5l5SSmh.jpg
It maybe worth mentioning that I will be adding JavaScript to change the red background containers height and I was hoping the text would change with it while still having the text-overflow applied to it.
This is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#expPanel {
background-image: url('http://i.imgur.com/76BdtTw.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
}
#expContainer {
display:block;
overflow: hidden;
text-overflow: ellipsis;
background: red;
height: 100%;
}
#content {
margin-top: 80px;
padding: 10px 20px;
color: blue;
font-family: Arial, "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<div style="position: relative;">
<div id="expPanel" style="width: 600px; height: 280px;">
<div id="expContainer">
<p id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non rutrum libero. Integer imperdiet tellus at ipsum dictum, ut dapibus nulla egestas. Ut tristique cursus finibus. Nunc et sapien a nisl cursus ultrices. Ut aliquam, urna et aliquam faucibus, sem velit iaculis orci, sit amet venenatis leo quam a nibh. Nunc commodo eu lectus vel tempor. Curabitur sed velit euismod, sagittis quam a, cursus ipsum. Maecenas in dui maximus mauris bibendum tincidunt a at turpis. Curabitur efficitur metus vitae augue tristique dapibus. Vestibulum porta laoreet aliquet. Phasellus aliquam, lacus eu pharetra lobortis, quam quam sollicitudin turpis, ultrices convallis libero risus sed nunc. Maecenas eget ornare orci. Suspendisse commodo tellus et arcu sodales ultrices. In lobortis ullamcorper justo consectetur facilisis. Cras at urna auctor, pulvinar nisi porta, pellentesque sapien. Etiam sapien quam, pulvinar eget lacus ac, tempor lobortis ante.
</p>
</div>
</div>
</div>
</body>
</html>
Solution that works responsively: line-height
The only way to do this is by adjusting the line height so it doesn't cut off the middle of the text, here is an example:
var btn = document.querySelector('button');
btn.onclick = function() {
var container = document.querySelector('.container');
container.style.height = 'auto';
btn.style.display = 'none';
return false;
};
.container {
background: #ddd;
height: 70px;
padding: 10px;
overflow: hidden;
}
.container p {
line-height: 1.6;
margin: 0;
}
button {
display: inline-block;
margin: 10px 0;
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem officiis eius enim consectetur saepe nisi voluptatem ut possimus. Ab aliquid blanditiis temporibus! Optio iusto odit illo inventore aspernatur. Expedita pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem officiis eius enim consectetur saepe nisi voluptatem ut possimus. Ab aliquid blanditiis temporibus! Optio iusto odit illo inventore aspernatur. Expedita pariatur.</p>
</div>
<button>Read more</button>
You can set overflow css property of container to scroll.
#expContainer {
display:block;
overflow:scroll;
text-overflow: ellipsis;
background: red;
height: 100%;
}
As you have fixed height of #expPanel , setting overflow of #expContainer will solve the problem.
You can set overflow CSS property of container to scroll/auto.
If you want your div must grow and show all content without scrollbar then remove overflow:hidden
#expPanel {
background-image: url('http://i.imgur.com/76BdtTw.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
}
#expContainer {
display:block;
overflow: auto; /*scroll*/
text-overflow: ellipsis;
background: red;
height: 100%;
}
#content {
margin-top: 80px;
padding: 10px 20px;
color: blue;
font-family: Arial, "Times New Roman", Times, serif;
}
<div style="position: relative;">
<div id="expPanel" style="width: 600px; height: 280px;">
<div id="expContainer">
<p id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non rutrum libero. Integer imperdiet tellus at ipsum dictum, ut dapibus nulla egestas. Ut tristique cursus finibus. Nunc et sapien a nisl cursus ultrices. Ut aliquam, urna et aliquam faucibus, sem velit iaculis orci, sit amet venenatis leo quam a nibh. Nunc commodo eu lectus vel tempor. Curabitur sed velit euismod, sagittis quam a, cursus ipsum. Maecenas in dui maximus mauris bibendum tincidunt a at turpis. Curabitur efficitur metus vitae augue tristique dapibus. Vestibulum porta laoreet aliquet. Phasellus aliquam, lacus eu pharetra lobortis, quam quam sollicitudin turpis, ultrices convallis libero risus sed nunc. Maecenas eget ornare orci. Suspendisse commodo tellus et arcu sodales ultrices. In lobortis ullamcorper justo consectetur facilisis. Cras at urna auctor, pulvinar nisi porta, pellentesque sapien. Etiam sapien quam, pulvinar eget lacus ac, tempor lobortis ante.
</p>
</div>
</div>
</div>
i need to create a layout two column container with the following criteria, please advice:
On Desktop View:
Content position left and will flow below the sidebar on the right when it's longer than sidebar's height.
Sidebar position right.
On Mobile View:
Content flow on top
Sidebar flow below Content box
Minimum Browser Support:
IE8
Breakpoints
max-width: 768px
Problem
The problem that i had was sidebar will always goes to the top of the content instead of below.
Additional Notes
I know this will work if i declare the content div container before the sidebar having both float left will work but that's not the result that i want be cause i want the content overflow around the sidebar when it's longer than the sidebar's height. Solution must be CSS and HTML only. no JS
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<div id="sidebar" class="cf">
<span class="sidebar-heading">Sidebar</span>
</div> <!-- sidebar -->
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non porttitor lectus. Suspendisse potenti. Donec porttitor libero id mauris dapibus, vulputate accumsan justo aliquam. Curabitur vel laoreet enim, ac vulputate nibh. In vulputate arcu augue, id vulputate quam volutpat id. Sed suscipit metus eget turpis bibendum viverra.</p>
<p>Donec ornare vestibulum congue. Nullam sed egestas ipsum, eget maximus tellus. Pellentesque tristique leo ac ligula dignissim rutrum. Aenean accumsan nibh augue, nec maximus lorem dictum scelerisque. Nulla commodo nisl justo, vel iaculis magna tristique a. Quisque eleifend urna nibh, in dictum nisl auctor nec. Maecenas venenatis nec tellus at lobortis. Sed in turpis sit amet elit sagittis accumsan ac hendrerit purus. Nulla et nibh vel turpis lacinia efficitur id non erat.</p>
<p>Curabitur aliquet, eros non facilisis sagittis, felis dolor consequat augue, vel tempus sem nisi vitae odio. Duis maximus arcu id enim egestas bibendum. Sed eleifend ex et accumsan fermentum. Vivamus varius sapien vel rutrum vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque eget ornare tortor. </p>
<p>Nunc sollicitudin euismod ex. Vestibulum lobortis libero sit amet tortor rhoncus, eu mollis augue pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id diam interdum, sodales purus in, ultricies libero. Vestibulum at dapibus erat. Mauris aliquam nulla risus, volutpat egestas est porta vitae. Quisque ultrices nulla vel mattis sagittis. Nam ornare risus arcu, in fermentum sapien pulvinar vel. Nullam ornare euismod lectus in sollicitudin. Sed ac sapien ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non porttitor lectus. Suspendisse potenti. Donec porttitor libero id mauris dapibus, vulputate accumsan justo aliquam. </p>
<p>Curabitur vel laoreet enim, ac vulputate nibh. In vulputate arcu augue, id vulputate quam volutpat id. Sed suscipit metus eget turpis bibendum viverra.</p>
<p>Donec ornare vestibulum congue. Nullam sed egestas ipsum, eget maximus tellus. Pellentesque tristique leo ac ligula dignissim rutrum. Aenean accumsan nibh augue, nec maximus lorem dictum scelerisque.</p>
<p>Nulla commodo nisl justo, vel iaculis magna tristique a. Quisque eleifend urna nibh, in dictum nisl auctor nec. Maecenas venenatis nec tellus at lobortis. Sed in turpis sit amet elit sagittis accumsan ac hendrerit purus. Nulla et nibh vel turpis lacinia efficitur id non erat.</p>
</div> <!-- #content -->
</div><!-- #container -->
<div class="other-content black cf">
<div class="other-content-inner">
<p>Nunc sollicitudin euismod ex. Vestibulum lobortis libero sit amet tortor rhoncus, eu mollis augue pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla id diam interdum, sodales purus in, ultricies libero. Vestibulum at dapibus erat. Mauris aliquam nulla risus, volutpat egestas est porta vitae. Quisque ultrices nulla vel mattis sagittis. Nam ornare risus arcu, in fermentum sapien pulvinar vel. Nullam ornare euismod lectus in sollicitudin. Sed ac sapien ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non porttitor lectus. Suspendisse potenti. Donec porttitor libero id mauris dapibus, vulputate accumsan justo aliquam. </p>
<p>Curabitur vel laoreet enim, ac vulputate nibh. In vulputate arcu augue, id vulputate quam volutpat id. Sed suscipit metus eget turpis bibendum viverra.</p>
<p>Donec ornare vestibulum congue. Nullam sed egestas ipsum, eget maximus tellus. Pellentesque tristique leo ac ligula dignissim rutrum. Aenean accumsan nibh augue, nec maximus lorem dictum scelerisque.</p>
</div><!-- .other-content-inner -->
</div><!-- .other-content -->
</body>
</html>
CSS
#container {
width: 100%;
max-width: 960px;
margin: 0 auto;
background: #f3f3f3;
}
.cf:before,
.cf:after {
content: '';
display: table;
}
.cf:after {
clear: both;
}
.other-content {
display: block;
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.other-content-inner {
padding: 15px;
}
.black {
background: #000;
color: #fff;
}
#sidebar {
float: right;
width: 300px;
height: 500px;
background: yellow;
margin: 0 0 30px 30px;
position: relative;
}
.sidebar-heading {
font-weight:bold;
font-size: 30px;
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom:0;
top:0;
margin: auto;
height: 30px;
}
#content {
display: inline;
}
#media only screen and (max-width: 768px) {
#sidebar {
width: 100%;
}
}
Click here to view my code
Let us look at the problem in a different way:
The source order is sidebar, content, footer; which works for desktop and must not be changed
The display order on mobiles should be content, sidebar, footer
We can use CSS flex box to alter the order in which the divs are displayed.
#container {
margin: 0 auto;
max-width: 960px;
}
#sidebar {
float: right;
margin: 0 0 30px 30px;
width: 300px;
background: #FFFF00;
}
#content {
background: #F3F3F3;
}
#footer {
background: #000000;
color: #FFFFFF;
}
#media only screen and (max-width: 768px) {
#container {
display: flex;
flex-direction: column;
}
#sidebar {
float: none;
margin: 0;
width: auto;
order: 2;
}
#content {
order: 1;
}
#footer {
order: 3;
}
}
<div id="container">
<div id="sidebar">
<p style="text-align: center; font-weight: bold;">Use <em>Full page</em> button to view <em>Desktop</em> version</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Immo videri fortasse. Quae cum dixisset, finem ille.</p>
<p>Sed ad bona praeterita redeamus. Tuo vero id quidem, inquam, arbitratu. Ea possunt paria non esse. Duo Reges: constructio interrete. Certe, nisi voluptatem tanti aestimaretis. Res enim concurrent contrariae. Quid adiuvas? Eadem nunc mea adversum te oratio est. Aliter homines, aliter philosophos loqui putas oportere?</p>
</div>
<div id="content">
<p>Sed virtutem ipsam inchoavit, nihil amplius. Cur iustitia laudatur? Quis Aristidem non mortuum diligit? Quid censes in Latino fore?</p>
<p>Id Sextilius factum negabat. Beatus sibi videtur esse moriens. Sumenda potius quam expetenda. Nunc omni virtuti vitium contrario nomine opponitur. Reguli reiciendam; At certe gravius. Contemnit enim disserendi elegantiam, confuse loquitur. Ego vero isti, inquam, permitto. Contemnit enim disserendi elegantiam, confuse loquitur.</p>
<p>Beatus sibi videtur esse moriens. Facete M. Id enim natura desiderat.</p>
</div>
<div id="footer">
<p>Polycratem Samium felicem appellabant. Faceres tu quidem, Torquate, haec omnia; Efficiens dici potest. Venit ad extremum; Quid, de quo nulla dissensio est?</p>
<p>Praeclare hoc quidem. Sed haec omittamus; Sed videbimus.</p>
</div>
</div>
In older browsers you can use display: table-* to achieve similar result:
#container {
margin: 0 auto;
max-width: 960px;
}
#sidebar {
float: right;
margin: 0 0 30px 30px;
width: 300px;
background: #FFFF00;
}
#content {
background: #F3F3F3;
}
#footer {
background: #000000;
color: #FFFFFF;
}
#media only screen and (max-width: 768px) {
#container {
display: table;
width: 100%;
}
#sidebar {
float: none;
margin: 0;
width: auto;
display: table-row-group;
}
#content {
display: table-header-group;
}
#footer {
display: table-footer-group;
}
}
<div id="container">
<div id="sidebar">
<p style="text-align: center; font-weight: bold;">Use <em>Full page</em> button to view <em>Desktop</em> version</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Immo videri fortasse. Quae cum dixisset, finem ille.</p>
<p>Sed ad bona praeterita redeamus. Tuo vero id quidem, inquam, arbitratu. Ea possunt paria non esse. Duo Reges: constructio interrete. Certe, nisi voluptatem tanti aestimaretis. Res enim concurrent contrariae. Quid adiuvas? Eadem nunc mea adversum te oratio est. Aliter homines, aliter philosophos loqui putas oportere?</p>
</div>
<div id="content">
<p>Sed virtutem ipsam inchoavit, nihil amplius. Cur iustitia laudatur? Quis Aristidem non mortuum diligit? Quid censes in Latino fore?</p>
<p>Id Sextilius factum negabat. Beatus sibi videtur esse moriens. Sumenda potius quam expetenda. Nunc omni virtuti vitium contrario nomine opponitur. Reguli reiciendam; At certe gravius. Contemnit enim disserendi elegantiam, confuse loquitur. Ego vero isti, inquam, permitto. Contemnit enim disserendi elegantiam, confuse loquitur.</p>
<p>Beatus sibi videtur esse moriens. Facete M. Id enim natura desiderat.</p>
</div>
<div id="footer">
<p>Polycratem Samium felicem appellabant. Faceres tu quidem, Torquate, haec omnia; Efficiens dici potest. Venit ad extremum; Quid, de quo nulla dissensio est?</p>
<p>Praeclare hoc quidem. Sed haec omittamus; Sed videbimus.</p>
</div>
</div>
Well. i am not sure if it is possible without changing the div position,
so i have come with a proposition, if it is possible for you to use jquery and enquire.js to simulate media queries then it is very easy.
see this demo..
http://codepen.io/anon/pen/xrBAj
or
CODEPEN
just you need to add this script
enquire.register("screen and (max-width:768px)", {
match : function() {
$('#sidebar').insertAfter('#content');
},
unmatch : function() {
$('#sidebar').insertBefore('#content');
}
}).listen();