I've been trying to wean myself off of tables. I've been reading about
the float property, and have implemented a couple of sites using divs
instead of tables, and generally I'm happy with the results.
Still, I'm having problems constructing a generalized approach to
laying divs side by side without being very specific about the width of
each div. The code below makes 3-columns of content, but unfortunately
if the visitor resizes the page large enough eventually the 3rd column
drops down below the second. I had hoped that the nowrap on the
bounding div would stop the problem.
Can anyone point me in the direction of how to do this? Ultimately I'd
like to be able to have 23 side by side columns if I like with the
assurance that they'll remain locked side by side. Any online
tutorials I might have missed would be extremely helpful - I've read
many so far, and also the float section in the Schengili/Roberts "Core
CSS" book but I can't find a clear answer on how to approach this
problem.
Thanks!
philz
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Upcoming Events & Workshops</title>
<style type="text/css" title="test">
<!--
BODY {
background-color: #000000
text-color: #ffffff;
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: small;
}
div
{
margin: 0px;
padding: 0px;
}
..columnOne {
float: left;
padding: 4px;
border: none;
color: #ffffff;
margin-left: 0px;
p\osition: relative;
}
..columnRight {
float: left;
padding: 4px;
border: none;
color: #ffffff;
margin-left: 4px;
margin-right: 4px;
p\osition: relative;}
..zTextLarge {
color: #ffffff;
font-size: large;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
}
-->
</style></head>
<body text="#FFFFFF" bgcolor="#000000" link="#0000FF" vlink="#551A8B"
alink="#0000FF">
<p>
This is a test of CSS Float properties
</p>
<br><br>
<br><br>
<div style="nowrap" align="left">
<div class="columnOne">
<span class="zTextLarge"><u>Performances</u></span>
<br><br>
content 1<br>
content 1<br>
content 1<br>
content 1<br>
content 1<br>
</div>
<div class="columnRight">
<span class="zTextLarge"><u>Vocal Workshops</u></span>
<br><br>
content 2<br>
content 2<br>
content 2<br>
content 2<br>
content 2<br>
</div>
<div class="columnRight">
<span class="zTextLarge"><u>Other Workshops</u></span>
<br><br>
content 3<br>
content 3<br>
content 3<br>
content 3<br>
content 3<br>
content 3<br>
</div>
</div>
</body>
</html>
