Help, please.
The code - just a styled pre and a styled div (using float and clear) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ie bug</title>
<style type="text/css">
<!--
pre {
background-color: #FFFFCC;
border: 2px dashed #FF6666;
padding-top: 7px;
padding-bottom: 8px;
padding-left: 10px;
margin: 10px;
float: left;
padding-right: 10px;
clear: both;
}
div {
float: left;
clear: both;
}
-->
</style>
</head>
<body bgcolor="#D6D6D6">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus viverra interdum. Etiam ut ornare nulla. Praesent gravida blandit aliquam. Nulla facilisi. Suspendisse vel augue ligula. In interdum, purus et pellentesque tempus, urna tortor malesuada massa.
<h3>Description</h3>
Mauris quis est erat, a tempus dolor. Duis faucibus ultricies volutpat. Aliquam erat volutpat. Nulla et consectetur est. Sed eleifend ante ac tellus feugiat sed scelerisque nisi vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Nunc eget velit vel metus feugiat facilisis. Donec vel risus augue, ut mattis sem. Proin elementum libero ut lectus adipiscing semper. Proin et nibh enim.
<h3>Code</h3>
Phasellus sodales risus a lectus gravida tincidunt. Nulla sit amet enim ante, vel semper felis. Nullam enim mi, feugiat et porttitor tempus, auctor sed velit. Vivamus ac metus neque, in feugiat velit. Nam vitae dignissim eros. Praesent eros risus, pellentesque rutrum molestie sit amet, volutpat a mauris. Quisque ipsum turpis, placerat gravida aliquam et, placerat at leo.
</div>
<pre><em><Firefox bug : the right margin is 0 px instead of 10 px></em>
Vivamus eu mi nulla. Cras ac neque in ante aliquet ultricies eget id risus. Curabitur ut massa metus. Etiam dapibus fringilla diam, id lacinia tortor blandit eu. Nunc commodo commodo dui, eget malesuada purus cursus tempor. Quisque felis tellus, vulputate vitae ullamcorper sit amet, suscipit non augue. Integer vitae condimentum ante. Donec eu nisl magna. Nam ipsum lectus, dapibus a volutpat nec, rutrum sit amet eros. Phasellus velit est, adipiscing a interdum at, commodo id elit.
</pre>
<div>
<h3>Ie6 bug</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies, erat in varius ornare, diam mi semper nisi, eu sagittis mi diam at nisl. Aenean euismod nisl in enim interdum gravida. Maecenas congue, neque non imperdiet dictum, eros arcu ultricies mauris, et rhoncus ligula tortor nec nibh et convallis nulla tempus vel. Morbi ac leo magna, vitae semper felis. Donec tincidunt nunc quis lacus aliquet tempor. Nulla facilisi.
</div>
</body></html>
Firefox won't display the margin in the pre tag (yellow box in image) :
on the other hand ie6 displays the last div as shown :
Changing :
div {
float: left;
clear: both;
}
to :
div {
clear: both;
}
solved the ie6 bug. Still no margin in ff though.
EDIT 2013.12.24: well it was a bug fixed at some point - now FF works. Needless to add that IE still has the same bug.
Related
I have some A4 sized divs with different amount of content. I try to place footers in each page with page numbers. Footer should be fixed on the bottom of the page.
.page {
border:1px solid;
width: 210mm;
height: 297mm;
margin: 10px;
padding: 20px
}
.footer {
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet diam sit amet magna dapibus, a mollis nisi tempus. Etiam hendrerit nec dolor ac euismod. Aenean dignissim eget massa congue vestibulum. Duis volutpat semper dictum. Mauris ut magna ultricies, sagittis urna pretium, convallis est. Curabitur nisl turpis, vehicula vel luctus eu, laoreet ac neque. In congue in nulla vitae luctus. Proin quis felis consectetur, sodales elit vitae, laoreet quam.</p>
<p>Cras pharetra, metus blandit dignissim mollis, libero erat ultrices augue, porttitor finibus velit lacus eu elit. Sed sit amet nulla gravida, interdum erat iaculis, congue sapien. Donec id magna eget sem tincidunt vulputate in vitae tortor. Proin malesuada ut leo et pharetra. Cras enim lacus, pellentesque quis mauris eget, fringilla venenatis risus. Proin varius dui eget rhoncus auctor. Praesent non egestas lorem, eget placerat nunc. Maecenas aliquet orci turpis, quis elementum sem laoreet id. Praesent metus leo, laoreet sed mollis ut, feugiat ut arcu. Vestibulum tempus elit eu neque maximus, eu vulputate leo ullamcorper. Nam commodo sem risus, vitae viverra felis lobortis a. Nulla ac leo nisl. Sed nec lobortis lacus.</p>
<div class="footer">FOOTER page 1/2</div>
</div>
<div class="page"><p>Praesent non justo vitae neque viverra malesuada. Mauris sagittis venenatis diam, sed aliquet nisl sollicitudin id. Suspendisse potenti. Nullam et ornare orci. Nunc eleifend pulvinar leo, vitae viverra lorem. Nunc hendrerit pellentesque consectetur. Vivamus lectus urna, iaculis vel lectus eu, tempus laoreet quam. Integer commodo tincidunt nunc vitae hendrerit. Mauris eget ex ipsum. Mauris pellentesque iaculis metus, vel convallis tellus rutrum sit amet. Pellentesque pretium faucibus justo ut hendrerit. Phasellus vehicula blandit efficitur.</p>
<div class="footer">FOOTER page 2/2</div>
</div>
</body>
</html>
Here is a JsBin too, to play with.
When you're using position: absolute you have to correctly identify containing block:
If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky) (from MDN).
In your case there's no containing block with position value other than static - so .footer elements position themselves relative to root html element.
Set position: relative on .page and everything will work:
.page {
border:1px solid;
width: 210mm;
height: 297mm;
margin: 10px;
padding: 20px;
position: relative;
}
.footer {
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet diam sit amet magna dapibus, a mollis nisi tempus. Etiam hendrerit nec dolor ac euismod. Aenean dignissim eget massa congue vestibulum. Duis volutpat semper dictum. Mauris ut magna ultricies, sagittis urna pretium, convallis est. Curabitur nisl turpis, vehicula vel luctus eu, laoreet ac neque. In congue in nulla vitae luctus. Proin quis felis consectetur, sodales elit vitae, laoreet quam.</p>
<p>Cras pharetra, metus blandit dignissim mollis, libero erat ultrices augue, porttitor finibus velit lacus eu elit. Sed sit amet nulla gravida, interdum erat iaculis, congue sapien. Donec id magna eget sem tincidunt vulputate in vitae tortor. Proin malesuada ut leo et pharetra. Cras enim lacus, pellentesque quis mauris eget, fringilla venenatis risus. Proin varius dui eget rhoncus auctor. Praesent non egestas lorem, eget placerat nunc. Maecenas aliquet orci turpis, quis elementum sem laoreet id. Praesent metus leo, laoreet sed mollis ut, feugiat ut arcu. Vestibulum tempus elit eu neque maximus, eu vulputate leo ullamcorper. Nam commodo sem risus, vitae viverra felis lobortis a. Nulla ac leo nisl. Sed nec lobortis lacus.</p>
<div class="footer">FOOTER page 1/2</div>
</div>
<div class="page"><p>Praesent non justo vitae neque viverra malesuada. Mauris sagittis venenatis diam, sed aliquet nisl sollicitudin id. Suspendisse potenti. Nullam et ornare orci. Nunc eleifend pulvinar leo, vitae viverra lorem. Nunc hendrerit pellentesque consectetur. Vivamus lectus urna, iaculis vel lectus eu, tempus laoreet quam. Integer commodo tincidunt nunc vitae hendrerit. Mauris eget ex ipsum. Mauris pellentesque iaculis metus, vel convallis tellus rutrum sit amet. Pellentesque pretium faucibus justo ut hendrerit. Phasellus vehicula blandit efficitur.</p>
<div class="footer">FOOTER page 2/2</div>
</div>
</body>
</html>
As #fen1x said, you have to set the position of parent div to relative. Just add this CSS rule.
.page{
position: relative;
}
i want to create footer like footer on elementaryos.org
i don't know what css code that make the footer below the page container and will be unveiled when we scroll it down.
<!doctype html>
<html lang="en">
<head>
<title>Test page</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
nav{
background-color: yellow;
width: 100%;
position: fixed;
z-index: 2;
height: 70px;
}
.container{
padding-top: 80px;
width: 100%;
background-color: #dadada;
position: relative;
z-index: 1;
line-height: 3em;
}
footer{
background-color: #bababa;
height: 200px;
width: 100%;
position: relative;
z-index: 0;
}
</style>
</head>
<body>
<nav>
<h1>Navigation</h1>
</nav>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum enim odio, vel placerat dui aliquam sed. Vivamus rhoncus massa commodo nulla scelerisque accumsan. Nunc ac ligula velit. Mauris eu pharetra turpis, eget fermentum lectus. Maecenas ornare sem vel nisi accumsan, at placerat libero vulputate. Pellentesque sit amet neque ac est dapibus faucibus. Morbi pellentesque, dolor ut elementum mattis, lectus nunc auctor nulla, vel lobortis quam ante eu neque.
Mauris sed ligula in lorem rhoncus volutpat. Ut pulvinar dolor id bibendum mollis. Morbi eu facilisis risus. Nullam quis eros elit. Donec quis facilisis dui. Duis hendrerit, lectus id ultrices tincidunt, urna tellus convallis quam, eget vehicula ipsum arcu vitae nulla. Etiam tristique varius enim nec volutpat. Fusce non odio nec massa placerat aliquam id eu ligula. Nam nulla urna, iaculis sit amet nisi non, auctor congue magna. Suspendisse potenti. Duis vehicula consectetur feugiat.
Quisque ut luctus diam. Aliquam quis blandit eros. Vestibulum dolor velit, egestas non vehicula et, viverra in lacus. Donec luctus id libero at tincidunt. Donec in euismod tortor, id fermentum mi. Phasellus leo dui, placerat sed enim elementum, aliquet convallis mauris. Duis cursus mauris vehicula tortor auctor faucibus. Praesent euismod enim eget luctus facilisis. Donec condimentum, neque id convallis consectetur, lorem ipsum gravida nisl, vel fermentum lectus diam at magna. Aenean in urna sagittis, condimentum magna nec, egestas neque. Nulla gravida neque massa.
Nulla consequat, quam at fringilla mollis, nunc magna dapibus eros, ut ultrices sapien mauris eu libero. Duis sollicitudin orci posuere est vulputate, eu vestibulum mi vestibulum. Etiam eu elementum nisi, consectetur accumsan turpis. Sed dignissim sapien et posuere interdum. In adipiscing gravida enim vestibulum suscipit. Aliquam aliquet sem et dapibus mollis. Praesent quis lorem augue. Donec facilisis justo vel est pharetra, eget rhoncus magna ultricies. Suspendisse ac justo quis dui accumsan dignissim at non sapien. Cras vitae ultrices justo, quis venenatis nibh. Sed vestibulum adipiscing enim non volutpat. Duis ac euismod sapien. Pellentesque sit amet ornare velit. Duis venenatis tempus facilisis.
Sed sem lectus, mattis ut nunc sit amet, dictum sollicitudin sapien. Integer vitae ornare tellus. Vestibulum et cursus urna, vel aliquet mi. Duis lacinia tincidunt lorem. Cras sem felis, bibendum eu lorem luctus, dictum imperdiet augue. Quisque eleifend lectus pellentesque arcu faucibus tempus. Etiam sollicitudin in est eu lacinia. Curabitur faucibus in neque et imperdiet. Mauris libero enim, suscipit sit amet odio eget, molestie ornare ligula. Nam a lorem convallis, ornare nibh id, viverra tellus.
</div>
<footer>
Page footer
</footer>
</body>
</html>
here is the demo. Thanks a lot.
There you go: http://jsfiddle.net/8cxvr/2/
It's pretty simple, just give the footer a fixed position (= relative to window) and the container gets some margin on the bottom.
Relevant changes:
.footer {
position: fixed;
bottom: 0;
}
.container {
margin-bottom: 200px; /* footer-height */
}
To start, that is a horrible effect, please don't do that.
For a complete answer though, what they did is fixed the footer with positioning at the bottom of the page, and then gave it a lower z-index. So it's always at the position. Once you scroll past the content, the it comes into view. You can use a tool like IE Developer tools, or Firebug (for Firefox) to look at how they worked the code.
Im having a CSS problem. I want the paragraph under the image to be an image caption. So it should be under the image. Am i explaining it correctly? What am i doing wrong? (You can copy the code down here and just watch it in a browser)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
.CaptionRight
{
float: right;
vertical-align: top;
margin-left: 1em;
margin-bottom: 1em;
display:block;
border: 1px red solid;
}
.CaptionRight p
{
}
body
{
width: 500px;
}
</style>
</head>
<body>
<p><span class="CaptionRight" style="width:300px;"><img src="http://www.dn.se/ImageHandler.axd/?id=1034780&imageFormat=original" alt="" />
<p>
-This should be the image caption right under the image.
</p></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc lobortis at lacus in auctor. Phasellus urna ligula,
accumsan ut nisl pharetra, porta egestas ligula.
Integer ultrices dolor neque, dapibus cursus lorem
volutpat sit amet. Aliquam volutpat tempus dapibus.
Vestibulum blandit, quam sit amet lacinia laoreet,
dui massa dictum turpis, sed mattis purus lorem non diam.
Pellentesque imperdiet massa libero, et ultrices tellus tincidunt eu.
Vivamus urna magna, congue nec imperdiet nec, eleifend vitae elit.
Donec iaculis lorem elementum orci tempus rutrum.
Donec vel tortor iaculis lacus lacinia tempus sed vel est.
Suspendisse iaculis vestibulum tincidunt. Quisque varius
sapien porttitor malesuada volutpat. Sed a sapien nisl.
</p>
</body>
</html>
You cannot have <p></p> tags inside another
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
.CaptionRight{
float: right;
vertical-align: top;
margin-left: 1em;
margin-bottom: 1em;
display:block;
border: 1px red solid;
}
Body{
width: 500px;
}
</style>
</head>
<body>
<span class="CaptionRight" style="width:300px;"><img src="http://www.dn.se/ImageHandler.axd/?id=1034780&imageFormat=original" alt="" /><p>-This should be the image caption right under the image.</p></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis at lacus in auctor. Phasellus urna ligula, accumsan ut nisl pharetra, porta egestas ligula. Integer ultrices dolor neque, dapibus cursus lorem volutpat sit amet. Aliquam volutpat tempus dapibus. Vestibulum blandit, quam sit amet lacinia laoreet, dui massa dictum turpis, sed mattis purus lorem non diam. Pellentesque imperdiet massa libero, et ultrices tellus tincidunt eu. Vivamus urna magna, congue nec imperdiet nec, eleifend vitae elit. Donec iaculis lorem elementum orci tempus rutrum. Donec vel tortor iaculis lacus lacinia tempus sed vel est. Suspendisse iaculis vestibulum tincidunt. Quisque varius sapien porttitor malesuada volutpat. Sed a sapien nisl.
Etiam ultricies tincidunt sagittis. Cras tortor turpis, blandit eu tincidunt eu, malesuada sit amet nisl. In ullamcorper tellus est, et volutpat dui pretium id. Nullam a dolor orci. Vivamus volutpat nisl vel eros feugiat, sit amet elementum est eleifend. Phasellus lorem sem, adipiscing eu lacus consequat, hendrerit feugiat risus. Donec non adipiscing felis. Suspendisse potenti. Mauris tempus id magna at euismod. Quisque non justo eu nulla consequat feugiat sed vel diam. Nulla nec tortor rhoncus, tincidunt elit et, sagittis libero. Phasellus sed nibh et arcu elementum lacinia sit amet nec dolor. Phasellus dictum pulvinar erat vel auctor. Fusce nibh massa, molestie et elit fermentum, fringilla aliquam tellus. Donec pulvinar auctor risus, id auctor nisi pellentesque pellentesque.
Ut ut auctor metus. Curabitur sit amet dictum nunc. Aliquam dignissim erat ac nisl pellentesque, at pellentesque nisi auctor. Ut dapibus iaculis volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas hendrerit ipsum ut dolor commodo feugiat. Praesent eu purus eu ipsum pharetra commodo at at odio. Maecenas elementum urna vitae congue scelerisque. Donec vel laoreet lectus, ut laoreet odio. Nam ut accumsan quam, adipiscing tincidunt libero. Aenean quis felis libero.<br /></p>
</body>
</html>
Just remove the P from the HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
.CaptionRight
{
float: right;
vertical-align: top;
margin-left: 1em;
margin-bottom: 1em;
display:block;
border: 1px red solid;
}
body
{
width: 500px;
}
</style>
</head>
<body>
<p><span class="CaptionRight" style="width:300px;"><img src="http://www.dn.se/ImageHandler.axd/?id=1034780&imageFormat=original" alt="" />This should be the image caption right under the image.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc lobortis at lacus in auctor. Phasellus urna ligula,
accumsan ut nisl pharetra, porta egestas ligula.
Integer ultrices dolor neque, dapibus cursus lorem
volutpat sit amet. Aliquam volutpat tempus dapibus.
Vestibulum blandit, quam sit amet lacinia laoreet,
dui massa dictum turpis, sed mattis purus lorem non diam.
Pellentesque imperdiet massa libero, et ultrices tellus tincidunt eu.
Vivamus urna magna, congue nec imperdiet nec, eleifend vitae elit.
Donec iaculis lorem elementum orci tempus rutrum.
Donec vel tortor iaculis lacus lacinia tempus sed vel est.
Suspendisse iaculis vestibulum tincidunt. Quisque varius
sapien porttitor malesuada volutpat. Sed a sapien nisl.
</p>
</body>
</html>
HTML5:
<!DOCTYPE html>
...
<figure>
<img src="#" alt="image">
<figcaption>My caption</figcaption>
</figure>
Fiddle
In this way?
I need the red box to expand with the blue box content, so they are always both the same size.
The red box is defined as:
.leftMenu{
float:left;
width:20%;
background-image:url(../images/leftMenuBG.jpg);
background-position:bottom;
background-color:#BFDAE3;
background-repeat:repeat-x;
}
Can't seem to get it to work, whatever I try! Any ideas? Thanks!
Simple solution: Use tables.
Semantic solution: Use faux columns.
You will need to wrap the red div around the blue div, so have the blue divs inside, floated right, and then have a clearing div after the blue divs.
<div style="border:solid red 2px;">
<div style="border:solid blue 2px;float:right;width:200px;">
<p>Content here</p>
</div>
<div style="clear:both;"></div>
</div>
Excuse the use of inline styles, these should be in a style sheet.
If you need each div to sit independently of each other and don't mind using JavaScript (as this is only a presentational layer) try this method.
You can use a jQuery plugin for that too. (for example, http://www.cssnewbie.com/equal-height-columns-with-jquery/)
But the Semantic solution: Use faux columns. from Magnar is nice too and doesn't require Javascript.
An additional 'faux column'-method is to (ab)use positioning.
Place both boxes inside a container that's floated (which makes it expand to accomodate floated children) and positioned relatively (which allows us to position child elements inside it).
Then, position the shortest column absolutely, and float the longest column. The container will take on the height of the floated child, and the div with position:absolute will take that height again.
A short example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Columns</title>
<style type="text/css">
html, body {
width: 100%;
}
#container {
width: 100%;
float: left;
position: relative;
border: 2px solid black;
}
#left-box {
position: absolute;
width: 40%;
border: 2px solid red;
background-color: #5555ee;
height: 100%;
}
#right-box {
float: right;
margin-right: 15%;
width: 40%;
border: 2px solid blue;
background-color: #3e3e3e;
}
</style>
</head>
<body>
<div id="container">
<div id="left-box">
- E - x - P - a - N - d - I - n - G -
</div>
<div id="right-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis eros ut sem sollicitudin ultricies. Vivamus pharetra, urna sit amet auctor mollis, risus sem ultrices quam, non condimentum enim leo sit amet tellus. Pellentesque id vehicula nisl. Nulla ut commodo ligula. Sed sit amet ligula purus, at suscipit leo. Nulla quis nulla id est aliquet vehicula. Suspendisse consectetur, nunc in hendrerit dignissim, nisl massa viverra quam, et faucibus augue lorem eu mi. Vestibulum commodo luctus ante, vel placerat metus ullamcorper vel. Sed id imperdiet orci. In hac habitasse platea dictumst. Praesent ac dui orci, vitae pharetra dolor.
</p>
<p>
Aenean enim metus, placerat at hendrerit in, hendrerit in velit. Cras tincidunt blandit sapien, a aliquet elit sollicitudin vitae. Quisque at ligula sem. In hac habitasse platea dictumst. Ut eu magna ipsum, id fringilla massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus consequat metus sed lectus dignissim posuere quis a felis. Mauris in consectetur arcu. Nullam fermentum adipiscing dignissim. Sed quis orci in magna viverra sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas condimentum lectus pretium tortor porta a hendrerit dui pharetra. Etiam est justo, bibendum vehicula vestibulum ac, mattis ut risus. Praesent dapibus nibh id enim vestibulum porta. Donec aliquam urna a diam varius blandit. Nulla interdum ante at arcu vehicula sagittis. Curabitur quam sapien, luctus ac sagittis vitae, tristique a odio. Nulla consequat gravida urna, at bibendum nisl ultricies ac.
</p>
<p>
Vivamus quis metus porta purus aliquet aliquet. Morbi sollicitudin orci ut ligula vehicula sollicitudin. Etiam sed lacus eget leo molestie ullamcorper sit amet ac urna. Cras vitae turpis in sapien dignissim molestie. Curabitur tellus purus, dignissim at adipiscing in, faucibus ac tortor. Duis vitae metus ac urna cursus consequat eget vel quam. Integer bibendum mauris enim, sit amet blandit sapien. Nam in lectus ante. Curabitur lacinia erat sit amet lectus malesuada facilisis. Phasellus et pellentesque enim. Fusce eget tristique est. Suspendisse id dui eu lorem congue tincidunt. Cras libero lectus, placerat eget tristique a, gravida vitae lorem. Sed nec venenatis sapien. Suspendisse tempus orci ut odio venenatis et cursus sem faucibus. Mauris commodo ultricies dictum. Curabitur iaculis, ligula sit amet lobortis hendrerit, eros orci elementum nisi, cursus lacinia nunc felis vitae erat. Donec id elementum ipsum.
</p>
<p>
Mauris id mi sed augue egestas vestibulum non a ipsum. Ut arcu purus, consequat in tincidunt in, pretium a dui. Cras in quam tellus, non ultricies nisi. Sed leo orci, gravida et luctus sed, eleifend quis odio. Praesent cursus feugiat neque, tincidunt malesuada libero egestas sit amet. Etiam nisi nisi, faucibus vitae accumsan sed, gravida ut lacus. Suspendisse hendrerit fringilla interdum. Cras fermentum nibh non eros gravida pretium et a sem. Sed non nisl dui, non commodo arcu. Donec nec massa mi, vel auctor odio. Curabitur sagittis velit id felis egestas iaculis. Nunc pharetra magna eu metus malesuada ut porta mi suscipit. Aenean vitae elit sit amet neque pellentesque malesuada. Aliquam eu nulla consectetur est adipiscing vulputate non a odio. Sed consectetur neque eros. Nulla fermentum vehicula vestibulum. Aenean eleifend, nisi eget porta accumsan, tellus orci tincidunt metus, volutpat lobortis quam augue commodo tellus. Aenean consectetur pretium vestibulum. Pellentesque a scelerisque sem. Cras pellentesque tortor euismod magna viverra mollis.
</p>
<p>
Mauris dignissim sodales placerat. Sed id interdum erat. Nunc sagittis, nunc in auctor ullamcorper, nisi dolor commodo sem, sit amet aliquam diam dolor posuere est. Ut vestibulum elit ut urna imperdiet non tincidunt sapien euismod. Fusce ut sem erat, aliquam accumsan metus. Proin sed velit nec velit laoreet dignissim at sit amet ante. Pellentesque ac dolor non nulla dapibus lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse non nisl diam. Sed et ligula sed libero porttitor semper eget eu elit. Phasellus quis massa dolor. Phasellus ac justo ac diam ultrices iaculis quis at odio. Fusce eget nisi nunc. Cras cursus, dui eget mattis rutrum, arcu dolor sollicitudin nibh, eu congue augue quam ut leo. Praesent in est nulla, eu ullamcorper enim. Nullam in adipiscing ligula.
</p>
</div>
</div>
</body>
Hey. I have the following markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*
{
padding: 0;
margin: 0;
}
#container
{
padding-left: 200px;
padding-right: 10px;
overflow: hidden;
}
.column
{
float: left;
position: relative;
text-align: justify;
margin-bottom: -2000px;
padding-bottom: 2005px;
}
#top
{
background-color: Red;
height: 30px;
}
#content
{
background-color: Green;
width: 100%;
padding: 0 5px;
}
#left
{
background-color: Blue;
width: 200px;
right: 210px;
margin-top: -30px;
margin-left: -100%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
Lorem ipsum blah blah blah
</div>
<div id="content" class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio eros, porta eu rutrum sed, vestibulum nec nisl. Nulla facilisi. Nunc viverra, ante eget lobortis fermentum, mauris est rhoncus nisl, nec ullamcorper risus ligula a sem. Donec a lorem sit amet nunc pharetra rhoncus. Aenean rutrum tincidunt dui nec dapibus. Nullam posuere semper quam, sed eleifend enim pulvinar a. Praesent mattis dui id nisl placerat dignissim. Mauris hendrerit ultricies justo, laoreet luctus turpis consequat ac. Suspendisse potenti. Ut in ipsum ligula. Phasellus sagittis metus ac libero varius vel pulvinar tortor scelerisque. Donec cursus augue ut arcu porta viverra. Quisque tempus aliquam erat sed viverra. Suspendisse sem odio, ornare sit amet sodales id, vulputate non erat. Aenean viverra tempus turpis commodo dictum. Nulla eleifend risus egestas justo vestibulum in volutpat orci lacinia. Proin sapien neque, lobortis eget cursus quis, venenatis vitae nisl. Suspendisse at neque eu mauris lobortis eleifend. Etiam suscipit sapien nec orci tincidunt at hendrerit nisl tempus.
</div>
<div id="left" class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur odio eros, porta eu rutrum sed, vestibulum nec nisl. Nulla facilisi. Nunc viverra, ante eget lobortis fermentum, mauris est rhoncus nisl, nec ullamcorper risus ligula a sem. Donec a lorem sit amet nunc pharetra rhoncus. Aenean rutrum tincidunt dui nec dapibus. Nullam posuere semper quam, sed eleifend enim pulvinar a. Praesent mattis dui id nisl placerat dignissim. Mauris hendrerit ultricies justo, laoreet luctus turpis consequat ac. Suspendisse potenti. Ut in ipsum ligula. Phasellus sagittis metus ac libero varius vel pulvinar tortor scelerisque. Donec cursus augue ut arcu porta viverra. Quisque tempus aliquam erat sed viverra. Suspendisse sem odio, ornare sit amet sodales id, vulputate non erat. Aenean viverra tempus turpis commodo dictum. Nulla eleifend risus egestas justo vestibulum in volutpat orci lacinia. Proin sapien neque, lobortis eget cursus quis, venenatis vitae nisl. Suspendisse at neque eu mauris lobortis eleifend. Etiam suscipit sapien nec orci tincidunt at hendrerit nisl tempus.
</div>
</div>
</body>
</html>
The problem is, that the left column doesn't show up. However, if I remove the padding from #content (and subtract 10 from #left's right value), it works, except for the missing padding on #content. Is there any way to fix this without any extra markup? I've seen this solution:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
But I would like to keep the amount of wrappers to a minimum... :)
This site might help you:
http://www.cssplay.co.uk/layouts/threecol.html
His entire site is worth a look for CSS ideas you have never thought of before.
I think he will even do the work for 50 Euro an hour. I have hired him in the past, he was fast.
I think your link is more of an explanation of this one:
http://www.positioniseverything.net/articles/onetruelayout/equalheight
Although this one has more in depth discussion on the caveats and problems concerning the 3 equal height columns.