tbwcf
Active Member
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>
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>