...

View Full Version : how to make a <div> stretch for its content like a table?



fatrat
01-05-2007, 04:52 PM
with the help of this site i have been recoding my layout from tables to divs.

I have replaced tables like:



<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:



<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:



.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?

VIPStephan
01-05-2007, 05:17 PM
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 (http://brainstormsandraves.com/articles/semantics/structure/) - only using the elements you need and just for the purpose they are meant for. For example:


<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.

fatrat
01-05-2007, 05:30 PM
yeah, i got it in divs, but how do i make them stretch?

this page has no problems:
http://digitalpatriots.org/index.php?sid=0cb990f19afae67200e5270b32701715&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

zro@rtv
01-05-2007, 06:22 PM
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

Arbitrator
01-05-2007, 08:03 PM
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+PlatoonYou 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.

fatrat
01-05-2007, 08:29 PM
argggh, ur killing me....



/********************************************/
/* */
/* 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!!



/********************************************/
/* */
/* 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; }

Arbitrator
01-05-2007, 08:58 PM
I have taken out the 'nowrap' but it still doesnt wrap.

http://digitalpatriots.org/americasarmyThe 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.

fatrat
01-05-2007, 09:03 PM
http://digitalpatriots.org/index.php?sid=bdd0fbb20f5a9f53814241e3ff51ecee&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.


<!--[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......

Arbitrator
01-05-2007, 09:13 PM
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 worksWhat 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 (http://www.quirksmode.org/css/condcom.html). 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.

fatrat
01-05-2007, 09:22 PM
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....

Arbitrator
01-05-2007, 09:27 PM
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.

fatrat
01-05-2007, 09:37 PM
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

Arbitrator
01-05-2007, 10:21 PM
ps. seen as we are almost chatting here, u could add up to hotmail if u prefer.

fatrat11w@hotmail.co.ukI 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.

fatrat
01-05-2007, 11:11 PM
i added u, thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum