Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to make a <div> stretch for its content like a table?

    with the help of this site i have been recoding my layout from tables to divs.

    I have replaced tables like:

    Code:
    <table class="main">
    <tr>
    <td class="left">&nbsp;</td>
    <td class="mid">&nbsp;My Header&nbsp;</td>
    <td class="right"><&nbsp;</>
    </tr>
    <tr>
    <td class="row" colspan="3">
    My content
    </td>
    </tr>
    </table>
    with divs like:

    Code:
    <div class="main>
    <h1 class="header">
    <span class="left">&nbsp;</span>
    <span class="right">&nbsp;</span>
    <span class="mid">My Header</span>
    </h1>
    <div class="row">My Content</div>
    </div>
    and css similar to:

    Code:
    .left { float:left; width: 20px }
    .right { float:right; width: 20px }
    .mid { white-space:nowrap } <<<something like, cant remember right now.
    now, when 'main' has width:100px; and 'mid' contents are stretch to larger than the size of mid, they overlap onto the 'right' span and in some cases they stretch beyond the right span, into any containing divs or adjacent divs.

    How can I make the divs stretch like a table layout?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    I guess you are still "thinking in tables". When you switch from tables to CSS it seems kinda like you need to think a little more outside the box but actually it's much more natural.
    So you shouldn't think too visually but more like how you would sort your content without styles at first. This is part of semantic HTML - only using the elements you need and just for the purpose they are meant for. For example:

    Code:
    <body>
    <div id="container">
      <div id="header>
        <h1>Headline</h1>
        <ul>
          <li><a href="#">Navigation link 1</a></li>
          <li><a href="#">link 2</a></li>
          <li><a href="#">link 2</a></li>
        </ul>
      </div>
      <hr />
      <div id="content">
        <h2>Headline</h2>
        <p>text</p>
        ... whatever ...
      </div>
      <hr />
      <div id="footer">
       ... footer stuff (navigation again, coyright notice, etc.) ...
      </div>
    </div>
    </body>
    You divide your page into logical sections (using divider elements), use headline tags for headlines, list elements (ul, ol, dl) for lists, paragraph elements for paragraphs of text, etc. without thinking of the design yet and only then you start styling it, using the elements you've got and not adding redundant HTML.
    Last edited by VIPStephan; 01-05-2007 at 05:20 PM.

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah, i got it in divs, but how do i make them stretch?

    this page has no problems:
    http://digitalpatriots.org/index.php...2701715&clan=0

    this page (not validated yet, gimme chance):
    http://digitalpatriots.org/The+5th+Platoon

    has a problem


    this div is 2nd column, 2nd from bottom.

    TWL> America's Army: NA - 4v4 Objective 8Speed 9
    Rank: 30 Win: 0 Losses: 0 Forfeits: 0
    Status: Attacking
    Opponent: echo 6
    Match Date: Saturday, January 6 9:00 PM EST
    Map: AA-Urban Assault(OT)

    This text sticks out of the div:
    TWL> America's Army: NA - 4v4 Objective 8Speed 9

  • #4
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post
    If you're trying to make a 3 column fluid layout (w/ header and footer) ... [aka the holy grail].... i think this might be helpful: http://alistapart.com/articles/holygrail
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by fatrat View Post
    yeah, i got it in divs, but how do i make them stretch?

    this page (not validated yet, gimme chance):
    http://digitalpatriots.org/The+5th+Platoon
    You are indeed thinking in tables in your strive to emulate the behavior of a table exactly. The main difference here is that tables ignore the width you specified and expand anyway when they have too much content. This behavior means that a “fixed” layout is not actually fixed when a table is used for that purpose.

    Anyway, the simple options are:
    • Stop using a fixed height and allow the text to wrap instead of insisting that it stay on one line for merely aesthetic purposes. Putting text in boxes that have both dimensions fixed lacks accessibility and will result in increased chances of overlap, especially when you consider that users can override the font sizes in your style sheet.
    • If you insist that the text remain on one line anyway, you can use the overflow: hidden declaration to hide the escaping text with a result that data will be hidden. Because data may be hidden and is unaccessible this way, this is not user friendly.
    • Use one content column instead of two to give your content more available room.
    • Use display: table and display: table-cell. These declarations are still not supported by Internet Explorer. These basically do what you’re requesting, but are not really a solution since I assume Internet Explorer users are your target audience.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    argggh, ur killing me....

    Code:
    /********************************************/
    /*											*/
    /*		Standard Element Header				*/
    /*  										*/
    /********************************************/
    h1 { padding:0px; margin:0px auto;  border-left: solid 1px #404040; border-right: solid 1px #131313; border-top: solid 1px #3C3C3C; border-bottom: solid 1px #131313; }
    .standardheader	{ border:0; border-collapse:separate; border-spacing:0px; margin-bottom:10px; }
    .standardheader-left { display:block; float:left; padding:0px; margin:0px auto; color:#fff; background: #000 url(../images/blackth.jpg) left bottom repeat-x; width: 10px; min-height: 20px; }
    .standardheader-right { display:block; float:right; padding:0px; margin:0px auto; color:#fff; background: #000 url(../images/blackth.jpg) left bottom repeat-x; width:20px; min-height: 20px; }
    .standardheader-mid { display:block; float:none; padding:0px; margin:0px auto; background: #000 url(../images/blackth.jpg) left bottom repeat-x; font-size: 12px; font-weight: bold; color: #D0D0D0; text-align: left; min-height: 20px; }
    I have taken out the 'nowrap' but it still doesnt wrap.

    http://digitalpatriots.org/americasarmy


    use this link, all the other links will just show the default css style, this is the one im messing with.

    Its really hurting to have to be thinking to suit all browsers at all resolutions and now your making me allow for zoomability. I dont know y I keep coming back....i must be a sadist, or masachist, whichever..it hurrrrrtss.


    [EDIT] header was full of &nbsp; instead of spaces, working on that.


    [edit]

    i have changed the images so they are top left and made the background colour the same colour as the base of the image, so u cant tell where it ends. No the text zoom is looking good, and I have to admit, its not such a bad thing to have the text wrap, its probably better than stretching the page.

    Man, I have a lot thank you for!!

    Code:
    /********************************************/
    /*											*/
    /*		Standard Element Header				*/
    /*  										*/
    /********************************************/
    h1 { padding:0px; margin:0px auto;  border-left: solid 1px #404040; border-right: solid 1px #131313; border-top: solid 1px #3C3C3C; border-bottom: solid 1px #131313; }
    .standardheader	{ border:0; border-collapse:separate; border-spacing:0px; margin-bottom:10px; }
    .standardheader-left { display:block; float:left; vertical-align:middle; padding:0px; margin:0px auto; border:0px; background: #202020  url(../images/blackth.jpg) left top repeat-x; width: 10px; min-height: 20px; font-size: 12px; font-weight: bold; color: #D0D0D0; text-align: left; }
    .standardheader-right { display:block; float:right; vertical-align:middle;padding:0px; margin:0px auto; border:0px; background: #202020  url(../images/blackth.jpg) left top repeat-x; width:20px; min-height: 20px; font-size: 12px; font-weight: bold; color: #D0D0D0; text-align: left; }
    .standardheader-mid { display:block; float:none; vertical-align:middle; padding:0px; margin:0px auto; border:0px; background: #202020  url(../images/blackth.jpg) left top repeat-x; min-height: 20px; font-size: 12px; font-weight: bold; color: #D0D0D0; text-align: left; }
    Last edited by fatrat; 01-05-2007 at 08:56 PM.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by fatrat View Post
    I have taken out the 'nowrap' but it still doesnt wrap.

    http://digitalpatriots.org/americasarmy
    The live copy is wrapping fine for me in Firefox and Opera. Internet Explorer 7 adds an unnecessary line‐break though; I think that’s a bug in the way it handles floats.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://digitalpatriots.org/index.php...f51ecee&clan=0

    yeah, now its messed up in IE7, i think maybe thats the min-height/height bug in IE7 you have posted about before. ill find that post, set hieght for IE and hope that works

    edit: found it.

    Code:
    <!--[if IE lt 7]>
        <style type="text/css">
          h1 { /* IE6 does not understand min-height; it treats height as min-height. */
            height: 20px;
            }
        </style>
        <![endif]-->
    hmmm, how to put this in the css file, not the html?
    google......
    Last edited by fatrat; 01-05-2007 at 09:06 PM.

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by fatrat View Post
    yeah, now its messed up in IE7, i think maybe thats the min-height/height bug in IE7 you have posted about before. ill find that post, set hieght for IE and hope that works
    What you’re referencing is a lack of support for min-height in Internet Explorer 6. Internet Explorer 7 added support for that, though I wouldn’t be surprised if that version has bugs also. If you find that you need to serve separate code to IE, then try conditional comments. You can stick a second, IE‐only reference to a style sheet inside it.

    You probably also noticed that your table cells have spaces between them; that’s because Internet Explorer still does not support the border-spacing property. You may want to use the cellspacing attribute for that browser if you find that unacceptable. border-spacing should override cellspacing in the other browsers, so that shouldn’t affect them.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i need to put all the css in one style sheet.

    style sheets will be user editable.
    users customizing there style sheets will be given a duplicate of the defualt to play with. If I put them in a seperate style sheet, Im gonna have to change the CSS management so it duplicates that for them and allows them to edit it.....

    omg, it was much easy being a bad code writer....

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by fatrat View Post
    omg, it was much easy being a bad code writer....
    Thanks to Internet Explorer, this tends to unfortunately be correct if you need/want a complex layout to look the same in both that browser and the ones that do things correctly.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #12
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    edit: nvm fixed it.

    ps. seen as we are almost chatting here, u could add up to hotmail if u prefer.

    fatrat11w@hotmail.co.uk
    Last edited by fatrat; 01-05-2007 at 09:40 PM.

  • #13
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by fatrat View Post
    ps. seen as we are almost chatting here, u could add up to hotmail if u prefer.

    fatrat11w@hotmail.co.uk
    I prefer not to use email to communicate. If you want help via instant messaging, you can find that contact information under my name or profile here on the forum.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #14
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i added u, thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •