17 replies [Last post]
edacsac
Offline
Regular
Last seen: 14 years 20 weeks ago
Joined: 2005-05-24
Posts: 12
Points: 0

Hi all!

I'm trying to overcome an issue with CSS layout that includes a table in one of the divs. The basic layout is fluid with a header area, below that is a navigation column with a fixed width of 170px, to the right of that is a div that takes the rest of the available browser width.

In pure CSS I almost get what I want, but when I add the table into the content div/area at 100% width like it needs to be to stretch out in the div, FF and Opera take the 100% width as the browser window width, not the available div width, and moves my table and containing div below my nav column.

Right now I'm using a mix between tables and CSS for layout, and everything stays tight except that Opera will not stretch the table 100% width.

Below is simplified html and css of what I'm trying to accomplish. Previously I had the left nav div and the right container div wrapped in another div for easier interchangability, but with or without the problem is still there. The only other difference, is that my site is dynamic using PHP, but setting up without PHP makes no difference.

CSS:

#pageWrap {
FLOAT: left; - with or without, no difference 
BORDER: solid #000000 0px;  
} 
#title { 
FLOAT: left; - with or without, no difference 
PADDING: 0px 0; 
height: 60px; 
PADDING-LEFT: 5px; 
BACKGROUND-COLOR: #2A3D5C; 
} 
#innerWrapLeft { 
FLOAT: left; 
WIDTH: 170px; 
PADDING: 0px; 
BORDER-LEFT: solid #000000 1px; 
BORDER-RIGHT: solid #000000 1px; 
BACKGROUND-COLOR: #8F97A4; 
} 
#innerWrapRight { 
FLOAT: left; - lines up better floated right, but no difference in my problem
PADDING: 5px; 
PADDING-RIGHT: 0px; 
/*WIDTH: 100%;*/  - with or without, no difference
BORDER: solid #000000 1px; 
VERTICAL-ALIGN: top; 
}

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>blah</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<LINK REL=StyleSheet HREF="styleB.css" TYPE="text/css"> 
</head> 

<body> 
<div id="pageWrap"> 
	<div id="title"> 
		blah 
	</div> 
	<div id="innerWrapLeft"> 
		Whatevever<br> 
		Whatevever<br> 
		Whatevever<br> 
		Whatevever<br> 
		Whatevever<br>
	</div> 
	<div id="innerWrapRight"> 
		<table border="1" width="100%" cellpadding="0" cellspacing="0">
			<tr>
				<td>blah</td>
				<td>blah</td>
				<td>blah</td>
				<td>blah</td>
				<td>blah</td>
			</tr>
		</table>
	</div> 
</div> 

I'd like to drop the table/css perversion I'm using now for layout, and go all CSS except for the table that actually has tabular data in it. Help?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Basic layout in css, with table in a div.

I am a little confused by your CSS and HTML, but based on your text description try this.

css - 
body {
    background: url(images/faux-columns.gif) repeat-y;
}

#title {
    height: 60px;
    background: #2a3d5c;
    padding: 0 0 0 5px;
}

#left {
    float:left;
    width:170px;
}

#content {
    margin-left:175px;
    border: 1px solid black;
}

* html #content { height: 1px; }  /* holly hack to force IE into hasLayout mode */

#content table {
    width:100%;
    border: 1px solid black;
    border-collapse: collapse;
}

html - 

<body>
<div id='title'>blah</title>
<div id='left'>whatever</div>
<div id='content'>
  <table>
    <tr>
      <td>blah</td>
      <td>blah</td>
      <td>blah</td>
      <td>blah</td>
    </tr>
  </table>
</div>

#content is not floated and left fluid. By specifying a margin-left value slightly larger than the width of the floated #left the width of #content will be the remaining window width. Now the table can be set to a width of 100% to fill #content, rather than the browser window.

I guessed you were after a full length column background and specified a faux column image for the body to achieve that. If you just want a background underneath the element (and not the full height) remove that and place background-color on #left and #content.

edacsac
Offline
Regular
Last seen: 14 years 20 weeks ago
Joined: 2005-05-24
Posts: 12
Points: 0

Basic layout in css, with table in a div.

Thanks Chris!

I am excited to try it with the margin attribute, since I think this will work well. Is my CSS really that bad that its confusing? I've only recently been pushing myself to do every site in CSS if I can. Rough road from tables thats for sure. I'd rather write custom C++ cgi executables that bridge disimilar applications, then try to get CSS to work consistantly and predictably between a handful of browsers.

vynsane
vynsane's picture
Offline
Regular
Last seen: 14 years 39 weeks ago
Joined: 2005-05-15
Posts: 45
Points: 0

Basic layout in css, with table in a div.

i think the CSS is just a bit confusing as it uses a lot of weird id names: #innerWrapLeft is a lot more confusing than #leftcolumn or #leftnav. you're making it more complicated than it has to be. go easy on youself!

i also wouldn't go calling id's or classes the same word as an html tag. #title is too close to <title> and could possibly really screw things up if say, the # were dropped... especially if you used a #body or .body!

The technology is three months old. Only suckers buy out of date machines. You're not a sucker, are you sir? Because if you were I'd have to ask you to leave the store.

www.vynsane.com

edacsac
Offline
Regular
Last seen: 14 years 20 weeks ago
Joined: 2005-05-24
Posts: 12
Points: 0

Basic layout in css, with table in a div.

Hey Chris,

Thanks again for your help! Everything works real well with the example you've given me, except for formatting the table. Which I hope there is a better css friendly way to do so.

With the example you gave, the table stretches out to fill the content div just perfectly. But when I add width attributes to all the <td>'s except one, which my layout needs, the <td> without a width attribute shrinks to the width of text inside the <td>, and the table now falls short on the width.

example:

html - 

<body> 
<div id='title'>blah</title> 
<div id='left'>whatever</div> 
<div id='content'> 
  <table> 
    <tr> 
      <td width="90">blah</td> 
      <td>blah</td> <- This one shrinks, instead of expanding to make up the differnce to 100% table width.
      <td width="100">blah</td> 
      <td width="140">blah</td> 
    </tr> 
  </table> 
</div> 

How do I set static widths for <td>'s, and have the <td>(Drunk that do not have width attributes stretch to complete the overall 100% table width?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Basic layout in css, with table in a div.

It works for me --- see here

That is the html from your last post (+ the missing </div>) with the CSS from my previous post (+ border and background on td), all pasted into a template using xhtml1-strict.dtd.

What browser are you having a problem with?
What doctype are you using?

edacsac
Offline
Regular
Last seen: 14 years 20 weeks ago
Joined: 2005-05-24
Posts: 12
Points: 0

Basic layout in css, with table in a div.

Thanks for the reply Chris.

I'm getting mixed results. On my home machine, its consistently broken in IE, FF, and Opera. At work, it works in FF and Opera, but IE is borked well beyond the table width, but our version of IE at work is "special", so that doesn't count.

I'm using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">, but I also tried xhtml1-strict.dtd and it made no difference at work

I don't believe I have the missing </div> on the real page. A couple of differences are that there is plenty of PHP around the HTML (not affecting layout except whether the table has 4 or 5 columns depending on authorization level, but I haven't tripped that yet), and I've added a few more divs inside my menu area - the left column, or whatever we called it that contain different things, like a login box, a multi level product menu - all in PHP, but they are wrapped in the left column and I wouldn't think it would affect the table width in another div. Plus, none of these have made a difference while working with it before. One thing I do notice, is that CSS does NOT like commented html, especially commented div's. Half the time it still shows the commented div's, or a skewed interperatation of the commented div's, and I clear cache every page view.

I won't be able to check thouroghly until I get home though. I don't have access to the real page here at work. I also changed the names of the CSS elements back to the original names, since it works better for me.

I really appreciate your help on this Chris. I'll have to double check everything when I get home. static width CSS is great for me, but when I try to get fluid, I have alot of problems.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Basic layout in css, with table in a div.

CSS and HTML use different comments.

CSS comments are /* */
HTML comments are <!-- -->

If you use the wrong one in the wrong place things will be well and truly screwed. Also if you try wrapping comments in other comments things may go awry. Also don't try adding extra "-" in the HTML comment tags.

The php should make no difference. What you need to do is work on the generated html and solve the problems for any given page. Then feed the solutions back into the html generated by the php scripts.

edacsac
Offline
Regular
Last seen: 14 years 20 weeks ago
Joined: 2005-05-24
Posts: 12
Points: 0

Basic layout in css, with table in a div.

I understand how the comments work between html and css, but now that you mention it, I may have wrapped comments in comments. Thats a definate possibility.

So what your saying here:

Quote:

The php should make no difference. What you need to do is work on the generated html and solve the problems for any given page. Then feed the solutions back into the html generated by the php scripts.

... is to layout the HTML with dummy content as to perfect the layout, and then add the dynamic content little by little.

If thats the case, it makes sense and I will try it. The page I'm working on is actually quite large and somewhat complex on the logic side, and I'm pretty much turning the PHP on and off while I troubleshoot the CSS, which in turn maybe causing me to miss the problem.

Thanks again!

lester lachcik
Offline
newbie
Last seen: 17 years 26 weeks ago
Joined: 2005-05-30
Posts: 1
Points: 0

CSS Layouts - lester (leszek) lachcik

Positioning with nested tables

In my view nested tables continue to be a very useful tool when it comes to web content positioning. I prefer to do all my storyboard structural models with nested tables before going on and attempting to integrate cascading stale sheets. Here's a typical web page positioning with nested tables:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

   <head>

      <title>
       <meta name="POSITIONING WITH NESTED TABLES by lester (leszek) lachcik" content="PERSONAL SITE">  
      </title>
      </head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#ff0080" alink="#0080ff">

<table cellspacing="0" cellpadding="4" border="1" width="100%" height="100%" bgColor="#ffffff" borderColor="#0000ff">
   <tr>
      <td align="center" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="4" border="1" width="100%" bgColor="#ffffff" borderColor="#0000ff">
   <tr>
      <td align="center" bgcolor="#ffffff" width="170">
         <b><a href="1.html" title="home">home</a></b>
      </td>
      <td align="center" bgcolor="#ffffff" width="170">
         <b><a href="1.html" title="work">work</a></b>
      </td>
      <td align="center" bgcolor="#ffffff" width="170">
         <b><a href="1.html" title="resume">resume</a></b>
      </td>
      <td align="center" bgcolor="#ffffff" width="170">
         <b><a href="1.html" title="school">school</a></b>
      </td>
      <td align="center" bgcolor="#ffffff" width="170">
         <b><a href="1.html" title="hobby">hobby</a></b>
      </td>
   </tr>
</table>
<table cellspacing="0" cellpadding="4" border="1" width="100%" height="515" bgColor="#ffffff" borderColor="#0000ff">
   <tr>
      <td align="center" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="4" border="1" bgColor="#ffffff" borderColor="#0000ff" width="100%">
   <tr>
      <td align="center" bgcolor="#ffffff" width="20%">
<table cellspacing="0" cellpadding="4" border="1" width="95%" bgColor="#ffffff" borderColor="#0000ff">
   <tr>
      <td align="center" bgcolor="#ffffff">
         <b><a href="1.html" title="work">work</a></b>
      </td>
   </tr>
   <tr>
      <td align="center" bgcolor="#ffffff">
         <b><a href="1.html" title="resume">resume</a></b>
      </td>
   </tr>
   <tr>
      <td align="center" bgcolor="#ffffff">
         <b><a href="1.html" title="school">school</a></b>
      </td>
   </tr>
   <tr>
      <td align="center" bgcolor="#ffffff">
         <b><a href="1.html" title="hobby">hobby</a></b>
      </td>
   </tr>
</table>
  <table cellspacing="0" cellpadding="4" border="1" width="95%" height="380" bgColor="#ffffff" borderColor="#0000ff">
   <tr>
      <td align="center" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="4" border="1" width="100%" height="379" bgColor="#ffffff" borderColor="#0000ff">
   <tr>
      <td align="center" bgcolor="#ffffff">
         <p>SPONSOR</p>
         <p><img src="/angel.gif" border="0" alt="angel" height="50px" width="50px" align="left" />
	   </p><p align="right">SPONSOR SPONSOR SPONSOR SPONSOR SPONSOR
         <a href="1.html" title="more">  MORE...</a>
         </p>
      </td>
   </tr>
   <tr>
      <td align="center" bgcolor="#ffffff">
         <p>WEATHER</p>
         <p><img src="/angel.gif" border="0" alt="angel" height="50px" width="50px" align="left" />
	   </p><p align="right">WEATHER WEATHER WEATHER WEATHER WEATHER
         <a href="1.html" title="more">  MORE...</a>
         </p>
      </td>
   </tr>
</table>
      </td>
   </tr>
</table>
      </td>
      <td align="center" bgcolor="#ffffff" width="40%">
<table cellspacing="0" cellpadding="4" border="1" width="100%" bgColor="#ffffff" borderColor="#0000ff">
   <tr>
      <td align="center" bgcolor="#ffffff" height="250">
         <p>SCOOL</p>
         <p><img src="/angel.gif" border="0" alt="angel" height="100px" width="100px" align="left" />
	   </p><p align="right">SCHOOL SCOOL SCHOO SCOOL SCOOL SCOOL SCOOL SCOOL SCOOL SCOOL SCOOL SCOOL SCOOL 
         SCOOL SCOOL SCOOL SCOOL SCOOL SCOOL SCOOL SCOOL SCOOL SCOOL SCOOL SCOOL SCOOL SCOOL SCOOL SCOOL 
         SCOOL SCOOL SCOOL SCHOOL SCHOOL......<b><a href="1.html" title="more">  MORE...</a>
         </p>
      </td>
   </tr>
   <tr>
      <td align="center" bgcolor="#ffffff" height="250">
	   <p>WORK</p>
         <p><img src="/angel.gif" border="0" alt="angel" height="100px" width="100px" align="left" />
	   </p><p align="right">WORK WORK SCHOO WORK WORK WORK WORK WORK WORK WORK WORK WORK WORK 
         WORK WORK WORK WORK WORK WORK WORK WORK WORK WORK WORK WORK WORK WORK WORK WORK 
         WORK WORK WORK WORK WORK WORK......<b><a href="1.html" title="more">  MORE...</a>
         </p>
      </td>
   </tr>
</table>
      </td>
      <td align="center" bgcolor="#ffffff" width="40%">
<table cellspacing="0" cellpadding="4" border="1" width="100%" bgColor="#ffffff" borderColor="#0000ff">
   <tr>
      <td align="center" bgcolor="#ffffff" height="250">
         <p>RESUME</p>
         <p><img src="/angel.gif" border="0" alt="angel" height="100px" width="100px" align="left" />
	   </p><p align="right">RESUME SCHOO RESUME RESUME RESUME RESUME RESUME RESUME RESUME RESUME RESUME RESUME 
         RESUME RESUME RESUME RESUME RESUME RESUME RESUME RESUME RESUME RESUME RESUME RESUME RESUME RESUME RESUME RESUME 
         RESUME RESUME RESUME RESUME......<b><a href="1.html" title="more">  MORE...</a>
         </p>
      </td>
   </tr>
   <tr>
      <td align="center" bgcolor="#ffffff" height="250">
         <p>HOBBY</p>
         <p><img src="/angel.gif" border="0" alt="angel" height="100px" width="100px" align="left" />
	   </p><p align="center">HOBBY HOBBY SCHOO HOBBY HOBBY HOBBY HOBBY HOBBY HOBBY HOBBY HOBBY HOBBY HOBBY 
         HOBBY HOBBY HOBBY HOBBY HOBBY HOBBY HOBBY HOBBY HOBBY HOBBY HOBBY HOBBY HOBBY HOBBY HOBBY HOBBY 
         HOBBY HOBBY HOBBY HOBBY HOBBY......<b><a href="1.html" title="more">  MORE...</a>
         </p>
      </td>
   </tr>
</table>
      </td>
   </tr>
</table>
      </td>
   </tr>
</table>
<table cellspacing="0" cellpadding="4" border="1" width="100%" bgColor="#ffffff" borderColor="#0000ff">
   <tr>
      <td align="center" bgcolor="#ffffff" width="170">
         <b><a href="1.html" title="home">home</a></b>
      </td>
      <td align="center" bgcolor="#ffffff" width="170">
         <b><a href="1.html" title="work">work</a></b>
      </td>
      <td align="center" bgcolor="#ffffff" width="170">
         <b><a href="1.html" title="resume">resume</a></b>
      </td>
      <td align="center" bgcolor="#ffffff" width="170">
         <b><a href="1.html" title="school">school</a></b>
      </td>
      <td align="center" bgcolor="#ffffff" width="170">
         <b><a href="1.html" title="hobby">hobby</a></b>
      </td>
   </tr>
</table>
      </td>
   </tr>
</table>
   </body>
</html>


Positioning with Cascade Style Sheets.
Using cascade style sheets is somewhat more complex but produces slightly better and more accurate results as far as the overall web page positioning is concerned. In the example below, I position independent tables to achieve same nested tables result:

<!doctype html
    PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta name="Positioning with css Prepared by Lester (leszek) lachcik." content="PERSONAL SITE">
<style type="text/css">

.table1 
    {
    position: absolute;
    top: 50px;
    left: 10px;
    height: 40px;
    width: 990px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    letter-spacing: 0.02em;
    line-height: 120%;
    text-align: center;
    padding: 1px;
    border-width: 1px;
    border-color: #0000ff;
    border-style: solid;
    background-color: #ffffff;
    overflow: hidder
    }

.table2 
    {
    position: absolute;
    top: 320px;
    left: 10px;
    height: 112px;
    width: 187px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 120%;
    background-color: #ffffff;
    overflow: hidden
    }

.table3 
    {
    position: absolute;
    top: 546px;
    left: 10px;
    height: 40px;
    width: 990px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 120%;
    text-align: center;
    padding: 1px;
    border-width: 1px;
    border-color: #0000ff;
    border-style: solid;
    background-color: #ffffff;
    overflow: hidden
    }

.table4 
    {
    position: absolute;
    top: 91px;
    left: 10px;
    height: 225px;
    width: 187px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 120%;
    background-color: #ffffff;
    border-color: #0000ff;
    overflow: hidden
    }

.table5 
    {
    position: absolute;
    top: 92px;
    left: 197px;
    height: 224px;
    width: 400px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 120%;
    background-color: #ffffff;
    border-color: #0000ff;
    overflow: hidden
    }

.table6 
    {
    position: absolute;
    top: 92px;
    left: 600px;
    height: 224px;
    width: 400px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 120%;
    background-color: #ffffff;
    border-color: #0000ff;
    overflow: hidden
    }

.table7 
    {
    position: absolute;
    top: 318px;
    left: 197px;
    height: 224px;
    width: 400px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 120%;
    background-color: #ffffff;
    border-color: #0000ff;
    overflow: hidden
    }

.table8 
    {
    position: absolute;
    top: 318px;
    left: 600px;
    height: 224px;
    width: 400px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 120%;
    background-color: #ffffff;
    border-color: #0000ff;
    overflow: hidden
    }

.table9 
    {
    position: absolute;
    top: 433px;
    left: 10px;
    height: 112px;
    width: 187px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 120%;
    background-color: #ffffff;
    border-color: #0000ff;
    overflow: hidden
    }

.table10 
    {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 40px;
    width: 990px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 120%;
    text-align: center;
    background-color: #ffffff;
    border-color: #0000ff;
    overflow: hidden
    }

body 
    {
    background-color: #ffffff
    }

</style> 

</head>

<body <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#ff0080" alink="#0080ff">

<div class="table1">
<table cellspacing="0" cellpadding="4" border="1" width="100%" height="100%" bgColor="#ffffff" borderColor="#0000ff" >
   <tr>
      <td>
         <b><a href="home.html" title="home">HOME</a></b>
      </td>
      <td>
         <b><a href="work.html" title="work">WORK</a></b>
      </td>
      <td>
         <b><a href="school.html" title="school">SCHOOL</a></b>
      </td>
      <td><b><a href="hobby.html" title="hobby">HOBBY</a></b>
      </td>
   </tr>
</table>
</div>

<div class="table2">
<table cellspacing="0" cellpadding="4" border="1" width="95%"  height="100%" bgColor="#ffffff" borderColor="#0000ff">
   <tr>
      <td align="center" bgcolor="#ffffff">
         <p><b>SPONSOR</b></p>
         <p><img src="/angel.gif" border="0" alt="angel" height="50px" width="50px" align="left" />
	   </p><p align="right"><b>sponsor, sponsor
</b>         <a href="1.html" title="more">  <b>MORE</b>...</a>
         </p>
      </td>
   </tr>
</table></div>

<div class="table3">
<table cellspacing="0" cellpadding="4" border="1" width="100%" height="100%" bgColor="#ffffff" borderColor="#0000ff" >
   <tr>
      <td>
         <b><a href="home.html" title="home">HOME</a></b>
        </td>
      <td>
         <b><a href="work.html" title="work">WORK</a></b>
        </td>
      <td><b><a href="school.html" title="school">SCHOOL</a></b>
        </td>
        <td><b><a href="hobby.html" title="hobby">HOBBY</a></b>
      </td>
   </tr>
</table>
</div>

<div class="table4">
<table cellspacing="0" cellpadding="4" border="1" width="95%"  height="100%" bgColor="#ffffff" borderColor="#0000ff">
   <tr>
      <td align="center" bgcolor="#ffffff">
         <b><a href="1.html" title="work">work</a></b>
      </td>
   </tr>
   <tr>
      <td align="center" bgcolor="#ffffff">
         <b><a href="1.html" title="resume">resume</a></b>
      </td>
   </tr>
   <tr>
      <td align="center" bgcolor="#ffffff">
         <b><a href="1.html" title="school">school</a></b>
      </td>
   </tr>
   <tr>
      <td align="center" bgcolor="#ffffff">
         <b><a href="1.html" title="hobby">hobby</a></b>
      </td>
   </tr>
</table></div>

<div class="table5">
<table cellspacing="0" cellpadding="4" border="1" width="100%"  height="100%" bgColor="#ffffff" borderColor="#0000ff">
   <tr>
      <td align="center" bgcolor="#ffffff">
         <p><b>WORK</b></p>
         <p><img src="/angel.gif" border="0" alt="angel" height="100px" width="100px" align="left" />
	   </p><p align="right"><b>work, work, work, work, work,             work, work, work, work, work, work, work, work, work, work, work, work, work, work, work, work, work, work, work, work,
</b>         <a href="1.html" title="more">  <b>MORE</b>...</a>
         </p>
      </td>
   </tr>
</table></div>

<div class="table6">
<table cellspacing="0" cellpadding="4" border="1" width="100%"  height="100%" bgColor="#ffffff" borderColor="#0000ff">
   <tr>
      <td align="center" bgcolor="#ffffff">
         <p><b>RESUME</b></p>
         <p><img src="/angel.gif" border="0" alt="angel" height="100px" width="100px" align="left" />
	   </p><p align="right"><b>resume, resume, resume, resume, resume, resume, resume, resume, resume, resume, resume, resume, resume, resume, resume, resume, resume, 
</b>         <a href="1.html" title="more">  <b>MORE</b>...</a>
         </p>
      </td>
   </tr>
</table></div>

<div class="table7">
<table cellspacing="0" cellpadding="4" border="1" width="100%"  height="100%" bgColor="#ffffff" borderColor="#0000ff">
   <tr>
      <td align="center" bgcolor="#ffffff">
         <p><b>SCHOOL</b></p>
         <p><img src="/angel.gif" border="0" alt="angel" height="100px" width="100px" align="left" />
	   </p><p align="right"><b>school, school, school, school, school, school, school, school, school, school, school, school, school, school, school, school, school,
</b>         <a href="1.html" title="more">  <b>MORE</b>...</a>
         </p>
      </td>
   </tr>
</table></div>

<div class="table8">
<table cellspacing="0" cellpadding="4" border="1" width="100%"  height="100%" bgColor="#ffffff" borderColor="#0000ff">
   <tr>
      <td align="center" bgcolor="#ffffff">
         <p><b>HOBBY</b></p>
         <p><img src="/angel.gif" border="0" alt="angel" height="100px" width="100px" align="left" />
	   </p><p align="right"><b>hobby, hobby, hobby, hobby, hobby, hobby, hobby, hobby, hobby, hobby, hobby, hobby, hobby, hobby, hobby, hobby, hobby, hobby, hobby, hobby, hobby,
</b>         <a href="1.html" title="more">  <b>MORE</b>...</a>
         </p>
      </td>
   </tr>
</table></div>

<div class="table9">
<table cellspacing="0" cellpadding="4" border="1" width="95%"  height="100%" bgColor="#ffffff" borderColor="#0000ff">
   <tr>
      <td align="center" bgcolor="#ffffff">
         <p><b>WEATHER</b></p>
         <p><img src="/angel.gif" border="0" alt="angel" height="50px" width="50px" align="left" />
	   </p><p align="right"><b>weather, weather
           <a href="1.html" title="more">  <b>MORE</b>...</a>
         </p>
      </td>
   </tr>
</table></div>

<div class="table10">
<table cellspacing="0" cellpadding="4" border="1" width="100%" height="100%" bgColor="#ffffff" borderColor="#0000ff" >
   <tr>
      <td align="center">
           <b><u><h3>HEADER - LOGO-"POSITIONING WITH CSS"</h3></u></b>
      </td>
   </tr>
</table>
</div>

</body>

</html>

If anyone likes to experiment with more please substitute your own links and images to make the appearance of these two web pages more stylish.

I've tested both examples in : InternetExplorer 6.0, Firefox 3.1.2, Mozilla 1.7.8, Opera 7.54, Netscape 7.2, Kameleon 09, Slimbrowser, and Lynx 2.8. They work well in all the above browsers.

Hope it helps. Cheers!

Lester (leszek) Lachcik

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 38 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Basic layout in css, with table in a div.

Hi Lester,

Welcome to the forum. I hate that I'm going to jump on your code when it's your first post. Please don't take offense.

Your code does lay out the page exactly as I'm sure you planned it. The trouble is that it shows a complete misunderstanding of the use of semantic, structured html + css. The use of absolute positioning to place items as if pasting them to a layout board is a carry-over from graphic design for print by way of html tables. The code does not mirror the structure of the document, nor is the markup semantic.

I have refactored the page. I didn't use a great plan, and I would argue with the designer for a more plastic design were this for production. It is more brittle than I care to make a page, due to fixed panel sizes. It should, however, demonstrate just how much more clean, semantic, and structured the code can be without tables and without trying to glue each piece individually onto the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content="
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=us-ascii" />

  <title>Lester's Personal Site</title>
