Tables for layout

HTML & CSS
1

Hey,

I’m thinking i’m going to have to use a table for a simple 2 column layout :frowning:

The problem i’m having with the following is that a fixed width element or table with a lot of columns kills the layout.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#side {
	background: red; 
	width: 140px; 
	float: right
}
#content {
	background: green;
	margin-right: 150px;
	height: 2em
}
#block {
	width: 500px;
	background: purple
}
</style>
</head>
<body>
<div id="side">&nbsp;</div>
<div id="content">
  <div id="block">&nbsp;</div>
</div>
</body>
</html>

As I understand it the only thing that will force the outer columns to stay intact regardless of varying width content is a table - or display: table properties


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper { display: table; width: 100&#37;; height: 2em }
#side {
	background: red; 
	width: 150px;
	display: table-cell;
}
#content {
	background: green;
	display: table-cell;
}
#large-block {
	width: 500px;
	background: purple
}
#small-block {
	width: 140px;
	margin-left: 10px;
	background: blue
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="content">
      <div id="large-block">&nbsp;</div>
    </div>
    <div id="side">
      <div id="small-block">&nbsp;</div>
    </div>
</div>
</body>
</html>

The problem with the code above of course is that IE6/7 don’t support it…
min-width isn’t an option either as the content will be of varying widths and I need to make it unbreakable.

So … use a table?

2

Hi Mark, you are confused, though probably because of myself…I have reread your post multiple times though.

You are saying with the 1st code snippet that they aren’t connecting? That’s because the 150px right margin set apposed to the 140px float width.

I have changed the browser width with both examples hoping to see what you are describing but nothing :(.

3

The first example breaks at smaller sizes - The elements don’t wrap to contain their children.
The red element sits on top of the purple, the green element shrinks into nothingness.
This causes overlap of elements in the columns and isn’t desirable.

Whereas the second example can take a kicking and hang together quite well forcing a horizontal scroll bar when necessary.

tables win :slight_smile:

4

Oh I know why I couldn’t see anything in the 2nd example…it was falling to the table-row bug in firefox (which is the browser I was using)

I think for that purpose yes I would use tables if the inner elements widhts would vary :slight_smile:

5

Hi Mark,

If you want to support IE6/7 and have your main container expand/contract with the content width then yes a table is your best bet.

You may remember my post from a thread we were involved in recently.
As I mentioned there I got close with IE6 but IE7 was hopeless. :wink:

6

Hmm, I get the feeling other members here won’t give up so easily :wink:

Consider the challenge set - After all this time tables are still a necessary evil. Still for some time I imagine if we need to wait until IE6 and 7 can be forgotten about.

Edit: I’m not saying I think you have given up too easily - There may well be no good solution to this.

As I mentioned there I got close with IE6 but IE7 was hopeless.

Yeah, I haven’t cracked it yet. But stranger things have happened before in the forum :wink:

7

Give it your best shot, we’d all like to see it work for IE7 in a real world situation. :slight_smile:

Have a look through Quiz 26

originally posted by Paul O’B -The second part of the quiz is to get something to work in IE7 and as you can see from the screenshot I have a working example. However the layout in IE7 wouldn’t really be useful in real life for a number of reasons but it’s a good test all the same.

EDIT:

Ahh, no edits allowed. I already quoted you. Just kiddin, go ahead and try though.

8

phew. im a newbie here. so i’ll keep watching

9

Hi, welcome to Sitepoint :slight_smile:

I should say that this really is an exceptional case - Very-nearly-almost-always you can achieve any design without the help of a table tag - They should really only be used to mark up tabular data.

10

Yeah, I haven’t cracked it yet. But stranger things have happened before in the forum :wink:
That’s right! I’m still working on float:bottom; every now and then. :smiley:
I hope to crack it before it actually becomes a real value.

11

Try this in IE8 only :slight_smile:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.test {
    writing-mode:lr-bt;
    text-align:justify;
    width:50%;
    margin:auto;
    padding:10px;
    border:5px solid red;
}
span {
    width:100px;
    height:100px;
    float:right;
    background:red;
    margin:10px 10px 0;
}
</style>
</head>
<body>
<div class="test">
    <p><span>float</span> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>
</body>
</html>
12

Yes I had seen that when you showed James Hopkins how float bottom should work. :slight_smile:

I can keep the float where I want it at all times but I have to put it in an AP parent which kills the text flow (same theory as the js float pusher). If there was just some way to have an in flow parent that would stay at 100% height we might be able to pull it off.

http://www.css-lab.com/lab-work/float-test/float-bot.html

13

Yes, it’s a connundrum :slight_smile: The 1px float pusher that has a height 100% (via js) is the only way that really works for all.

This works in Firefox 3.5 but other browsers don’t like it (not sure why yet).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Float Bottom 1</title>
<style type="text/css">
h1{text-align:center;}
body{line-height:1.2}
.test {
    text-align:justify;
    width:50%;
    margin:auto;
    border:4px solid red;
    height:105px;
    display:table;
    line-height:25px;
    background:#EEE;
}
.test p {
    margin:0;
    padding:10px;
}
b {
    float:right;
    width:3px;
    height:100%;
    margin-bottom:-115px;
    display:table;
}
span {
    width:98px;
    height:98px;
    float:right;
    border:2px solid red;
    margin:0 5px 0 5px;
    clear:right;
    position:relative;
}
</style>
</head>
<body>
<h1>Float bottom in Firfefox 3.5 only</h1>
<div class="test"> <b></b><span>float</span>
    <p> START text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text END</p>
</div>
</body>
</html>
14

This works in Firefox 3.5 but other browsers don’t like it (not sure why yet).

That’s pretty slick Paul! :slight_smile:
It’s working in FF3 for me too. Other browser don’t seem to be inheriting the height to the “b” table. The only way I can get them to take any height (other than an explicit height) is by adding some top padding to it.

That is definitely something to keep working with. :wink: