Link to home
Start Free TrialLog in
Avatar of memerot
memerot

asked on

CSS width problem - can't seem to force spans to be same size

I have a page where I'm trying to use all CSS divs and span instead of using a table.  I can't figure out why applying a style="width:150px;" to the spans isn't doing anything.  Any pointers?  I tried specifying the value in a class first, then inline.  I added a   if the database results came back blank for that column.  No luck.....   I've specified width's for spans before without any problem.... must be missing something but I've been staring at this all morning....

Code for page:

<!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" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/obs.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/projectList.css" />
</head>
<body>
<form id="frmProjectList" name="frmProjectList" action="projectList.htm" method="post">
<div id="divBRF" class="projectTypeHeader">
BRF
</div>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?projectID=BRF-0001-03&mode=edit">BRF-0001-03</a></span>
<span class="projectName" style="width:150px;">&nbsp;</span>
<span class="projectProducer" style="width:200px;">Whitewb&nbsp;</span>
<span class="projectSynopsis" style="width:300px;">&nbsp;</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?projectID=BRF-0002-03&mode=edit">BRF-0002-03</a></span>
<span class="projectName" style="width:150px;">&nbsp;</span>
<span class="projectProducer" style="width:200px;">Whitewb&nbsp;</span>
<span class="projectSynopsis" style="width:300px;">&nbsp;</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?projectID=BRF-0003-03&mode=edit">BRF-0003-03</a></span>
<span class="projectName" style="width:150px;">test 3&nbsp;</span>
<span class="projectProducer" style="width:200px;">whitewb&nbsp;</span>
<span class="projectSynopsis" style="width:300px;">&nbsp;</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?projectID=BRF-0005-03&mode=edit">BRF-0005-03</a></span>
<span class="projectName" style="width:150px;">&nbsp;</span>
<span class="projectProducer" style="width:200px;">whitewb&nbsp;</span>
<span class="projectSynopsis" style="width:300px;">                              
                        &nbsp;</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?projectID=BRF-0006-03&mode=edit">BRF-0006-03</a></span>
<span class="projectName" style="width:150px;">&nbsp;</span>
<span class="projectProducer" style="width:200px;">whitewb&nbsp;</span>
<span class="projectSynopsis" style="width:300px;">                              
                        &nbsp;</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?projectID=BRF-0007-03&mode=edit">BRF-0007-03</a></span>
<span class="projectName" style="width:150px;">&nbsp;</span>
<span class="projectProducer" style="width:200px;">whitewb&nbsp;</span>
<span class="projectSynopsis" style="width:300px;">                              
                        &nbsp;</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?projectID=BRF-0008-03&mode=edit">BRF-0008-03</a></span>
<span class="projectName" style="width:150px;">&nbsp;</span>
<span class="projectProducer" style="width:200px;">whitewb&nbsp;</span>
<span class="projectSynopsis" style="width:300px;">                              
                        &nbsp;</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?projectID=BRF-0009-03&mode=edit">BRF-0009-03</a></span>
<span class="projectName" style="width:150px;">&nbsp;</span>
<span class="projectProducer" style="width:200px;">whitewb&nbsp;</span>
<span class="projectSynopsis" style="width:300px;">                              
                        &nbsp;</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?projectID=BRF-0010-03&mode=edit">BRF-0010-03</a></span>
<span class="projectName" style="width:150px;">&nbsp;</span>
<span class="projectProducer" style="width:200px;">whitewb&nbsp;</span>
<span class="projectSynopsis" style="width:300px;">                              
                        &nbsp;</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?projectID=BRF-0041-03&mode=edit">BRF-0041-03</a></span>
<span class="projectName" style="width:150px;">&nbsp;</span>
<span class="projectProducer" style="width:200px;">whitewb&nbsp;</span>
<span class="projectSynopsis" style="width:300px;">&nbsp;</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?projectID=BRF-0039-03&mode=edit">BRF-0039-03</a></span>
<span class="projectName" style="width:150px;">&nbsp;</span>
<span class="projectProducer" style="width:200px;">whitewb&nbsp;</span>
<span class="projectSynopsis" style="width:300px;">                              
                        &nbsp;</span>
<br>
<span class="projectLink" style="width:150px;"><a href="projectDetails.htm?projectID=BRF-0037-03&mode=edit">BRF-0037-03</a></span>
<span class="projectName" style="width:150px;">&nbsp;</span>
<span class="projectProducer" style="width:200px;">whitewb&nbsp;</span>
<span class="projectSynopsis" style="width:300px;">                              
                        &nbsp;</span>

<input type="hidden" id="status" name="status" value="active">
</form>
</body>
</html>

Code for stylesheet (I just put ugly borders around the blocks to see how they were lining up):
<STYLE>
BODY
{
}
.projectName
{
    BORDER-RIGHT: aqua solid;
    BORDER-TOP: aqua solid;
    BORDER-LEFT: aqua solid;
    WIDTH: 200px;
    BORDER-BOTTOM: aqua solid
}
.projectProducer
{
    BORDER-RIGHT: black thin solid;
    BORDER-TOP: black thin solid;
    BORDER-LEFT: black thin solid;
    WIDTH: 200px;
    BORDER-BOTTOM: black thin solid
}
.projectSynopsis
{
    BORDER-RIGHT: fuchsia solid;
    BORDER-TOP: fuchsia solid;
    BORDER-LEFT: fuchsia solid;
    WIDTH: 400px;
    BORDER-BOTTOM: fuchsia solid
}
.projectLink
{
    BORDER-RIGHT: lime solid;
    BORDER-TOP: lime solid;
    BORDER-LEFT: lime solid;
    WIDTH: 150px;
    BORDER-BOTTOM: lime solid
}
</STYLE>

ASKER CERTIFIED SOLUTION
Avatar of dorward
dorward

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of memerot
memerot

ASKER

Hmm.... divs stack vertically don't they?  If I want this to simulate table columns, what do I need to do?  Float:left or something?  I've never used those before.
Avatar of memerot

ASKER

Ok... changing to div, float left works.  I'm confused on this.....  I thought divs where vertical divisions, and spans were horizontal spans.  Guess I'll have to do some re-reading.  I'm awarding you the points dorward.