<style type="text/css">
/*<![CDATA[*/

html, body {
    margin: 0;
    padding: 0;
    }

body {
    padding: 10px;
    color: black;
    background-color: white;
    font: 83%/1.2 Tahoma, sans-serif;
    }

p {
    font-size: 1em;
    }

h1, h2, h3 {
    font-size: 1.2em;
    text-transform: uppercase;
    text-align: center;
    }

h1 {
    border: 1px solid black;
    line-height: 2.5;
    margin: 0;
    }

img {
    float: left;
    }

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid black;
    }

li {
    width: 25%;
    float: left;
    text-align: center;
    border-left: 1px solid black;
    margin-left: -1px;
    }

li a {
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 2;
    }

a:hover {
    background-color: #ddd;
    }

#wrapper {
    position: relative;
    width: 990px;
    margin: 0 auto;
    border: 5px double black;
    }

#sidebar {
    width: 180px;
    float: left;
    margin-right: 10px;
    }

#sidebar ul {
    margin: 15px 0;
    }

#sidebar li {
    width: auto;
    float: none;
    }

#sidebar a {
    line-height: 4;
    border-bottom: 1px solid black;
    }

#content {
    overflow: auto;
    }

.sidebox {
    overflow: auto;
    margin: 15px 0;
    border: 1px solid black;
    }

.lbox, .rbox {
    width: 395px;
    height: 225px;
    border: 1px solid black;
    margin-bottom: 10px;
    }

.lbox {
    float: left;
    }

.rbox {
    float: right;
    }

/* \*/
* html a {
    zoom: 1;
    }
/* */

/*** see http://www.positioniseverything.net/easyclearing.html
   for explanation of Tony Aslett's elegant hack ***/

.clearing:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }

.clearing {
    display: inline-block;
    }

/* Hides from IE-mac \*/
* html .clearing {
    height: 1%;
    }
.clearing {
    display: block;
    }
/* End hide from IE-mac */
/*** end clearing hack ***/

/*]]>*/

</style>
</head>

<body>
  <div id="wrapper">
    <h1>Header &mdash; logo-&ldquo;Positioning With CSS&rdquo;</h1>

    <ul class="clearing">
      <li><a href="#">Home</a></li>

      <li><a href="#">Work</a></li>

      <li><a href="#">School</a></li>

      <li><a href="#">Hobby</a></li>
    </ul>

    <div id="sidebar">

      <ul>
        <li><a href="#">Home</a></li>

        <li><a href="#">Work</a></li>

        <li><a href="#">School</a></li>

        <li><a href="#">Hobby</a></li>

      </ul>

      <div class="sidebox">
        <h3>Sponsor</h3><img src="../bullseye.jpg"
             alt=""
             width="50"
             height="50" />

        <p>Sponsor, sponsor, sponsor.</p>
      </div><!-- end sidebox -->

      <div class="sidebox">

        <h3>Weather</h3><img src="../bullseye.jpg"
             alt=""
             width="50"
             height="50" />

        <p>Weather, weather, weather.</p>
      </div><!-- end sidebox -->
    </div><!-- end sidebar -->

    <div id="content">
      <div class="lbox">
        <h2>Work</h2><img src="../bullseye.jpg"
             alt=""
             width="100"
             height="100" />

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
        aliquam erat volutpat. Ut wisi enim ad <a href="#">More</a></p>
      </div>

      <div class="rbox">
        <h2>Resume</h2><img src="../bullseye.jpg"
             alt=""
             width="100"
             height="100" />

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
        aliquam erat volutpat. Ut wisi enim ad <a href="#">More</a></p>

      </div>

      <div class="lbox">
        <h2>School</h2><img src="../bullseye.jpg"
             alt=""
             width="100"
             height="100" />

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
        aliquam erat volutpat. Ut wisi enim ad <a href="#">More</a></p>
      </div>

      <div class="rbox">

        <h2>Hobby</h2><img src="../bullseye.jpg"
             alt=""
             width="100"
             height="100" />

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
        aliquam erat volutpat. Ut wisi enim ad <a href="#">More</a></p>
      </div>
    </div><!-- end content -->
    <ul class="clearing" style="clear: both;">
      <li><a href="#">Home</a></li>

      <li><a href="#">Work</a></li>

      <li><a href="#">School</a></li>

      <li><a href="#">Hobby</a></li>
    </ul>

  </div><!-- end wrapper -->

</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

