PDA

View Full Version : CSS 3 column and fluid issues


kona72
02-14-2007, 04:44 PM
Hey Guys/Gals,

So after successfully launching my first CSS site a couple of weeks ago

http://www.trafick.net

I thought that form now on I would build only CSS. Well... It's almost like learning to walk again.
Anyways i need to pick your collective brains. I have a site i have been developing for a client until now with tables. Here it is for you to view...

http://www.idas.ca/index2.php

This site is a 3 column fluid (90%) design and with tables was pretty straight forward to develop.
With CSS though it's another story... Here it is with CSS

http://www.idas.ca/newcss/

As you can see there are significant issues with the left and right column. Is there a way to ensure that they are always the same height as the main body?

Here is the css


body {
background: url(../images/bkgrd_01.jpg) repeat-x;
background-color:#DFE3B1;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin:0px;
}

#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 90%;
background-color:#dfe3b1;
}

#header {
height:158px;
background-image:url(../images/idas_02.jpg);
background-repeat:no-repeat;
background-color:#3f321F;
}

#side-a {
float: left;
width: 20%;
background-image:url(../images/idas_12.jpg);
background-repeat:repeat-y;
background-color:#9ACCCD;
padding: 10px 10px 10px 20px;
}

#side-b {
float: right;
width: 180px;
background-image:url(../images/rt_bg.jpg);
background-repeat:repeat-y;
background-color:#9ACCCD;
padding: 10px;
}
.sideb_text {
padding: 5px 20px 5px 0px;
}

#content {
float: left;
width: 50%;
padding: 10px;
}

#footer {
height:9px;
clear: both;
background-image:url(../images/idas_12.jpg);
background-repeat:no-repeat;
background: #3f321F;
}
.image_right {
float:right;

}


And here is the page itself....


<!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>IDAS - CSS </title>
<link href="css/idas.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header"><img src="images/idas_04.jpg" width="226" height="158" class="image_right" /></div>
<div id="container">
<div id="side-a">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condime</p>
<p>&nbsp;</p>
</div>

<div id="content">
CONTENT
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>llentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
</div>

<div id="side-b">
<p class="sideb_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui </p>
<p>&nbsp;</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>


Thanks in advance for your help!!

edbr
02-15-2007, 04:03 AM
heres a good article on it.

http://builder.com.com/5100-6371_14-5268973.html
I believe it can also be done using javascript

davidj
02-15-2007, 07:20 AM
nice site although im getting a missing element in IE7

heads up

lux
02-15-2007, 09:16 AM
try changing the order of your divs in your html page so that side-b comes before the content area.

just a tip but when i write my divs i add a comment to the closing div tag to help identify which div it is, e.g.

<div id="somediv"></div><!-- somediv -->

this way when you've got loads of divs its easier to see which one belongs to which one.

kona72
02-15-2007, 04:43 PM
Thanks a million people!

lux8uk - FANTASTIC idea!! I love that. I frequently am looking for the closing tags not just on the div/s but anything... That is brilliant.

DavidJ - Thanks for pointing that out! I rarely use IE for my own site. I will get that fixed up pronto

edbr - I'll dive into this right away. Thanks!!

domedia
02-15-2007, 08:41 PM
lux' idea is great indeed. It helps *alot* when you're dealing with complex websites.
I usually add the class or id symbol as well as a slash do show that it 'ends':

<div id="news">
<div class="newsdate">02.18.2007</div><!-- /.newsdate -->
<div class="newsblurb">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div><!-- /.newsblurb -->
</div><!-- /#news -->

Multi column design with css
Alistapart actually has an article on this in the current edition. Check it out:
http://www.alistapart.com/articles/multicolumnlayouts