homepage Welcome to WebmasterWorld Guest from 54.166.84.82
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Switch from tables to divs for multiple columns?
and maintain browser compatibility?
Tonearm

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3418008 posted 3:53 pm on Aug 9, 2007 (gmt 0)

I'm still using tables whenever I need to display 2 or more columns in the same row. I sometimes need as many as 5 columns in the same row. Can I switch from tables to divs and CSS for these columns and maintain browser compatibility?

 

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3418008 posted 5:01 pm on Aug 9, 2007 (gmt 0)

maintain browser compatibility?

For the most part yes, but it depends what you are definning as browser compatibility. Older borwsers won't support a lot of <div> layouts depending on the CSS version you are using and the degree of complexity of the layout.

Marshall

Tonearm

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3418008 posted 5:12 pm on Aug 9, 2007 (gmt 0)

Thanks Marshall,

What is the simplest way to produce 5 columns with divs and CSS?

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3418008 posted 5:30 pm on Aug 9, 2007 (gmt 0)

Pay someone ;)

Seriously, give me about 20 minutes and I will post the code for you.

Marshall

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3418008 posted 6:04 pm on Aug 9, 2007 (gmt 0)

Tonearm,

This should give you the desired effect. Jusst remember that border, margin and padding settings affect overall width. I put additional notes in the CSS and HTML. Good luck.

Marshall

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<title>5 Column CSS Layout</title>
<style type="text/css">
html, body {
height: 100%
font: normal normal arial,helevtica,verdana,sans-serif;
color: #000;
}
#container {
height: 100%;
padding: 5px;
background: #CCC;
}
#col_one {
margin: 0; /* Applied to first column only in lieu of padding (personal thing) */
width: 18%; /* Allows for fluid design. Can be set to pixels */
float: left;
background: #cff; /* Only here so you can see the different columns */
border: thin solid #000; /* again, just so you can see the different columns */
}
#col_two {
margin: 0 0 0 10px; /* Puts a 10 pixel space between columns (left side) - think cellspacing */
width: 18%;
float: left;
background: #6cf; /* Only here so you can see the different columns */
border: thin solid #000; /* again, just so you can see the different columns */
}
#col_three {
margin: 0 0 0 10px; /* Puts a 10 pixel space between columns (left side) - think cellspacing */
width: 18%;
float: left;
background: #3cf; /* Only here so you can see the different columns */
border: thin solid #000; /* again, just so you can see the different columns */
}
#col_four {
margin: 0 0 0 10px; /* Puts a 10 pixel space between columns (left side) - think cellspacing */
width: 18%;
float: left;
background: #0cf; /* Only here so you can see the different columns */
border: thin solid #000; /* again, just so you can see the different columns */
}
#col_five {
margin: 0 0 0 10px; /* Puts a 10 pixel space between columns (left side) - think cellspacing */
width: 18%;
float: left;
background: #09c; /* Only here so you can see the different columns */
border: thin solid #000; /* again, just so you can see the different columns */
}
/* Note: adding larger margins or padding to columns requires that you decrease the width setting proportionally,
that is why the width is currently set to 18%. If you add padding to the container, the same applies. */
</style>
</head>

<body>
<div id="container">
<div id="col_one">Column One Column One Column One Column One Column One Column One Column One Column One Column One Column One Column One Column One</div>
<div id="col_two">Column Two Column Two Column Two Column Two Column Two Column Two Column Two Column Two</div>
<div id="col_three">Column Three Column Three Column Three Column Three Column Three Column Three Column Three Column Three Column Three Column Three</div>
<div id="col_four">Colimn Four Column Four Column Four Column Four Column Four Column Four Column Four Column Four Column Four Column Four Column Four Column Four Column Four Column Four Column Four Column Four Column Four</div>
<div id="col_five">Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five Column Five</div>
<br style="clear: both;" /> <!-- Included to force the container to wrap the columns -->

</div>
</body>

</html>

Tonearm

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3418008 posted 8:56 pm on Aug 9, 2007 (gmt 0)

Thanks a lot Marshall, I'm going to try this out right away.

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3418008 posted 9:15 pm on Aug 9, 2007 (gmt 0)

You're welcome. Any problems you can SM or post them. Glad I can help where I can.

Marshall

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved