css template-2 col fixed width float

[mimbee]

Link: http://www.mimbee.net/test/Generic/generic2.dwt

I have based this template on the css template-"2 col fixed width float" from the Sitepoint CSS Anthlology By Rachel Andrew. It looks as it should in the design view in Dreamweaver MX2004, but as you see, when published the right column which should float right, displays under the left column instead.
Can any one help please?

[pubsinbgk]

Link: http://www.mimbee.net/test/Generic/generic2.dwt

I have based this template on the css template-"2 col fixed width float" from the Sitepoint CSS Anthlology By Rachel Andrew. It looks as it should in the design view in Dreamweaver MX2004, but as you see, when published the right column which should float right, displays under the left column instead.
Can any one help please?

Hi,

In Dreamweaver it floats to the left as i do not have the CSS file, but with the link you have specified above it shows to the right. I use IE 6.0.

Pubsinbgk

[Paul O'B]

Hi,

Unless I've added up incorrectly then you seem to be a pixel out anyway. the width of the container is 728px mins 4px for borders = 724px. The content is 515 +10px =525 and the right is 200px. Therefore 515 + 10 + 200 = 725px which is 1 px too large.

the other problem is ie's layout bug and can be fixed with the height:1% hack as follows.

#content {
 width: 514px;
 float: left;
 padding: 5px 10px 0 0;
}
#textArea {
 background-color: #ffffff;
 width:500px;
 padding-right:4px;
}
 
/* mac hide \*/
* html #nav, * html #googleTower{height:1%}
/* end hide */

Hope that helps.

[mimbee]

Thanks Paul - it worked! I can understand the first bit - I forgot to add the 4px for the borders. However the second bit, the height:1% hack has got me. Can you explain how it works and why it is needed please?

[Paul O'B]

Hi,

The height:1% hack is needed to force ie into "layout" mode. This is an internal part of IE that msn seems to have implemented without really telling anyone.

http://msdn.microsoft.com/workshop/a...tion.asp#intro
http://msdn.microsoft.com/workshop/a.../haslayout.asp

Elements without dimensions don't produce layout and as a consequence behave differently than they should. Suffice to say that elements without layout don't really know what their dimensions are and leads to all sorts of guillotine and peek-a-boo bugs.

There are number or properties that will force layout as you can see from the links above but the safest is to use the height:1% hack because ie treats height as a minimum and will always expand to accept the content (if overflow hasn't been set of course).

You only need to use the hack if you notice that the element isn't behaving properly and other browers are displaying it properly. You can almost be sure to require it when setting an elements dimensions by using margins alone as this confuses ie completely.

Hopefully this will be fixed in ie7 but we will have to wait and see