The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

thanks for reply tables are other way to solve the problem. And IE am not really Bothered by making things perfect in IE as long its accepteable diffrensis
i dont mind it sack by the way (i hope i did not offend B G )
but its not what am looking at. i started web design with out learning tables
even though i have tryed tables with PHP it serves its porpues However,

am not planning to use it, i want to stick with pure xHTML 1.0 Strict and CSS 2 at the time been thanks though for the help, apriciated.

so i guess there is no solutions but hack (which i will not use).

thanks everybody

and if someone fine a solution one day her is the Code
and any commend regarding this code Please Feel very to improve
or critisise

<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="main9.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#container {
width: 744px;
border:1px solid #999999;
margin-top:0;
margin-left: auto;
margin-right: auto;
padding: 0 10px 0 10px;
background:red;
}
#header {
padding: 0 5px 14px 5px;
margin-bottom: 18px;
background:#FFcccc url(images/main9/header.jpg) center top no-repeat;
border-bottom:1px solid #999999 ;
}
#content {
padding: 0;
margin-left:220px ;
width:524px;
background-color: #FFFFcc;
border-left:1px #999999 solid;
position:relative;
}
#leftbar{
float: left;
width: 208px;
margin-left:-207px;
padding: 0;
margin-bottom:1px;
position:relative;
left:-1px;
}
#footer {
clear: both;
padding: 8px;
margin-top: 10px;
background:#FFFccc url(images/main9/bottom.jpg) top no-repeat;
}
.clearer{height:1px;overflow:hidden;clear:both}
</style>
</head>
<body>
<div id="container">
<div id="header">&nbsp;</div>
<!-- Left Bar -->
<div id="content">
<div id="leftbar">
<p>This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : </p>
</div>
<p>This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : </p>
<div class="clearer"></div>
</div>
<!-- Content -->
<div id="footer"> </div>
<!-- Footer -->
</div>
<!-- Container -->
</body>
</html>

However you should know that floats in ie suffer from the 3 pixel jog and there is no way to cure it unless you address some code to ie only.

Regarding hacks you have to define what hacks are (devils advocate mode).

Every time you use a width or height you are in fact using a hack in ie because a width will force "layout" in ie and make it start working correctly. There are a number of other properties that will force "layout" so every time you use them you are using a hack. Position:relative often fixes layout issues and could also be called a hack.

Using any code when it is not really needed is in fact a hack and by that criteria 99.9% of sitse would be classed as using hacks.

If you use conditional comments for ie (another hack perhaps) you can provide valid code to ie without using the star selector hack etc (which is valid code but a hack none-the-less).

<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="main9.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#container {
width: 744px;
border:1px solid #999999;
margin-top:0;
margin-left: auto;
margin-right: auto;
padding: 0 10px 0 10px;
background:red;
}
#header {
padding: 0 5px 14px 5px;
margin-bottom: 18px;
background:#FFcccc url(images/main9/header.jpg) center top no-repeat;
border-bottom:1px solid #999999 ;
}
#content {
padding: 0;
margin-left:220px ;
width:524px;
background-color: #FFFFcc;
border-left:1px #999999 solid;
position:relative;
}
#leftbar{
float: left;
width: 208px;
margin-left:-207px;
padding: 0;
margin-bottom:1px;
position:relative;
left:-1px;
}
#footer {
clear: both;
padding: 8px;
margin-top: 10px;
background:#FFFccc url(images/main9/bottom.jpg) top no-repeat;
}
.clearer{height:1px;overflow:hidden;clear:both}
</style>
</head>
<body>
<div id="container">
<div id="header">&nbsp;</div>
<!-- Left Bar -->
<div id="content">
<div id="leftbar">
<p>This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : This is the left content : </p>
</div>
<p>This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : </p>
<div class="clearer"></div>
</div>
<!-- Content -->
<div id="footer"> </div>
<!-- Footer -->
</div>
<!-- Container -->
</body>
</html>

However you should know that floats in ie suffer from the 3 pixel jog and there is no way to cure it unless you address some code to ie only.

Regarding hacks you have to define what hacks are (devils advocate mode).

Every time you use a width or height you are in fact using a hack in ie because a width will force "layout" in ie and make it start working correctly. There are a number of other properties that will force "layout" so every time you use them you are using a hack. Position:relative often fixes layout issues and could also be called a hack.

Using any code when it is not really needed is in fact a hack and by that criteria 99.9% of sitse would be classed as using hacks.

If you use conditional comments for ie (another hack perhaps) you can provide valid code to ie without using the star selector hack etc (which is valid code but a hack none-the-less).

The issue are never as clear as you think

Paul O'B i love your style and skills.

regarding the code its very clean and straight forward but it did not work

Paul's Demo is a Negative margin Model, the right border is working? , and the left right columns give the impression of equal height?

If you mean in the strict sense of the word equal height, that is only going to work if you use a set height on a wrapper and then make use of the 100% height of the columns

Your model is a wrapper with one float in it, by using a left margin the right column is created; in IE there are a few problems, haslayout and the 3-pixel jog

The header has no height, in IE its to high because of standard height + padding, + haslayout problem

Footer has no height, for IE a haslayout problem, for FF < 1.5 NS Moz OP the floats are not cleared

Itís a fixed width, so why use 28% for left column?

Margins on first container after floats, the margin collapse in FF NS Moz OP, set margins on the floats

You have 100% high in the left column? 100% of? , maybe that is working in IE , but not in FF, etc

I changed it in left right float model, with a left right border that overlaps so the left right extend, also only giving the impression of divís that have equal high

Its also not clear to me why you insist of not to have hacks , they are used to give specific CSS to the browsers
Meaning 99% separating/correction of IE 6 behavior, and solve box model problems in IE 5 5.5

Only the first one is a hack because it uses a method to parse styles to ie6 with the star selector hack (* html) and then forces "layout" with the height:1% property (see faq on "haslayout"). It however is 100% valid code but is termed a hack because it does something that it shouldn't in <=IE6. (see faz on the broken box model for a longer explanation.)

The second one * {margin:0;padding:0} is not a hack at all and you are getting it confused with the first one. The universal selector (*) is a selector that matches any other selector and is perfectly valid and extremely useful part of the css specs. It is like a wild card and matches any (or all) elements that would be in the position that it is placed.

When you say * {margin:0;padding:0} you are saying that all elements are to have no padding and margins at all. These is very useful because it saves you having to explicitly set them for every element you use and makes all browsers start on equal footing.

Only the first one is a hack because it uses a method to parse styles to ie6 with the star selector hack (* html) and then forces "layout" with the height:1% property (see faq on "haslayout"). It however is 100% valid code but is termed a hack because it does something that it shouldn't in <=IE6. (see faz on the broken box model for a longer explanation.)

The second one * {margin:0;padding:0} is not a hack at all and you are getting it confused with the first one. The universal selector (*) is a selector that matches any other selector and is perfectly valid and extremely useful part of the css specs. It is like a wild card and matches any (or all) elements that would be in the position that it is placed.

When you say * {margin:0;padding:0} you are saying that all elements are to have no padding and margins at all. These is very useful because it saves you having to explicitly set them for every element you use and makes all browsers start on equal footing.