css help

7aken · 17-08-2006 6:39am #1

hi guys,

[site contains flash 77kb]
i posted this site a while back looking for your views, its finally in full production but im having trouble with some css alignment. it will be clear as soon as you open the page. i need the content area and sidebar to line up... what am i doing wrong?

www.space95.sc/catcocos/problem.html

DJB · 17-08-2006 10:05am

Oh, I had that problem recently. I'll check my code. Now, which site was it that I had the problem on... if i find it, I'll let you know.

Dave

DJB · 17-08-2006 10:36am

Couldn't find where I implemented that but as far as i remember, this is what I did:

- created wrapper div
- inside wrapper, had 2 divs - one float left (60%) and other float right (40%)
- Whichever div was going to be the shorter div, I put the main wrapper background colour as that. Then the longer div got the alternative background colour. So, no matter how long the wrapper div is, it will have a background colour of "grey" for example and the left div will have a background colour of "white". I'd leave the background of right div empty so it would pick up the wrapper background and it looked like it was stretching down the page.

Does that make sense? Probably not, so I just created this page that does what I think you are looking for:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2Column</title>
<style type="text/css">
<!--
body, p {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; 
	font-size: 12px; 
	text-align: justify;
}
p {
	margin: 0px;
	padding: 0px 0px 10px 0;
}
-->
</style>
</head>
<body>
<div id="wrapper" style="background: #E9E4E2; border: 1px dashed #999999; width: 700px; overflow: hidden;">
	<div id="leftcolumn" style="float: left; width: 479px; padding: 10px; background: #FFFFCC; border-right: 1px dashed #999999;">
	  <p><strong>LEFT COLUMN</strong></p>
	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer elit justo, tristique et, pharetra et, faucibus eu, massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla libero. Donec euismod nulla vitae purus. Maecenas interdum, mauris ac laoreet pulvinar, nisi nunc vehicula leo, ultrices iaculis elit leo a enim. Duis non elit eu dolor ultricies tincidunt. In tortor risus, consectetuer in, porta sed, tincidunt vitae, mi. Maecenas metus. Nam eget risus. Suspendisse potenti. Praesent nulla velit, nonummy nec, tempus id, dictum vel, lorem. </p>
	  <p>Ut tempor arcu ut mi. Ut quis odio a neque pharetra rhoncus. Mauris mauris velit, sodales ut, scelerisque varius, nonummy ac, quam. Sed nulla. Suspendisse accumsan. Suspendisse orci magna, feugiat at, hendrerit sit amet, volutpat et, tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec at est quis ante adipiscing scelerisque. Nunc eu sem. Aliquam at nisl id nibh sollicitudin vestibulum. Nulla tincidunt erat nec leo. Cras ullamcorper. Cras eu arcu at orci commodo posuere. Nullam tincidunt, nunc in rhoncus ultricies, libero diam imperdiet velit, in molestie lorem justo id justo. </p>
	  <p>Donec mollis, lorem vel feugiat pharetra, turpis neque iaculis pede, sit amet elementum risus est quis tellus. Nulla facilisi. Cras hendrerit dolor eu erat. Quisque non dui et felis mollis interdum. Mauris quam nulla, imperdiet vitae, pellentesque in, elementum imperdiet, sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst. Fusce eget metus ac nisi sollicitudin commodo. Aenean at neque id tortor rutrum nonummy. Nullam commodo ligula nec nisl egestas tincidunt. Aenean a nibh at nisl facilisis ultricies. Nunc mollis. Quisque turpis. Phasellus urna. Curabitur dui neque, porta in, blandit in, ultricies ac, leo. Vivamus sit amet turpis non tortor convallis venenatis. Sed ipsum velit, varius sit amet, eleifend ac, suscipit vitae, mauris. Quisque at mi. Vivamus commodo. Vivamus dapibus. Proin imperdiet ornare mi.</p>
	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer elit justo, tristique et, pharetra et, faucibus eu, massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla libero. Donec euismod nulla vitae purus. Maecenas interdum, mauris ac laoreet pulvinar, nisi nunc vehicula leo, ultrices iaculis elit leo a enim. Duis non elit eu dolor ultricies tincidunt. In tortor risus, consectetuer in, porta sed, tincidunt vitae, mi. Maecenas metus. Nam eget risus. Suspendisse potenti. Praesent nulla velit, nonummy nec, tempus id, dictum vel, lorem. </p>
	  <p>Ut tempor arcu ut mi. Ut quis odio a neque pharetra rhoncus. Mauris mauris velit, sodales ut, scelerisque varius, nonummy ac, quam. Sed nulla. Suspendisse accumsan. Suspendisse orci magna, feugiat at, hendrerit sit amet, volutpat et, tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec at est quis ante adipiscing scelerisque. Nunc eu sem. Aliquam at nisl id nibh sollicitudin vestibulum. Nulla tincidunt erat nec leo. Cras ullamcorper. Cras eu arcu at orci commodo posuere. Nullam tincidunt, nunc in rhoncus ultricies, libero diam imperdiet velit, in molestie lorem justo id justo. </p>
	  <p>Donec mollis, lorem vel feugiat pharetra, turpis neque iaculis pede, sit amet elementum risus est quis tellus. Nulla facilisi. Cras hendrerit dolor eu erat. Quisque non dui et felis mollis interdum. Mauris quam nulla, imperdiet vitae, pellentesque in, elementum imperdiet, sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst. Fusce eget metus ac nisi sollicitudin commodo. Aenean at neque id tortor rutrum nonummy. Nullam commodo ligula nec nisl egestas tincidunt. Aenean a nibh at nisl facilisis ultricies. Nunc mollis. Quisque turpis. Phasellus urna. Curabitur dui neque, porta in, blandit in, ultricies ac, leo. Vivamus sit amet turpis non tortor convallis venenatis. Sed ipsum velit, varius sit amet, eleifend ac, suscipit vitae, mauris. Quisque at mi. Vivamus commodo. Vivamus dapibus. Proin imperdiet ornare mi.</p>
	</div>
	<div id="rightcolumn" style="float: right; width: 180px; padding: 10px;">
	  <p><strong>RIGHT COLUMN </strong></p>
	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer elit justo, tristique et, pharetra et, faucibus eu, massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla libero. Donec euismod nulla vitae purus. Maecenas interdum, mauris ac laoreet pulvinar, nisi nunc vehicula leo, ultrices iaculis elit leo a enim. Duis non elit eu dolor ultricies tincidunt. In tortor risus, consectetuer in, porta sed, tincidunt vitae, mi. Maecenas metus. Nam eget risus. Suspendisse potenti. Praesent nulla velit, nonummy nec, tempus id, dictum vel, lorem. Ut tempor arcu ut mi. Ut quis odio a neque pharetra rhoncus. Mauris mauris velit, sodales ut, scelerisque varius, nonummy ac, quam. Sed nulla.</p>
	</div>
</div>
</body>
</html>

Hope that helps. Rgds,

Dave

7aken · 18-08-2006 5:36am

wow dave!

talk about going the extra mile!! thanks a million for your help, im going to go try it now.....

7aken · 18-08-2006 6:43am

cheers DJB, problem sorted. i guess it was logical when i think about it, i never was great at thinking outside the box though, or the div as the case may be!! many thanks

colm_c · 21-08-2006 12:09pm

Better way that using the method mentioned above is to use a technique known as faux columns.

Instead of having to have one column always longer than the other, use a background image behind the wrapper div which is the same width as the page, and let it tile vertically.

This also allows you to do some nice gradients and stuff as needs be.

See this for more info on the technique:
http://alistapart.com/articles/fauxcolumns

css help

Comments