edacsac
Offline
Regular
Last seen: 14 years 20 weeks ago
Joined: 2005-05-24
Posts: 12
Points: 0

Help Chris!

If your still watching this thread...

I have everything just about working with what you've given me, except one problem. In IE, between the left div, and the content div there is a space about a couple of pixels wide. FF is fine, but I can't get rid of it in IE. If I change the #content and #content table to classes, .content and .content table, the space goes away, but the expansion problem comes back with the table. That was my problem before, using classes when your example called for id's.

I've removed and replaced everything piece by piece, but nothing changes it. I've adjusted the margin for #content, since that seemed like the obvious choice, changed all kinds of other things, but still nothing. If I remove your holly hack, the space goes away, but then everything is bottom justified in the content div. I'm going nuts, css sucks.

I've also had to go back to the loose.dtd because strict completely explodeds in IE. Over 12 hours into this simple layout, all because of this little space. With tables, I would have been done in an hour. Grrrr.....

I've attached the html & css. There might be some other stupid things in here, since I'm frustrated and was furiously trying different things.

It looks correct in FF.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Basic layout in css, with table in a div.

Its the infamous IE 3 pixel jog. I don't know of any fix that gets rid of it. You can usually use some imaginative positioning to hide it. In your case that looks pretty difficult as your design needs the bar to look solid across the full width of the browser window.

The easiest solution maybe to drop an absolutely positioned filler to cover up the 3pixels to the right of the table's top left corner. Perhaps someone else can come up with a better solution.

edacsac
Offline
Regular
Last seen: 14 years 20 weeks ago
Joined: 2005-05-24
Posts: 12
Points: 0

Basic layout in css, with table in a div.

So why is CSS better than tables for positioning? At least with tables, I won't run into a brick wall I can't get around.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Basic layout in css, with table in a div.

Its not so much that they are better for positioning.

They get back to what html is intended for, content. A table as a way of presenting tabular data not a layout tool. Once you move away from a screen based web browser you run will find it far more difficult to adapt a table based layout than a CSS based layout. Think, screen readers or mobile phones.

They generally have a much lower page weight. Bandwidth is something you pay for. Less kbs means cheaper site.

They are generally easier to modify and redesign. The content is already largely separated from the presentation. See CSSZenGarden for the variation in designs possible from a single unchanging page of html.

A CSS Div based layout is much more easily scaled than a table based layout. A div is a more more simple unit than a table cell.

What IE is doing is a bug. Like anything once you know the strengths and weaknesses you can design around them and the whole thing will become much more straightforward. Similarly, trying to force a round peg into a square hole can lead to endless hours of frustration.

edacsac
Offline
Regular
Last seen: 14 years 20 weeks ago
Joined: 2005-05-24
Posts: 12
Points: 0

Basic layout in css, with table in a div.

Ok, I was able to fix this with a negative margin for the left float, but in Opera, the whole holly hack deal doesn't really work. Any ideas?

Also, I'm stuck using loose.dtd, and would like to have xhtml strict, but I can't get anything to work there either. Atached is what I have fixed so far. Please tell me what I need to do for Opera!!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Basic layout in css, with table in a div.

Yes, hmm, Opera. It doesn't like the width:100% on the table. Make the width 99.99% and it seems to be happy. It could be some obscure pixel rounding issue.

I missed the margin on #content before, it screwed up my attempts to sort things in IE.

There are two IE solutions:

(1)
#innerWrapLeft {
margin-right:-3px;
}

#content {
margin-left:169px;
}

(2)
#content {
float:right;
margin-left:0;
}

All of the above styles should be targetted at IE/Win only. For (2) the holly hack line (* html #content {height:1px;}) does not seem to be necessary, although it doesn't appear to cause a problem if it is present.

so the changes required for a full solution ...

#content table{ 
    width: 99.99%;  /* keep Opera happy */
}

/* hide these two from IE5/Mac \*/
* html #innerWrapLeft {
    margin-right: -3px;
}

* html #content { 
    margin-left:169px;
    height: 1px; 		/* holly hack to force IE into hasLayout mode  \*/
}   
/* end IE5/Mac hiding */

To see them at work, click here. It even works on IE/Mac browsers Smile. The screeny will disappear soon, but you can make your own at http://www.fundisom.com/g5/

edacsac
Offline
Regular
Last seen: 14 years 20 weeks ago
Joined: 2005-05-24
Posts: 12
Points: 0

Thanks Chris!

Absolute craziness I say!

Thanks for your help Chris! You must have alot time put into style sheets. I appreciate the help very much. I've definatly learned alot working through this problem with your help.