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>
Related
The sticky footer pattern ensures that the footer sticks to the bottom of the viewport unless the non-footer content is tall enough in which case it is pushed below the bottom of the viewport.
The following application of this pattern works for Chrome and Opera but not Firefox. Am I missing anything?
#container {
min-height:100%;
position:relative;
}
#non-footer {
padding-left: 1em;
padding-right: 1em;
padding-bottom: 150px; /* 100px + 50px (#footer::height + #footer::margin-top) */
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: 50px 0 0 0 ;
height: 100px;
background: brown;
}
<body>
<div id='container'>
<div id='non-footer'>
<h1>Sticky footer pattern</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis purus ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque lorem.
</p>
</div>
<div id='footer'>
</div>
</div>
</body>
Surprisingly, even though it works from Chrome (when I place the HTML in a file) it's not displayed properly in the Stack Overflow's HTML pen facility in full page mode — even though I'm still using Chrome. What is observed instead is that the footer rises from the bottom of the viewport. This is the exact same failure mode that is observed under Firefox.
You might want to look into the vh unit coupled with display: flex...
html,body {
margin: 0;
padding: 0;
}
.container {
min-height: 100vh; /* make the container at least the height of the viewport */
display: flex; /* use flexbox */
flex-direction: column; /* use a vertical flex layout */
}
.content {
flex-grow: 1; /* expand to fill remaining container height */
background-color: #e9e9e9;
}
.footer {
background-color: #ccc;
height: 100px;
}
<div class='container'>
<div class='content'>
<h1>Content</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean
porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis purus
ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque
lorem.
</div>
<div class='footer'>Footer</div>
</div>
Set your html, body height to 100%
html, body
{
height:100%;
}
html, body
{
height:100%;
}
#container {
min-height: 100%;
position: relative;
}
#non-footer {
padding-left: 1em;
padding-right: 1em;
padding-bottom: 150px;
/* 100px + 50px (#footer::height + #footer::margin-top) */
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: 50px 0 0 0;
height: 100px;
background: brown;
}
<body>
<div id='container'>
<div id='non-footer'>
<h1>Sticky footer pattern</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean
porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis
purus ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque
lorem.
</p>
</div>
<div id='footer'>
</div>
</div>
</body>
Pointers: Sticky Footer - CSS Tricks
Based on this answer I ended up adding the following mozilla-specific fix:
#-moz-document url-prefix() {
html {
height: 100%;
}
body {
height: 95%;
}
}
95% is necessary as if 100% is specified, then the bottom of the footer gets cropped in Firefox (no idea why).
#-moz-document url-prefix() {
html {
height: 100%;
}
body {
height: 95%;
}
}
#container {
min-height:100%;
position:relative;
}
#non-footer {
padding-left: 1em;
padding-right: 1em;
padding-bottom: 150px; /* 100px + 50px (#footer::height + #footer::margin-top) */
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: 50px 0 0 0 ;
height: 100px;
background: brown;
}
<div id='container'>
<div id='non-footer'>
<h1>Sticky footer pattern</h1>
<p>
<a href='https://stackoverflow.com/q/46552641/274677'>SO question</a>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis purus ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque lorem.
</p>
</div>
<div id='footer'>
</div>
</div>
This works in Firefox as well but not as a Stack Overflow HTML/CSS snippet (when in full screen mode).
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 an element which I want to take up the lower half of the screen, at least, but still allow text to make it larger. Naturally, I would use min-height, but that seems to fail when it comes to vertically centering the text within.
I can't use position:absolute because it needs to remain in the DOM.
Here is a mockup of the situation:
* {
margin: 0;
padding: 0;
}
body {
height: 1000px;
}
.img {
height: 50%;
width: 100%;
background: lightblue;
}
.text {
min-height: 20%;
background: coral;
text-align: center;
margin: 0 15%;
}
.centered {
/* I need to center this within it's parent */
}
<body>
<div class="img"></div>
<div class="text">
<div class="centered">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit mauris vel libero pretium viverra. Mauris tristique nisl erat, convallis suscipit lacus consectetur ac. Ut pretium lorem odio, quis feugiat erat ultrices finibus. Curabitur nec suscipit felis. Ut at iaculis nisl, quis aliquet tellus. Aliquam eu massa velit. Etiam et ultricies velit. Ut et tortor feugiat, laoreet lacus et, faucibus turpis. Aliquam pretium elit ut nisl pellentesque, quis aliquet ante varius. Etiam sit amet elementum odio. Donec vulputate est at gravida faucibus.</p>
</div>
</div>
</body>
* {
margin: 0;
padding: 0;
}
body {
height: 1000px;
}
.img {
height: 50%;
width: 100%;
background: lightblue;
}
.text {
min-height: 20%;
background: coral;
text-align: center;
margin: 0 15%;
display: table;
}
.centered {
/* I need to center this within it's parent */
display: table-cell;
vertical-align: middle;
}
<div class="img"></div>
<div class="text">
<div class="centered">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit mauris vel libero pretium viverra. Mauris tristique nisl erat, convallis suscipit lacus consectetur ac. Ut pretium lorem odio, quis feugiat erat ultrices finibus. Curabitur nec suscipit felis. Ut at iaculis nisl, quis aliquet tellus. Aliquam eu massa velit. Etiam et ultricies velit. Ut et tortor feugiat, laoreet lacus et, faucibus turpis. Aliquam pretium elit ut nisl pellentesque, quis aliquet ante varius. Etiam sit amet elementum odio. Donec vulputate est at gravida faucibus.</p>
</div>
</div>
I was able to do this with display: flex and some padding. See fiddle.
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();
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; }