?
Solved

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

Posted on 2003-03-03
3
Medium Priority
?
798 Views
Last Modified: 2008-03-03
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
Comment
Question by:memerot
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 17

Accepted Solution

by:
dorward earned 340 total points
ID: 8058987
<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
 
LVL 2

Author Comment

by:memerot
ID: 8059014
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
 
LVL 2

Author Comment

by:memerot
ID: 8059034
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses
Course of the Month8 days, 7 hours left to enroll

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question