Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Is there a CSS equivalent of table width=100%

Status
Not open for further replies.
mts148

mts148

Programmer
Apr 4, 2005
10
GB
I have been trying to convert my table-based layout into smaller CSS, and mostly I've been successful. My problem has been with tables with width=100% and the fluid resizing of the two or more td elements inside.

This snippet shows my attempt to convert two TDs into CSS, but still relies on tables to get the main content to have a margin since IE coughs when you use a width=100% inside a margin - it treats the width of the containing box as if the margins weren't there, where firefox doesn't. What also happens is that the two "cells" flow past each other into multiple lines rather than causing scrolling like a single TR would do.

This also doesn't cope with three, four or more cells.

Am I trying too hard to get rid of tables?

Code: 
<html>
<body>
<h3>a title</h3>
<table width=100%><tr><td width=50><table width=50></table></td><td>
  <div style="float:left">
    caption<br>
    <br>
    <select size=10>
    <option>a list of options</option>
    <option>that might be variable size</option>
    </select>
  </div>
  <div style="float:right"><div style="float:right">
    caption<br>
    <br>
    <select size=10>
    <option>another list of options</option>
    <option>that might be variable size</option>
    </select>
  </div></div>
</td><td width=50><table width=50></table></td></tr></table>
</body>
</html>

Any help greatly appreciated,

Mark Smith
 
Sort by date Sort by votes
Have you tried adding a complete DOCTYPE as the very first line of your page? Something like this:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

It will put IE in standards-compliant mode (well, it will take it out of "quirks" mode, at least).

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]
 
Upvote 0 Downvote
I'm using html 4.01 transitional, as follows

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<h3>a title</h3>
<div style="margin: 1em 50px 1em 50px">
  <table width=100%><tr><td align=left>
    caption<br>
    <br>
    <select size=10>
    <option>a list of options</option>
    <option>that might be variable size</option>
    </select>
  </td><td align=right>
    caption<br>
    <br>
    <select size=10>
    <option>another list of options</option>
    <option>that might be variable size</option>
    </select>
  </td></tr></table>
</div>
</body>
</html>

This shows in IE the rather bad handling of width=100%, this is what I'm trying to avoid. The top-level div is the cause, which is why I was trying to convert it somehow.

Thanks,

Mark
 
Upvote 0 Downvote
I must admit that by looking at your code I have absolutely no idea what you're trying to accomplish. There is no need to float a single div in a single table cell. What is the point of opening a table tag and closing it immediately after? Are you using table cells with 50px width for margins/padding? What do you mean tr creates a scrolling? I have never seen default behaviour of tr creating scrollable content.
 
Upvote 0 Downvote
cLFlaVA: Sorry, this is what the w3c validator gave me, I believe there might be a second segment pointing to the DTD, as in BillyRayPreachersSon's sample, but I don't know what it should be, both for 4.01 transitional and 4.01 frameset.

Vragabond: My second code fragment is closer to what I'm trying to achieve. I'd like a title above the normal concept of 'body', where the rest of the content has the left and right margins. Inside that I want the ability for a page to have an element with width=100% so that it can spread out two or more elements across the page that resize as fluidly as TD elements do without breaking onto multiple lines. In a complicated case I can have 4 rows of 5 elements each. Can it be done with DIVs and CSS2 without actually using tables? Can it at least be achieved so that IE doesn't break as per my second post?

Thanks,
Mark
 
Upvote 0 Downvote

I'm using html 4.01 transitional
Click to expand...

Then why remove the line from your original post?!

As cLFlaVA says in point 1, the DOCTYPE you are using is not complete or valid. You may as well not have it in place.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Vragabond: the fixed width table elements are to prevent the TD from collapsing when resized down to minimum width, as IE doesn't implement min-width. I've re-read the box model info on w3c's css definition without much luck. One of my attempts created two floating divs that could transparently overlap each other, which was interesting.
 
Upvote 0 Downvote
BillyRayPreachersSon: I didn't remove it, it wasn't there, as it seemed to make no difference to IE while I was creating the minimalist example.
 
Upvote 0 Downvote
It seems the full DTD does fix the behaviour, at least in IE6/WinXP; it now behaves like Firefox. Am I right in thinking this should allow me to use the CSS layout for the 'body' class and still use tables successfully for the fluid resizing?
 
Upvote 0 Downvote
How about this? 4 columns, floating, fluid, in IE, with margins:
Code: 
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <title>Ahh, floats</title>
    <style type="text/css">
	#frame {
		margin: 1em 50px;
	}
	
	#frame div {
		float: left;
		width: 25%;
		height: 200px;
	}
    </style>
  </head>
  <body>
    <div id="frame">
      <div style="background: red;"></div>
      <div style="background: blue;"></div>
      <div style="background: yellow;"></div>
      <div style="background: green;"></div>
      <div style="clear: both;"></div> 
    </div>
  </body>
</html>
 
Upvote 0 Downvote
Nice! Very close, but if you put content into those columns and resize to minimum they don't stay on one line, they shunt down the page. That was something I fixed with the empty table width=x to enforce min-width, but that only works when you know how many columns you have and/or what width they will be. It falls down with variable width, which tables and TD elements handle perfectly.
 
Upvote 0 Downvote
You actually cannot have both fluid and fixed widths. You could go with min-width, which is nicely supported in most today's browsers minus IE and use expressions to determine width in IE. That usually produces good results. However, if it is 4 columns and 5 rows, I am thinking this is less of a layout and more a tabular data. What will this "table" be filled with?
 
Upvote 0 Downvote
In this case, it's a data filter where each 'cell' is actually a variable sized SELECT element, both in width and height. For example, gender is very short and causes a narrow cell, but location of 'south west england' amongst others is wider. One row might have 3 wide cells and the other might have 5 narrow, if that's how they fit. The page itself is dynamically generated based on configuration data which allows me to control how many elements are on which rows, but very little beyond that.
 
Upvote 0 Downvote
Right now I'm seeing this as still needing to use tables, one per row, but at least with the correct DTD IE6 isn't formatting it beyond the right side of the window. Anyone know if any earlier version of IE6 are likely to mis-format along these lines? I need content that will look reasonable in most browsers even if it's not perfect.

It's a shame there isn't a CSS style for 'share the width of the parent between this group of elements' like TD does.

Thanks,
Mark
 
Upvote 0 Downvote
css for "share the width of the parent between this group of elements":

Code: 
<div style="width: 600px;">
  <div style="width: 33%; float: left;"></div>
  <div style="width: 34%; float: left;"></div>
  <div style="width: 33%; float: left;"></div>
</div>

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
Of course! That works if you know how many elements there are beforehand. This is dynamically generated, so I might have to cache the page beforehand and make the calculation then, but this is possible.

Whether it's more efficient than just using tables, I don't know.

Thanks again,

Mark
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
816
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
814
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
642
PeDa
PeDa
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
769
3esolar
3

Part and Inventory Search

Sponsor

Back
Top