Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 801
  • Last Modified:

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>

0
memerot
Asked:
memerot
  • 2
1 Solution
 
dorwardCommented:
<span> is an inline element, the "width" propertly isn't supposed to apply.

Try replacing the <span> with a <div> and lose the <br> after it. You'll probably want to style away the margins and padding on the divs (margin: 0; padding: 0;)

0
 
memerotAuthor Commented:
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.
0
 
memerotAuthor Commented:
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.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now