Text wrap around image, to one column - html
I have an image I want text to wrap around, but at about 793px I want it to just drop down to one column, image on top, text on bottom. I tried a media query with float: none, but for some reason that didn't work. Thanks in advance!
/*float left*/ .left { float: left; /*left in our text*/ margin: 3px; /*space around the image*/
}
#media (max-width: 793px;) {
img {
float:none;
}
}
<p> <img src="https://36.media.tumblr.com/e09631b272ecaf21862513edd536eeed/tumblr_n7a2ldALJt1so5delo1_500.jpg" alt="temp" class="left" /> Lorem "ipsum" dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Maecenas tempor finibus hendrerit. Aenean rutrum rhoncus ultricies. Vivamus egestas sollicitudin ex pulvinar finibus. Suspendisse a mi ac augue dictum blandit. Donec malesuada convallis placerat. Integer et hendrerit tellus. Donec eu justo mattis, consectetur orci ac, posuere diam. Integer nec accumsan turpis. Ut quis dolor eu ante pulvinar iaculis cursus at quam.
Donec laoreet facilisis sapien euismod finibus. Nam malesuada dapibus ex, sed rutrum tortor consequat in. Aenean quis elit dapibus, vestibulum massa nec, porta odio. Nam accumsan est sed velit scelerisque commodo. Morbi id massa quis lorem tristique convallis at vel leo. Aenean pharetra aliquam porta. Sed ac tellus rutrum, egestas leo sed, sagittis velit. Vestibulum et tellus arcu.
Suspendisse imperdiet purus felis, at pharetra magna molestie at. Aenean non nibh sed ex laoreet tempor vel vel dui. Fusce ut arcu eget mi pulvinar molestie a ut metus. Etiam ex ante, volutpat ac leo convallis, venenatis sollicitudin lorem. Mauris tempor mollis euismod. Phasellus viverra dolor egestas turpis pulvinar, ac sollicitudin arcu facilisis. Sed viverra quam lectus, in fermentum libero vestibulum ac. Duis fringilla tempus dui, lobortis fringilla lacus volutpat quis. Nam iaculis nisl vitae mauris scelerisque, eget vulputate purus aliquet. Nullam dictum nunc a enim tempus, et fermentum lectus tristique.
Nulla quis mattis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a elit nec ipsum accumsan cursus. Nunc vitae lorem a tellus aliquam luctus eu eget turpis. Vivamus dapibus elementum imperdiet. Nullam facilisis mauris ac tellus fringilla volutpat. Sed elementum ligula dolor, vitae tincidunt ligula ultrices in.
</p>
The reason you're having issues is that images are inline by default, so we need to add display: block to the image in the media query. Also your media query is missing some components.
CSS:
img{
float: left;
}
#media screen and (max-width: 793px){
img{
display: block;
float: none;
margin: 0 auto 15px;
}
}
That should do the trick. Here is a fiddle.
UPDATE
Centered the image with some margin as well updated fiddle and code.
I think the other answer works perfectly well. I was actually struggling with your bug when I realized one of the problems was that your media query wasn't formatted correctly. The semi-colon was messing things up. Anyways, happy coding!
img {
float: left;
margin: 3px;
}
#media (max-width: 793px) {
p {
float: left;
}
}
<img src="https://36.media.tumblr.com/e09631b272ecaf21862513edd536eeed/tumblr_n7a2ldALJt1so5delo1_500.jpg" alt="temp"/>
<p>Lorem "ipsum" dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Maecenas tempor finibus hendrerit. Aenean rutrum rhoncus ultricies. Vivamus egestas sollicitudin ex pulvinar finibus. Suspendisse a mi ac augue dictum blandit. Donec malesuada convallis placerat. Integer et hendrerit tellus. Donec eu justo mattis, consectetur orci ac, posuere diam. Integer nec accumsan turpis. Ut quis dolor eu ante pulvinar iaculis cursus at quam.
Donec laoreet facilisis sapien euismod finibus. Nam malesuada dapibus ex, sed rutrum tortor consequat in. Aenean quis elit dapibus, vestibulum massa nec, porta odio. Nam accumsan est sed velit scelerisque commodo. Morbi id massa quis lorem tristique convallis at vel leo. Aenean pharetra aliquam porta. Sed ac tellus rutrum, egestas leo sed, sagittis velit. Vestibulum et tellus arcu.
Suspendisse imperdiet purus felis, at pharetra magna molestie at. Aenean non nibh sed ex laoreet tempor vel vel dui. Fusce ut arcu eget mi pulvinar molestie a ut metus. Etiam ex ante, volutpat ac leo convallis, venenatis sollicitudin lorem. Mauris tempor mollis euismod. Phasellus viverra dolor egestas turpis pulvinar, ac sollicitudin arcu facilisis. Sed viverra quam lectus, in fermentum libero vestibulum ac. Duis fringilla tempus dui, lobortis fringilla lacus volutpat quis. Nam iaculis nisl vitae mauris scelerisque, eget vulputate purus aliquet. Nullam dictum nunc a enim tempus, et fermentum lectus tristique.
Nulla quis mattis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a elit nec ipsum accumsan cursus. Nunc vitae lorem a tellus aliquam luctus eu eget turpis. Vivamus dapibus elementum imperdiet. Nullam facilisis mauris ac tellus fringilla volutpat. Sed elementum ligula dolor, vitae tincidunt ligula ultrices in.
</p>
Related
How to animate float element while maintaining text wrapping?
I'm currently trying to animate an image inside a paragraph. The image is floating to the right, to have the text wrapping around it. I would like to animate the position of this image and having the text wrapping dynamically, how could I achieve that ?
img#img-1 {
animation: top_to_bottom 3s ease-in-out infinite;
float: right;
margin: 10px;
}
#keyframes top_to_bottom {
from {}
50% {
transform: translateY(100px);
}
to {
transform: translateY(0px);
}
}
<img src="https://picsum.photos/200" alt="" id="img-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna etiam tempor orci eu lobortis elementum nibh tellus. Ullamcorper dignissim cras tincidunt lobortis. Elit eget gravida cum sociis. Etiam sit amet nisl purus in mollis. Sapien et ligula ullamcorper malesuada proin libero. Massa tincidunt nunc pulvinar sapien et. Adipiscing enim eu turpis egestas pretium. Leo integer malesuada nunc vel risus commodo. Nunc consequat interdum varius sit amet mattis vulputate enim.
Vitae aliquet nec ullamcorper sit amet. Sem fringilla ut morbi tincidunt augue. Posuere morbi leo urna molestie at elementum eu facilisis sed. Sed arcu non odio euismod lacinia at quis risus. Ultrices eros in cursus turpis massa tincidunt dui ut ornare. Tellus cras adipiscing enim eu turpis. Vitae ultricies leo integer malesuada. Est ultricies integer quis auctor. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Eu turpis egestas pretium aenean pharetra magna ac. Non blandit massa enim nec. Euismod nisi porta lorem mollis aliquam ut porttitor. Diam sollicitudin tempor id eu nisl nunc mi. Et netus et malesuada fames. Sed enim ut sem viverra aliquet eget. Vel quam elementum pulvinar etiam non quam lacus. Et tortor at risus viverra adipiscing at in.
Libero volutpat sed cras ornare arcu dui vivamus arcu. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Velit dignissim sodales ut eu sem integer vitae. Turpis tincidunt id aliquet risus feugiat. Morbi tincidunt ornare massa eget egestas purus viverra. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Auctor urna nunc id cursus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Urna neque viverra justo nec. Lectus quam id leo in. Sed arcu non odio euismod. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Molestie nunc non blandit massa enim. Quam adipiscing vitae proin sagittis nisl rhoncus. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
</p>
shape-outside can do this:
img#img-1 {
animation: top_to_bottom 3s ease-in-out infinite;
float: right;
margin: 10px;
shape-outside: inset(0px 0 0 0);
}
p {
text-align:justify;
}
#keyframes top_to_bottom {
50% {
transform: translateY(100px);
shape-outside: inset(100px 0 0 0);
margin-bottom:110px;
}
}
<img src="https://picsum.photos/200" alt="" id="img-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna etiam tempor orci eu lobortis elementum nibh tellus. Ullamcorper dignissim cras tincidunt lobortis. Elit eget gravida cum
sociis. Etiam sit amet nisl purus in mollis. Sapien et ligula ullamcorper malesuada proin libero. Massa tincidunt nunc pulvinar sapien et. Adipiscing enim eu turpis egestas pretium. Leo integer malesuada nunc vel risus commodo. Nunc consequat interdum
varius sit amet mattis vulputate enim. Vitae aliquet nec ullamcorper sit amet. Sem fringilla ut morbi tincidunt augue. Posuere morbi leo urna molestie at elementum eu facilisis sed. Sed arcu non odio euismod lacinia at quis risus. Ultrices eros in cursus
turpis massa tincidunt dui ut ornare. Tellus cras adipiscing enim eu turpis. Vitae ultricies leo integer malesuada. Est ultricies integer quis auctor. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Eu turpis egestas pretium
aenean pharetra magna ac. Non blandit massa enim nec. Euismod nisi porta lorem mollis aliquam ut porttitor. Diam sollicitudin tempor id eu nisl nunc mi. Et netus et malesuada fames. Sed enim ut sem viverra aliquet eget. Vel quam elementum pulvinar etiam
non quam lacus. Et tortor at risus viverra adipiscing at in. Libero volutpat sed cras ornare arcu dui vivamus arcu. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Velit dignissim sodales ut eu sem integer vitae. Turpis tincidunt
id aliquet risus feugiat. Morbi tincidunt ornare massa eget egestas purus viverra. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Auctor urna nunc id cursus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper
dignissim. Urna neque viverra justo nec. Lectus quam id leo in. Sed arcu non odio euismod. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Molestie nunc non blandit massa enim. Quam adipiscing vitae proin sagittis nisl rhoncus. Facilisi
cras fermentum odio eu feugiat pretium nibh ipsum. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
</p>
Is there any way to use <p> without there being space on the top or bottom?
i know the title might sound confusing, but basically i am wondering if there's any way to use paragraph breaks but without space at the top or bottom when there's nothing above or below the text?
body {
font-family:arial;
background:#222;
}
#wrapper {
width:100%;
margin-top:100px;
}
.post_container {
background:#fff;
border:1px solid red;
width:500px;
height:auto;
text-align:justify;
padding:15px;
margin:0 auto;
margin-bottom:50px;
}
.post {
font-size:16px;
}
<body>
<div id="wrapper">
<div class="post_container">
<div class="post">
<div style="height:auto;max-height:550px;overflow:auto;scrollbar-width:none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue. Amet aliquam id diam maecenas ultricies mi. Mi quis hendrerit dolor magna eget est. Pharetra magna ac placerat vestibulum lectus. Sagittis vitae et leo duis. Id nibh tortor id aliquet. Nullam non nisi est sit. Urna molestie at elementum eu facilisis. Pellentesque id nibh tortor id aliquet. Eget nullam non nisi est sit. Velit sed ullamcorper morbi tincidunt. Ac auctor augue mauris augue. Velit aliquet sagittis id consectetur. Amet justo donec enim diam vulputate ut pharetra sit. Lobortis mattis aliquam faucibus purus in massa tempor nec feugiat. Cursus eget nunc scelerisque viverra mauris in aliquam sem.</p>
<p>At lectus urna duis convallis convallis tellus id. Egestas sed sed risus pretium quam vulputate dignissim. Tristique senectus et netus et malesuada fames ac turpis. Volutpat commodo sed egestas egestas fringilla. Ipsum dolor sit amet consectetur adipiscing. Donec massa sapien faucibus et molestie ac feugiat. Blandit massa enim nec dui nunc mattis enim. Id ornare arcu odio ut sem nulla pharetra diam sit. Id venenatis a condimentum vitae sapien. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Turpis in eu mi bibendum neque egestas congue quisque. Quis varius quam quisque id diam vel quam elementum pulvinar. Nunc scelerisque viverra mauris in aliquam. Turpis egestas maecenas pharetra convallis posuere. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Ornare suspendisse sed nisi lacus sed viverra. Adipiscing commodo elit at imperdiet dui accumsan sit amet. Varius duis at consectetur lorem donec massa sapien faucibus. At consectetur lorem donec massa sapien faucibus et molestie ac.</p>
<p>Fringilla ut morbi tincidunt augue interdum velit euismod. Mi quis hendrerit dolor magna eget. Ultricies integer quis auctor elit sed vulputate mi sit. Quis lectus nulla at volutpat. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Duis convallis convallis tellus id. Dignissim sodales ut eu sem. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Non enim praesent elementum facilisis. Ultricies mi eget mauris pharetra. Id leo in vitae turpis massa sed elementum. Cursus risus at ultrices mi. In iaculis nunc sed augue lacus viverra vitae congue. Aliquet bibendum enim facilisis gravida neque convallis a cras. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Diam phasellus vestibulum lorem sed risus ultricies tristique nulla.</p>
<p>Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Ut venenatis tellus in metus vulputate eu. Nibh venenatis cras sed felis eget velit aliquet sagittis. Amet cursus sit amet dictum sit amet justo donec. Euismod in pellentesque massa placerat duis ultricies lacus sed turpis. Purus sit amet luctus venenatis lectus. Augue interdum velit euismod in. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Non tellus orci ac auctor augue mauris augue neque. Arcu dui vivamus arcu felis. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Eget dolor morbi non arcu risus. Rutrum tellus pellentesque eu tincidunt tortor. Enim facilisis gravida neque convallis a cras semper. Quis ipsum suspendisse ultrices gravida. A cras semper auctor neque vitae tempus quam.</p>
<p>Tincidunt dui ut ornare lectus sit amet est placerat. Ultricies lacus sed turpis tincidunt. Aliquam eleifend mi in nulla posuere sollicitudin aliquam. Lectus quam id leo in vitae turpis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. Tincidunt praesent semper feugiat nibh sed pulvinar proin. Hac habitasse platea dictumst quisque sagittis purus. Amet aliquam id diam maecenas ultricies mi eget mauris. A lacus vestibulum sed arcu non odio euismod lacinia. Magna etiam tempor orci eu. Velit laoreet id donec ultrices tincidunt arcu. Aenean pharetra magna ac placerat vestibulum lectus mauris. Turpis cursus in hac habitasse platea dictumst. Imperdiet nulla malesuada pellentesque elit eget gravida. Magna eget est lorem ipsum dolor sit amet. Sagittis purus sit amet volutpat. Morbi tristique senectus et netus et malesuada fames ac turpis.</p>
</div> <!-- scroll style -->
</div> <!-- post -->
</div> <!-- post container -->
</body>
You have 15px of padding coming from post_container which you can change to padding: 0 15px; to remove the top and bottom padding. Then you need to override the default p style of margin: 1em as others have indicated. One way is shown below:
body {
font-family:arial;
background:#222;
}
#wrapper {
width:100%;
margin-top:100px;
}
.post_container {
background:#fff;
border:1px solid red;
width:500px;
height:auto;
text-align:justify;
padding:0 15px;
margin:0 auto;
margin-bottom:50px;
}
.post {
font-size:16px;
}
<div id="wrapper">
<div class="post_container">
<div class="post">
<div style="max-height:550px;overflow:auto;scrollbar-width:none;">
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>At lectus urna duis convallis convallis tellus id. Egestas sed sed risus pretium quam vulputate dignissim. Tristique senectus et netus et malesuada fames ac turpis. Volutpat commodo sed egestas egestas fringilla. </p>
<p style="margin: 0;">Fringilla ut morbi tincidunt augue interdum velit euismod. Mi quis hendrerit dolor magna eget. Ultricies integ</p>
</div> <!-- scroll style -->
</div> <!-- post -->
</div> <!-- post container -->
add the following in your .css file:
p {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
Angular2 <div> which taking full screen size
Im building an Angular2 application and have the following issue which I can't seem to solve or find a solution for. Here is an image of my page:
Code:
content.component.html
<app-header></app-header>
<div class="content">
</div>
content.component.css
.content{
height: calc(100vh - 60px);
background-color: rgb(167, 167, 167);
}
Header has a fixed height of 60px;
I want to give the content component a background-color and I'm looking for a <div> which has the following properties:
The <div> needs to fill up the whole page but not more than this (no scrollbars if not necessary).
The <div> should automatically adjust in size whenever scrollbars do arrive (when screen width is getting smaller and content pressed on top of each other).
I tried height: calc(100vh - headercomponentHeight) but this gives problems when the content is stacked and scrollbars pop up because the content will flow out of the <div>.
Something like this should work
header {
background: #ccc;
height: 60px;
}
main {
background: #ddd;
min-height: calc(100vh - 60px);
position: relative;
padding: 20px;
}
<header></header>
<main class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa sed elementum tempus egestas. Tempus quam pellentesque nec nam. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Cursus risus at ultrices mi. Donec massa sapien faucibus et. Nulla pellentesque dignissim enim sit. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. At urna condimentum mattis pellentesque id nibh. Diam in arcu cursus euismod quis viverra nibh. Nec feugiat nisl pretium fusce. Cras tincidunt lobortis feugiat vivamus at augue eget. Placerat vestibulum lectus mauris ultrices eros in. Bibendum at varius vel pharetra. Sed velit dignissim sodales ut eu sem integer. Enim nec dui nunc mattis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa sed elementum tempus egestas. Tempus quam pellentesque nec nam. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Cursus risus at ultrices mi. Donec massa sapien faucibus et. Nulla pellentesque dignissim enim sit. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. At urna condimentum mattis pellentesque id nibh. Diam in arcu cursus euismod quis viverra nibh. Nec feugiat nisl pretium fusce. Cras tincidunt lobortis feugiat vivamus at augue eget. Placerat vestibulum lectus mauris ultrices eros in. Bibendum at varius vel pharetra. Sed velit dignissim sodales ut eu sem integer. Enim nec dui nunc mattis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa sed elementum tempus egestas. Tempus quam pellentesque nec nam. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Cursus risus at ultrices mi. Donec massa sapien faucibus et. Nulla pellentesque dignissim enim sit. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. At urna condimentum mattis pellentesque id nibh. Diam in arcu cursus euismod quis viverra nibh. Nec feugiat nisl pretium fusce. Cras tincidunt lobortis feugiat vivamus at augue eget. Placerat vestibulum lectus mauris ultrices eros in. Bibendum at varius vel pharetra. Sed velit dignissim sodales ut eu sem integer. Enim nec dui nunc mattis.</p>
</main>
Div disappearing under another div
Sorry for the vague title, but I have an issue that I've been unable to find a fix to. I'm trying to create a 2 column website with equal length columns. I've been following this tutorial and it is mostly working but one part breaks. The content of the right hand column is disappearing under the background. My apologies beforehand, I'm really new to this.
container below contains the entire page; Header, Nav, Content and footer. If you need the rest of the code, let me know. The webpage in operation can be viewed here;
#container {
float: left;
margin-left: 5px;
width: 1023px;
height: 100%;
}
#containerLeft {
float: left;
background: #fff;
width: 100%;
position: relative;
overflow: hidden;
right: 24%;
height: 100%;
}
#containerRight {
float: left;
background: #e7e1d7;
width: 100%;
position: relative;
overflow: hidden;
height: 100%;
}
#rightContent {
float: left;
width: 24%;
overflow: hidden;
position: relative;
z-index: 5;
}
#leftContent {
float: left;
width: 76%;
position: relative;
overflow: hidden;
}
<div id="containerRight">
<div id="containerLeft">
<div id="rightContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu enim, laoreet nec orci sed, sagittis condimentum libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut tempus tellus nisi, ut bibendum quam eleifend nec. Integer
semper eu dui id vestibulum. Mauris porttitor ullamcorper laoreet. Integer non nunc sit amet tortor porta bibendum vel sed enim. Maecenas elit mauris, consectetur mollis varius vitae, dignissim non purus. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Phasellus eu ligula ligula. Nulla posuere quis nisl sed tincidunt. Praesent vel nisi orci. Pellentesque congue vel enim eu pulvinar. Vivamus massa ante, malesuada eget rutrum varius, placerat ut arcu. Pellentesque rutrum lacinia
ex sit amet sollicitudin.</p>
<p>Integer rhoncus, enim eu iaculis commodo, nulla arcu porta tortor, a pellentesque ante justo ut nisi. Donec ex libero, consequat at ligula vitae, sodales maximus eros. Aenean feugiat porttitor dui a cursus. Aliquam aliquam et sapien a auctor. Suspendisse
placerat sem quis dui feugiat accumsan. Maecenas ultrices sagittis augue, et dictum sem imperdiet quis. In purus nisl, interdum ac dolor vitae, eleifend hendrerit justo. Nullam facilisis, orci in fermentum condimentum, velit diam pulvinar magna,
ut ornare nibh nunc vel sapien. Phasellus aliquet massa justo, a eleifend diam pharetra vel. Integer sem dui, elementum eget orci eget, feugiat feugiat velit. Aenean eget dapibus metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Etiam efficitur ipsum nisl, eu hendrerit tellus ultricies sit amet. Donec pulvinar interdum ante, in malesuada lacus consequat vel. Aliquam commodo tellus vel metus accumsan facilisis. Nulla facilisi.</p>
<p>Nulla facilisi. Donec vitae gravida orci, vitae sollicitudin nisl. Sed sed metus risus. Donec porttitor, augue quis elementum pellentesque, libero arcu pretium est, ut placerat enim quam nec quam. Nam vel mauris dapibus, commodo nibh ac, cursus
eros. Curabitur tristique mauris nec justo laoreet laoreet. Nam nisi elit, fermentum eu egestas sollicitudin, molestie sed diam. Nulla at quam nec purus varius scelerisque non eget augue. In quis ex ac felis iaculis lobortis at vel sem. Ut luctus
quam ac blandit sodales. Etiam sodales arcu eu tellus interdum mollis. Integer feugiat dui quis magna scelerisque, vel fringilla nulla aliquam. Fusce et rhoncus libero. Aliquam nibh nunc, consectetur et ipsum sit amet, vulputate hendrerit sapien.
Sed orci elit, euismod in libero nec, ornare feugiat erat.</p>
<p>Suspendisse potenti. Morbi consectetur, dui eu rutrum luctus, dui diam laoreet ex, ut fermentum enim eros at urna. Nulla at luctus tortor, quis euismod libero. Cras sodales augue at dui fermentum facilisis. Nullam vehicula sapien semper neque euismod,
non convallis sem iaculis. Cras ultricies convallis ex, nec varius tellus consectetur ut. Maecenas efficitur vestibulum est at ultrices. Nulla sit amet est iaculis, fringilla justo a, suscipit orci. Etiam rutrum auctor bibendum. Donec molestie
diam at lacus eleifend lacinia. Proin sit amet enim elementum, egestas odio quis, euismod nibh. In hac habitasse platea dictumst. Ut quis ante id elit semper aliquam. Aliquam a tempus justo. Aenean finibus nulla augue, eget dictum magna congue
at.</p>
<p>Praesent nisl neque, rutrum non mauris et, hendrerit iaculis odio. Fusce nisi elit, ultrices rhoncus magna nec, pulvinar luctus ex. Mauris id ante eget arcu suscipit efficitur. Aliquam imperdiet lectus ante, eget laoreet metus mollis ut. Praesent
volutpat suscipit arcu, at finibus dolor. Sed vitae pulvinar mi, quis condimentum justo. Donec sed tincidunt justo. Mauris non semper justo. Sed facilisis libero eget lorem gravida, ac consectetur eros pulvinar.</p>
</div>
<div id="leftContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu enim, laoreet nec orci sed, sagittis condimentum libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut tempus tellus nisi, ut bibendum quam eleifend nec. Integer
semper eu dui id vestibulum. Mauris porttitor ullamcorper laoreet. Integer non nunc sit amet tortor porta bibendum vel sed enim. Maecenas elit mauris, consectetur mollis varius vitae, dignissim non purus. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Phasellus eu ligula ligula. Nulla posuere quis nisl sed tincidunt. Praesent vel nisi orci. Pellentesque congue vel enim eu pulvinar. Vivamus massa ante, malesuada eget rutrum varius, placerat ut arcu. Pellentesque rutrum lacinia
ex sit amet sollicitudin.</p>
<p>Integer rhoncus, enim eu iaculis commodo, nulla arcu porta tortor, a pellentesque ante justo ut nisi. Donec ex libero, consequat at ligula vitae, sodales maximus eros. Aenean feugiat porttitor dui a cursus. Aliquam aliquam et sapien a auctor. Suspendisse
placerat sem quis dui feugiat accumsan. Maecenas ultrices sagittis augue, et dictum sem imperdiet quis. In purus nisl, interdum ac dolor vitae, eleifend hendrerit justo. Nullam facilisis, orci in fermentum condimentum, velit diam pulvinar magna,
ut ornare nibh nunc vel sapien. Phasellus aliquet massa justo, a eleifend diam pharetra vel. Integer sem dui, elementum eget orci eget, feugiat feugiat velit. Aenean eget dapibus metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Etiam efficitur ipsum nisl, eu hendrerit tellus ultricies sit amet. Donec pulvinar interdum ante, in malesuada lacus consequat vel. Aliquam commodo tellus vel metus accumsan facilisis. Nulla facilisi.</p>
<p>Nulla facilisi. Donec vitae gravida orci, vitae sollicitudin nisl. Sed sed metus risus. Donec porttitor, augue quis elementum pellentesque, libero arcu pretium est, ut placerat enim quam nec quam. Nam vel mauris dapibus, commodo nibh ac, cursus
eros. Curabitur tristique mauris nec justo laoreet laoreet. Nam nisi elit, fermentum eu egestas sollicitudin, molestie sed diam. Nulla at quam nec purus varius scelerisque non eget augue. In quis ex ac felis iaculis lobortis at vel sem. Ut luctus
quam ac blandit sodales. Etiam sodales arcu eu tellus interdum mollis. Integer feugiat dui quis magna scelerisque, vel fringilla nulla aliquam. Fusce et rhoncus libero. Aliquam nibh nunc, consectetur et ipsum sit amet, vulputate hendrerit sapien.
Sed orci elit, euismod in libero nec, ornare feugiat erat.</p>
<p>Suspendisse potenti. Morbi consectetur, dui eu rutrum luctus, dui diam laoreet ex, ut fermentum enim eros at urna. Nulla at luctus tortor, quis euismod libero. Cras sodales augue at dui fermentum facilisis. Nullam vehicula sapien semper neque euismod,
non convallis sem iaculis. Cras ultricies convallis ex, nec varius tellus consectetur ut. Maecenas efficitur vestibulum est at ultrices. Nulla sit amet est iaculis, fringilla justo a, suscipit orci. Etiam rutrum auctor bibendum. Donec molestie
diam at lacus eleifend lacinia. Proin sit amet enim elementum, egestas odio quis, euismod nibh. In hac habitasse platea dictumst. Ut quis ante id elit semper aliquam. Aliquam a tempus justo. Aenean finibus nulla augue, eget dictum magna congue
at.</p>
<p>Praesent nisl neque, rutrum non mauris et, hendrerit iaculis odio. Fusce nisi elit, ultrices rhoncus magna nec, pulvinar luctus ex. Mauris id ante eget arcu suscipit efficitur. Aliquam imperdiet lectus ante, eget laoreet metus mollis ut. Praesent
volutpat suscipit arcu, at finibus dolor. Sed vitae pulvinar mi, quis condimentum justo. Donec sed tincidunt justo. Mauris non semper justo. Sed facilisis libero eget lorem gravida, ac consectetur eros pulvinar.</p>
</div>
</div>
</div>
As you can see, I tried using z-index but it didn't appear to work. I also tried margins and padding, but that broke things entirely, and left/right as directed in the tutorial didn't do anything useful.
Here is the code you need for your 2 columns layout. You made several mistakes:
Your first containerLeft doesn't need an height: 100% and position: relative;.
Your second containerRight doesn't need an height: 100%.
You just need two containers as you only have 2 columns.
Check the code to see how to calculate the width of your columns with left and right.
However, make sure you do need this kind of layout (having equal columns height) because this is a lot of extra code for a layout. You can also check this article for extra techniques depending on the browser support you need: http://css-tricks.com/fluid-width-equal-height-columns/
Check the corrected code below:
.header {
background-color: AliceBlue;
}
.footer {
clear: both;
background-color: Beige;
}
#containerLeft {
clear: left;
float: left;
width: 100%;
overflow: hidden;
background-color: #999;
}
#containerRight {
float: left;
width: 100%;
position: relative;
right: 24%; /* this will make your right column 24% width */
background-color: #e4e4e4;
}
#leftContent {
float: left;
width: 68%; /* Your left container is now 100% - 24% (containerRight) = 76%. I have included a padding of 8% to make your content breathe so 76% - 8% = 68% */
position: relative;
left: 28%; /* Your content in your left container will start at 100% - 76% (left container width) = 24%. I have included a paading-left of 4% which makes it 24 + 4 = 28% */
overflow: hidden;
}
#rightContent {
float: left;
width: 20%; /* Your right column width is 24% and I have included a 4% padding so 24 - 4 = 20% */
position: relative;
left: 34%; /* Your content will start at 100% - 68% (width of leftContent) = 32%. I have included a 2% padding so 32 + 2 = 34% */
overflow: hidden;
}
<section class="header">
<div class="banner">
Your banner
</div>
<nav>
Your nav
</nav>
</section>
<section class="main">
<div id="containerLeft">
<div id="containerRight">
<div id="leftContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</div>
<div id="rightContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
<!-- /end container2 -->
</div>
<!-- /end container1 -->
</section>
<section class="footer">
Your footer
</section>
How to get both div to be the same height
I have a website where I need the main page and the right panel div elements to be the same height.
This is the markup I got so far :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body, form, html {
height: 100%;
}
html
{
font-family: helvetica, Arial,sans-serif;
font-size: 13px;
margin: 0px;
padding: 0px;
background-color: #f4f4f4;
}
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -140px;
}
#header
{
background: url("Images/backgrounds/headback_50x50.jpg") repeat-x scroll center top;
width: 100%;
margin-top: 0px;
height: 50px;
background-color: #474747;
}
#header .content {
width: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
#header #mainMenu {
float: left;
margin-left: 50px;
margin-top: 23px;
}
#mainContent
{
background-repeat: repeat-y;
width: 1006px;
padding: 10px 20px 10px 20px;
background-color: #f4f4f4;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
#mainContent #page {
width: 800px;
float: left;
background-color: #ffffff;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}
#mainContent #rightPanel {
width: 196px;
overflow: visible;
float: left;
margin-left: 10px;
height: 1000px;
}
#mainContent #rightPanel #rightCon {
background-color: #ffffff;
padding: 7px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}
#footer
{
background: url("Images/backgrounds/footerback_300x300.jpg") repeat-x scroll center top;
width: 100%;
margin: 0px;
height: 200px;
background-color: #3d3d3d;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header">
<div class="content">
<div id="contentBody">
<div class="mainLogo"> </div>
<div id="mainMenu">
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div id="mainContent">
<div id="page">
Lorem ipsum dolor sit amet, et molestie diam viverra sed proin, nec aenean. Vel donec donec, luctus donec elementum sed. Tristique arcu ut mauris quam potenti in. Mauris velit ut torquent, sagittis et, mi tellus tincidunt elit posuere. Enim aliquam quam sociosqu wisi. Dignissim blandit id. Praesent donec, pellentesque nulla.
Integer aliquam tincidunt sapien neque nec, auctor lacinia nullam lectus dolor. Vehicula litora vel lacinia, auctor ultricies, lacus orci ligula leo eros, turpis vel repellendus erat felis totam suscipit, nulla magnis justo wisi inceptos. A tortor eget quis massa vitae mauris, urna lorem auctor congue, aliquam pellentesque at, quis enim id platea ipsum et. Lectus mauris, hac sit vestibulum diam nam, massa laoreet arcu tincidunt sagittis malesuada mattis, velit in lacus augue quisque, quam eget dolor et. Nostrud nec, urna natoque, turpis a, mauris id viverra id. Sit posuere, ut placerat, ac tempus nulla consectetuer. Sit fames quam morbi proin ut, mi massa, justo erat at curae tellus dignissim non, viverra sodales egestas imperdiet molestie faucibus mauris, morbi massa enim non.
Nec massa. Libero ornare est magnis, placerat ipsum justo ut in penatibus tortor, libero rutrum incididunt vehicula, elit elit accumsan donec. Urna auctor nonummy arcu, mi vivamus enim dis eu, etiam cursus faucibus quam eu, neque ipsum, ultrices enim. Laoreet mollis vestibulum, ut lacus ante ipsum. Hymenaeos sapien ut at, non wisi ipsum magna sed et justo, nulla adipiscing quis eget et feugiat diam, justo malesuada curabitur, aliquet ac condimentum quisque justo duis tortor. Vestibulum in semper turpis scelerisque diam, egestas magna dolorum, est consequat velit consectetuer tempus, orci est. Netus amet, eos rutrum lacus, nec ad sed ipsum tortor mattis tincidunt, et eget ut auctor aliquam sollicitudin diam, ornare elit pede cursus ornare elit ante. Suspendisse suspendisse sem justo, erat dictum elementum volutpat vel urna a. Vestibulum sodales, vel ut massa sapien orci, luctus provident iaculis, lorem libero ut et in, at ante felis. Maecenas praesent in. Justo ut sollicitudin magnis vitae morbi, auctor malesuada vel vestibulum vitae, in risus elit mi, facilisi suscipit congue volutpat nisi et, pretium lacus.
Velit amet vel praesent id, elit duis bibendum pharetra phasellus eget sit, nibh consequat, justo magna vestibulum vestibulum. Vitae elit tortor adipiscing aliquam, sit elit fringilla velit tincidunt in risus, aenean sem lectus phasellus mattis volutpat quis. Sem vehicula lorem id eros nullam, at proin in. Wisi dictum imperdiet, nunc gravida nibh, pellentesque tellus aliquam diam culpa sit amet, porro pede risus volutpat faucibus ut libero, viverra donec. Fringilla mauris duis mauris turpis nam. Ante pellentesque, fusce lacus vitae lacus tincidunt, laoreet eget, vel faucibus amet vel. Eleifend cras et fermentum pharetra, justo porta, sapien amet nullam habitant dolor curabitur et, id eu sit. Vitae at, in et. Convallis rutrum.
Lorem ipsum dolor sit amet, et molestie diam viverra sed proin, nec aenean. Vel donec donec, luctus donec elementum sed. Tristique arcu ut mauris quam potenti in. Mauris velit ut torquent, sagittis et, mi tellus tincidunt elit posuere. Enim aliquam quam sociosqu wisi. Dignissim blandit id. Praesent donec, pellentesque nulla.
Integer aliquam tincidunt sapien neque nec, auctor lacinia nullam lectus dolor. Vehicula litora vel lacinia, auctor ultricies, lacus orci ligula leo eros, turpis vel repellendus erat felis totam suscipit, nulla magnis justo wisi inceptos. A tortor eget quis massa vitae mauris, urna lorem auctor congue, aliquam pellentesque at, quis enim id platea ipsum et. Lectus mauris, hac sit vestibulum diam nam, massa laoreet arcu tincidunt sagittis malesuada mattis, velit in lacus augue quisque, quam eget dolor et. Nostrud nec, urna natoque, turpis a, mauris id viverra id. Sit posuere, ut placerat, ac tempus nulla consectetuer. Sit fames quam morbi proin ut, mi massa, justo erat at curae tellus dignissim non, viverra sodales egestas imperdiet molestie faucibus mauris, morbi massa enim non.
Nec massa. Libero ornare est magnis, placerat ipsum justo ut in penatibus tortor, libero rutrum incididunt vehicula, elit elit accumsan donec. Urna auctor nonummy arcu, mi vivamus enim dis eu, etiam cursus faucibus quam eu, neque ipsum, ultrices enim. Laoreet mollis vestibulum, ut lacus ante ipsum. Hymenaeos sapien ut at, non wisi ipsum magna sed et justo, nulla adipiscing quis eget et feugiat diam, justo malesuada curabitur, aliquet ac condimentum quisque justo duis tortor. Vestibulum in semper turpis scelerisque diam, egestas magna dolorum, est consequat velit consectetuer tempus, orci est. Netus amet, eos rutrum lacus, nec ad sed ipsum tortor mattis tincidunt, et eget ut auctor aliquam sollicitudin diam, ornare elit pede cursus ornare elit ante. Suspendisse suspendisse sem justo, erat dictum elementum volutpat vel urna a. Vestibulum sodales, vel ut massa sapien orci, luctus provident iaculis, lorem libero ut et in, at ante felis. Maecenas praesent in. Justo ut sollicitudin magnis vitae morbi, auctor malesuada vel vestibulum vitae, in risus elit mi, facilisi suscipit congue volutpat nisi et, pretium lacus.
Velit amet vel praesent id, elit duis bibendum pharetra phasellus eget sit, nibh consequat, justo magna vestibulum vestibulum. Vitae elit tortor adipiscing aliquam, sit elit fringilla velit tincidunt in risus, aenean sem lectus phasellus mattis volutpat quis. Sem vehicula lorem id eros nullam, at proin in. Wisi dictum imperdiet, nunc gravida nibh, pellentesque tellus aliquam diam culpa sit amet, porro pede risus volutpat faucibus ut libero, viverra donec. Fringilla mauris duis mauris turpis nam. Ante pellentesque, fusce lacus vitae lacus tincidunt, laoreet eget, vel faucibus amet vel. Eleifend cras et fermentum pharetra, justo porta, sapien amet nullam habitant dolor curabitur et, id eu sit. Vitae at, in et. Convallis rutrum.
Lorem ipsum dolor sit amet, et molestie diam viverra sed proin, nec aenean. Vel donec donec, luctus donec elementum sed. Tristique arcu ut mauris quam potenti in. Mauris velit ut torquent, sagittis et, mi tellus tincidunt elit posuere. Enim aliquam quam sociosqu wisi. Dignissim blandit id. Praesent donec, pellentesque nulla.
Integer aliquam tincidunt sapien neque nec, auctor lacinia nullam lectus dolor. Vehicula litora vel lacinia, auctor ultricies, lacus orci ligula leo eros, turpis vel repellendus erat felis totam suscipit, nulla magnis justo wisi inceptos. A tortor eget quis massa vitae mauris, urna lorem auctor congue, aliquam pellentesque at, quis enim id platea ipsum et. Lectus mauris, hac sit vestibulum diam nam, massa laoreet arcu tincidunt sagittis malesuada mattis, velit in lacus augue quisque, quam eget dolor et. Nostrud nec, urna natoque, turpis a, mauris id viverra id. Sit posuere, ut placerat, ac tempus nulla consectetuer. Sit fames quam morbi proin ut, mi massa, justo erat at curae tellus dignissim non, viverra sodales egestas imperdiet molestie faucibus mauris, morbi massa enim non.
Nec massa. Libero ornare est magnis, placerat ipsum justo ut in penatibus tortor, libero rutrum incididunt vehicula, elit elit accumsan donec. Urna auctor nonummy arcu, mi vivamus enim dis eu, etiam cursus faucibus quam eu, neque ipsum, ultrices enim. Laoreet mollis vestibulum, ut lacus ante ipsum. Hymenaeos sapien ut at, non wisi ipsum magna sed et justo, nulla adipiscing quis eget et feugiat diam, justo malesuada curabitur, aliquet ac condimentum quisque justo duis tortor. Vestibulum in semper turpis scelerisque diam, egestas magna dolorum, est consequat velit consectetuer tempus, orci est. Netus amet, eos rutrum lacus, nec ad sed ipsum tortor mattis tincidunt, et eget ut auctor aliquam sollicitudin diam, ornare elit pede cursus ornare elit ante. Suspendisse suspendisse sem justo, erat dictum elementum volutpat vel urna a. Vestibulum sodales, vel ut massa sapien orci, luctus provident iaculis, lorem libero ut et in, at ante felis. Maecenas praesent in. Justo ut sollicitudin magnis vitae morbi, auctor malesuada vel vestibulum vitae, in risus elit mi, facilisi suscipit congue volutpat nisi et, pretium lacus.
Velit amet vel praesent id, elit duis bibendum pharetra phasellus eget sit, nibh consequat, justo magna vestibulum vestibulum. Vitae elit tortor adipiscing aliquam, sit elit fringilla velit tincidunt in risus, aenean sem lectus phasellus mattis volutpat quis. Sem vehicula lorem id eros nullam, at proin in. Wisi dictum imperdiet, nunc gravida nibh, pellentesque tellus aliquam diam culpa sit amet, porro pede risus volutpat faucibus ut libero, viverra donec. Fringilla mauris duis mauris turpis nam. Ante pellentesque, fusce lacus vitae lacus tincidunt, laoreet eget, vel faucibus amet vel. Eleifend cras et fermentum pharetra, justo porta, sapien amet nullam habitant dolor curabitur et, id eu sit. Vitae at, in et. Convallis rutrum.
Lorem ipsum dolor sit amet, et molestie diam viverra sed proin, nec aenean. Vel donec donec, luctus donec elementum sed. Tristique arcu ut mauris quam potenti in. Mauris velit ut torquent, sagittis et, mi tellus tincidunt elit posuere. Enim aliquam quam sociosqu wisi. Dignissim blandit id. Praesent donec, pellentesque nulla.
Integer aliquam tincidunt sapien neque nec, auctor lacinia nullam lectus dolor. Vehicula litora vel lacinia, auctor ultricies, lacus orci ligula leo eros, turpis vel repellendus erat felis totam suscipit, nulla magnis justo wisi inceptos. A tortor eget quis massa vitae mauris, urna lorem auctor congue, aliquam pellentesque at, quis enim id platea ipsum et. Lectus mauris, hac sit vestibulum diam nam, massa laoreet arcu tincidunt sagittis malesuada mattis, velit in lacus augue quisque, quam eget dolor et. Nostrud nec, urna natoque, turpis a, mauris id viverra id. Sit posuere, ut placerat, ac tempus nulla consectetuer. Sit fames quam morbi proin ut, mi massa, justo erat at curae tellus dignissim non, viverra sodales egestas imperdiet molestie faucibus mauris, morbi massa enim non.
Nec massa. Libero ornare est magnis, placerat ipsum justo ut in penatibus tortor, libero rutrum incididunt vehicula, elit elit accumsan donec. Urna auctor nonummy arcu, mi vivamus enim dis eu, etiam cursus faucibus quam eu, neque ipsum, ultrices enim. Laoreet mollis vestibulum, ut lacus ante ipsum. Hymenaeos sapien ut at, non wisi ipsum magna sed et justo, nulla adipiscing quis eget et feugiat diam, justo malesuada curabitur, aliquet ac condimentum quisque justo duis tortor. Vestibulum in semper turpis scelerisque diam, egestas magna dolorum, est consequat velit consectetuer tempus, orci est. Netus amet, eos rutrum lacus, nec ad sed ipsum tortor mattis tincidunt, et eget ut auctor aliquam sollicitudin diam, ornare elit pede cursus ornare elit ante. Suspendisse suspendisse sem justo, erat dictum elementum volutpat vel urna a. Vestibulum sodales, vel ut massa sapien orci, luctus provident iaculis, lorem libero ut et in, at ante felis. Maecenas praesent in. Justo ut sollicitudin magnis vitae morbi, auctor malesuada vel vestibulum vitae, in risus elit mi, facilisi suscipit congue volutpat nisi et, pretium lacus.
Velit amet vel praesent id, elit duis bibendum pharetra phasellus eget sit, nibh consequat, justo magna vestibulum vestibulum. Vitae elit tortor adipiscing aliquam, sit elit fringilla velit tincidunt in risus, aenean sem lectus phasellus mattis volutpat quis. Sem vehicula lorem id eros nullam, at proin in. Wisi dictum imperdiet, nunc gravida nibh, pellentesque tellus aliquam diam culpa sit amet, porro pede risus volutpat faucibus ut libero, viverra donec. Fringilla mauris duis mauris turpis nam. Ante pellentesque, fusce lacus vitae lacus tincidunt, laoreet eget, vel faucibus amet vel. Eleifend cras et fermentum pharetra, justo porta, sapien amet nullam habitant dolor curabitur et, id eu sit. Vitae at, in et. Convallis rutrum.
</div>
<div id="rightPanel">
<div id="rightCon">
Right Panel
</div>
</div>
<div style="clear:both;"></div>
</div>
<div class="push"></div>
</div>
<div id="footer">
<div class="content">
Footer
</div>
</div>
</body>
display: table-cell is a simple and reliable solution for this kind of problem. An example: http://jsfiddle.net/26MGE/
Use negative margins to set up divs with equal height;
CSS
#container {
width:960px;
margin: 0 auto;
}
#content {
float:left;
width:700px;
border-left: 260px solid #555;
}
#sidebar {
float: left;
width:260px;
margin-right: -260px;
position: relative;
}
HTML
<div id="container">
<div id="sidebar">
<p>Sidebar</p>
</div>
<div id="content">
<p>Main content</p>
</div>
</div>
This is a really effective way to achieve a same height column effect. You could also check out some other ways to achieve this, which may be better suited to your needs.
http://www.vanseodesign.com/css/equal-height-columns/
I am sure that implementing it into the code you have given should be a not so hard of a task, so I will leave it with you.
Good luck with your site!
If you're able to use jQuery, it'd be much more easier when you just need:
$("#rightCon").height($('#page').height());
FIDDLE