#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Location
    Greece
    Posts
    149
    Rep Power
    14

    Exclamation CSS: Defining the width of inline elements


    Hi everyone!

    I'm redesigning my site throwing away the tables I used, using CSS instead but I ran into a problem.

    I have 2 images and a piece of text, today's date. I want them displayed like this:

    Code:
    | IMG no1 |     Date     | IMG no2 |
    I made the vertical alignment work so that the date text is centered between the borders of the images but there's one thing left to end this quest.

    I want the date to be displayed centered horizontally in a 172 pixel virtual box. I searched all over the Internet only to find that the width property only works for block-level elements, which, by the way, are displayed in a new line.

    Of course what I want, is all 3 elements to be displayed in a single line.

    Does anyone have any idea how to accomplish that? It was SO easy with tables...

    Thank you in advance!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    19
    Code:
    <img src="http://www.google.com/logos/Logo_40wht.gif" alt="image1" style="width: 100px" />
    <span style="width: 172px; text-align: center">date</span>
    <img src="http://www.google.com/logos/Logo_40wht.gif" alt="image2" style="width: 100px" />
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Location
    Greece
    Posts
    149
    Rep Power
    14
    Thanks for replying degsy, but it didn't work.

    I tried it in IE6, Opera 7 and Netscape 7.

    Having researched the subject a bit more, I found out that I can use the display: inline-block; property, but unfortunately it only works well in IE.

    I fear I'll have to keep the table for this case...

    Do you have anything else to suggest?
  6. #4
  7. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    div#date  {
               width: 412px;
               font: 200 11px verdana,sans-serif;
               color: navy;
               text-align : center;
               padding: 1px 3px 3px 3px;
               border: 3px black double;
               margin: 0px auto;
              }
    
    img.left  {
               margin-right: 16px;
               vertical-align: middle;
              }
    
    img.right {
               margin-left: 16px;
               vertical-align: middle;
              }
    
    body      {
               text-align: center;
              }
    
    </style>
    </head>
    <body>
    <br /><br /><br />
    <div id="date"><img class="left" src="http://www.islandathens.com/images/today.jpg" />
    <script type="text/javascript" language="javascript">
    var today = new Date().toLocaleString();
    document.write(today.substring(0,today.indexOf(':') - 2));
    </script>
    <img class="right" src="http://www.islandathens.com/images/today.jpg" /></div>
    </body>
    </html>
    Note: edited in response to the post below, which has some points well-taken, some others not, and no illustration of an actual solution, e.g., absolute positioning removes an element from the flow, how to deal with that, avoiding tables (wasn't that the original question? ).

    http://dbaron.org/css/2000/01/dibm
    Last edited by adios; May 2nd, 2003 at 11:22 PM.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    That will not, and should not work in compliant browsers. You can't set the width of an inline element. For one reason, you can't control where the element will be rendered: what if the element must be rendered across two or more lines? How do you, for example, define the width or height of an element like <span>My Node</span>, if for example, the text is wrapped between the two lines?

    To define a width, you usually need to use block level elements. Try using a div which is absolutely or relatively positioned relative to it's parent. You should be able to specify a width and it will work. Or just use a table, either way works.
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Location
    Greece
    Posts
    149
    Rep Power
    14
    Thank you for your replies.

    Sorry adios, but that doesn't do what I wanted. Thank you for the interesting link, though.

    Here's a listing of exactly what I had in my mind:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<title>Menubar</title>
    	</head>
    
    	<body bgcolor="#f2f2f2" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
    		<table width="100%" border="0" cellspacing="0" cellpadding="0" height="30">
    			<tr>
    				<td width="27"><img src="http://www.zefxis.gr/demos/z/images/menubar_language_en.gif" alt="" height="30" width="27" border="0"></td>
    				<td align="center" valign="middle" width="172" background="http://www.zefxis.gr/demos/z/images/menubar.gif"><font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">November 27, 2004</font></td>
    				<td width="521"><img src="http://www.zefxis.gr/demos/z/images/menubar_menu.gif" alt="" height="30" width="521" border="0"></td>
    				<td background="http://www.zefxis.gr/demos/z/images/menubar.gif">&nbsp;</td>
    			</tr>
    		</table>
    		<p></p>
    	</body>
    
    </html>

    I even thought of using whitespace to make the date element always 172px wide, but then I thought of how differently each browser would render it.

    I looked online even more only to find out that inline elements are very "dark" in their behavior, so I'm 99% thinking of going back to tables now.
    Last edited by -saturn-; May 3rd, 2003 at 05:50 AM.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    Tables aren't inherrently evil. Until everybody out there uses browsers with good CSS support, I'll continue to use them for some situations, just because I don't want to waste time with CSS cludges. Your example seems like a good candidate.
  14. #8
  15. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Try this...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 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>Menubar</title>
    <style type="text/css">
    
    div#topbar {
                width: 100%;
                height: 30px;
                background: url(http&#58;//www.zefxis.gr/demos/z/images/menubar.gif);
               }
    
    div#lang   {
                width: 27px;
                height: 30px;
                float: left;
                background: url(http&#58;//www.zefxis.gr/demos/z/images/menubar_language_en.gif);
               }
    
    div#date   {
                width: 222px;
                height: 14px;
                float: left;
                font: 200 10px verdana,helvetica,arial,geneva,swiss,sunsans-regular,sans-serif;
                color: #000060;
                text-align: center;
                padding: 8px 0px 8px 0px;
                background: url(http&#58;//www.zefxis.gr/demos/z/images/menubar.gif);
               }
    
    div#menu   {
                width: 521px;
                height: 30px;
                float: left;
                background: url(http&#58;//www.zefxis.gr/demos/z/images/menubar_menu.gif);
               }
    
    body       {
                margin: 0px;
                overflow: auto;
                background: url(http&#58;//216.40.241.209/textures/misc/misc264.gif) 0px 31px;
               }
    
    </style>
    </head>
    <body>
    <!-- menu bar -->
    
    <div id="topbar">
    <div id="lang"></div>
    <div id="date">
    <script type="text/javascript" language="javascript">
    var today = new Date().toLocaleString();
    document.write('&amp;#171; ' + today.substring(0,today.indexOf(':') - 2) + ' &amp;#187;');
    </script>
    </div>
    <div id="menu"></div>
    </div>
    
    <!-- menu bar -->
    </body>
    </html>
    Last edited by adios; May 7th, 2003 at 10:35 PM.

IMN logo majestic logo threadwatch logo seochat tools logo