• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

CSS "Simple Challenge"


tbwcf

Active Member
#1
I came across this page Cassatta - by dificilstudio® - www.dificilstudio.com from DFCL's site.

Thought it was pretty cool. It's made using tables. My collegue (who is a tables fan) asked how it was done and now has one up as its with tables...

Started thinking how you could do it with css but am getting a bit confused... anyone want to assist??

This is what I have: ((do we need to so something with negative margins (like the sticky footer trick) ))

<!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=UTF-8" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
body {
margin:0px; padding: 0px; width:100%; height:100%; min-height:100;
}
#col1{
width:33.3%; height:100%; min-height:100; float:left; background-color:#eba5c1;
}
#col2{
width:33.3%; height:100%; min-height:100; float:left; background-color:#fffea5;
}
#col3{
width:33.3%; height:100%; min-height:100; float:right; background-color:#544939;
}
</style>

</head>
<body>
<div id="col1"> </div>
<div id="col2"> </div>
<div id="col3"> </div>
</body>
</html>
 

tbwcf

Active Member
#2
One option to blag it I guess is using 50% padding top and bottom but obvo then you couldn't place any content inside if you want..... CSS would then be:

<style type="text/css" media="screen">
body {
margin:0px; padding: 0px; width:100%; height:100%; min-height:100;
}
#col1{
width:33.3%; min-height:100; float:left; background-color:#eba5c1; padding-top: 50%; padding-bottom: 50%;
}
#col2{
width:33.3%; min-height:100; float:left; background-color:#fffea5; padding-top: 50%; padding-bottom: 50%;
}
#col3{
width:33.3%; min-height:100; float:right; background-color:#544939; padding-top: 50%; padding-bottom: 50%;
}
</style>
 

blueocto

Senior Member
#4
Sorry your Neopolitan link didn't work for me, but I quickly threw this together:

Code:
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Cassatta - by dificilstudio&reg; - www.dificilstudio.com</title><style type="text/css"><!--* { margin: 0px; padding: 0;}#wrapper { margin: 0 auto; padding: 0; width: 100%; height: 100%;}#col1 { margin: 0; padding: 0; float: left; width: 33.33%; height: 1024px; background-color: #eba5c1;}#col2 { margin: 0; padding: 0; float: left; width: 33.33%; height: 1024px; background-color: #fffea5;}#col3 { margin: 0; padding: 0; float: left; width: 33.33%; height: 1024px; background-color: #544939;}--></style></head><body><div id="wrapper"><div id="col1"> </div><div id="col2"> </div><div id="col3"> </div><div style="clear: both"></div></div></body></html>
Is that what you were after? Obviously the height is specified and you would have the facility to add content.
 

tbwcf

Active Member
#5
Thanks blueocto that's pretty much it yeah, the only thing is a bit of a shame that way you get the scroll bar appearing... this is the code for the link I posted:

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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Neopolitan</title>
<style type="text/css" media="screen">
body {
margin:0px; padding: 0px; width:100%; height:100%; min-height:100;
}
#col1{
    width:33.3%;
    min-height:100;
    background-color:#eba5c1;
    height: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
#col2{
    width:33.3%;
    min-height:100;
    background-color:#fffea5;
    height: 100%;
    position: absolute;
    left: 33.3%;
    bottom: 0px;
}
#col3{
    width:33.3%;
    min-height:100;
    background-color:#544939;
    height: 100%;
    position: absolute;
    bottom: 0px;
    right: 0px;
}
</style>

</head>
<body>
<div id="col1"> </div>
<div id="col2"> </div>
<div id="col3"> </div>
</body>
</html>
 

Sunburn

Active Member
#7
hrrm how about this.....

3 Stripe 1 Div


Code:
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>3 stripe 1 div</title><style type="text/css">html, body {background: url(stripe.gif) repeat-y  center 0;height:100%;position:relative;margin:0;padding:0;}.center {width:33.3%;margin:0 auto;background-color:#FFFEA5;min-height:100%;}</style><!--[if lte IE 6]>	<style type="text/css">		.center { height: 100%;}	</style><![endif]--></head><body><div class="center"></div></body></html>
 

tbwcf

Active Member
#8
Hi Sunburn, thanks for that! - took me a while to work out what you did there (as i've spent too long at my desk today I think) but got it now. Interesting call, I wouldn't have thought of doing it like that...

Thanks!
 

Psygon

Junior Member
#9
Here is another possible solution...

Code:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]"><html xmlns="[URL="http://www.w3.org/1999/xhtml"]XHTML namespace[/URL]"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Neopolitan</title><style type="text/css">html { overflow: hidden;}body { overflow: hidden; padding: 0; margin: 0; width: 100%; height: 100%;}#middle { padding: 0; margin: 0; position: absolute;  top: 0px; left: 33%; right: 0px; bottom: 0px; overflow: auto; background-color: #eba5c1}#side-left {  padding: 0; margin: 0; position: absolute;  top: 0px; left: 0px; bottom: 0px; width: 33%; overflow: auto; background-color: #fffea5;;  }#side-right {  padding: 0; margin: 0; position: absolute;  top: 0px; right: 0px; bottom: 0px; width: 33%; overflow: auto; background-color: #544939; }</style><!--[if lt IE 7]><style type="text/css">#main { height:expression(document.body.clientHeight-0); /* 20+20=40 */ width:expression(document.body.clientWidth-66%); /* 200+20+20+20=260 */}#side-left { height:expression(document.body.clientHeight-0); /* 20+20=40 */}#side-right { height:expression(document.body.clientHeight-0); /* 20+20=40 */}</style><![endif]--></head> <body> <div id="side-left"></div> <div id="middle"></div> <div id="side-right"></div></body></html>
Using the background image is far simpler tho' :D
 

philjohns

Senior Member
#10
Very simple and easy way of doing such a thing using CSS and two divs....

NEOPOLITAN LINK

Here's the code:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

	<head>
		<title>Neopolitan</title>

	</head>

		<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	background: #fffea5;
}

#col-one {
	width: 33.3%;
	height: 100%;
	background: #eba5c1;
	float: left;
}

#col-two {
	width: 33.3%;
	height: 100%;
	background: #544939;
	float: right;
}
		</style>

	<body>
<div id="col-one">
</div>
<div id="col-two">
</div>
	</body>
</html>