Replacing Tables with CSS

you are having problems in browsers other than IE because of IE's incorrect use of the box model. According to standards, a specification of width does not include margins, padding or borders. In IE, width is inclusive.

Therefore,

Your specifications of width: 50% in standards compliant browsers means that the border and padding is added on, making the total > 100% for .plocation & .date combined.

To resolve it, you can either use the ugly Box Model Hack or create a nested <DIV> inside .plocation and .date that specifies the width. The border and padding rules will now apply to the parent, and therefore width will work consistently in all browsers. You may have to experiment with widths less than 50% in order to get both to co-exist side by side instead of wrapping.

Of the two options, I prefer the second because it is valid code without the need for hacks, and makes the code more durable than using a hack to satisfy current browser issues.

Regards,
Andy

Hi,

The reason for one of the differences is that you are using the xml prologue which throws IE into quirks mode, wherea mozilla is working in standards mode.

In quirks mode IE used the broken box model whcih assumes that 100% is 100% no matter what size padding and borders are added. However the correct interpretation of the standards is that padding and borders are added to the total width. When you specify 50% + 50% and then add padding this makes the container larger than its total width for Mozilla and causes the problems you are finding.

Therefore you can either use the box model hack or more easier remember never to set padding and borders at the same time as setting width (& height ( but height is never usually critical and doesn't affect layout so much)). Set the padding and borders on an inner element and let the inner elements width expand automatically (e.g. don't set a width). (Or as an alternative put the padding on the outer element and a width on the inner (when the outer is 100% by default).

I would therefore drop the xml prologue (the first line of your page) so that IE works in standars mode and gives you an even playing field, then adjust your code as follows.

.plocationwrapper {
	padding: 3px 10px 3px 10px;
	background-color: #FFC;
	border-bottom: double 3px #FC0;
}

.plocation {
	width: 49.9%;
	float: left;
}
.date {
	float: right;
	width:50%;
	text-align: right;
}

html:

    <td class="content">
		<div class="plocationwrapper">
		<div class="plocation">Location: Home</div>
      	<div class="date">Date</div>
      <div style="clear:both"></div>
	  </div>
	  <p>&nbsp;</p>
      <p>&nbsp;</p></td>

The clear:both is for mozilla so that it allows room to hold your text otherwise it collapses the space.

I have also set one float to 49.9% because IE has a rounding bug and will round 2 * 50% up to be more than 100% thus causing the float to drop down a line on every alternate pixel as the browser is resized.

The above isn't meant to be a definitive solution as I did not know what you had planned afterwards. However it should show you how to achieve your desired effect.

Paul

Darn

The box model sounds pretty stupid (as in, not common sense). How would you get over percentage values without a hack? I mean 20px + 40% + 40% + 20px will not always equal the same value. Luckily in my case I can use fixed pixel values.

I understand how the width and height works in the box model now. I have heard of it before, but never worked with widths before with it. Thanks guys.

I got it to work with a width of 292px, which is the width of the white content area (624 px) minus the total padding (10 * 4 = 40) then divided by two for each side. Very simple to do with a diagram on paper.

Have fun!

.plocation, .date {
	background-color: #FFC;
	border-bottom: double 3px #FC0;
	padding: 3px 10px 3px 10px;
	width: 292px;
}

If you want a fixed width layout, this is fine. This means though, that people with higher resolutions will have screen real estate that is blank, and those with a smaller resolution might have to scroll horizontally. The advantage of using % widths is that the content will reflow to fill the availabe screen real estate. Ultimately it is a design decision - go with what works for you.

Andy.

Yeah, I understand all that mumbo jumbo and for my purposes of not having a huge line of unreadable text, I prefer having ultimate control (by ultimate control I mean that it cannot be changed by the user when the window is resized) over my content and have centered it so that the white space is less noticable. And I never get visitors using 600 by 640 monitors.

Off course it's a matter of what works best for you (both have their advantages and disvantages) just as you said.

Fixed, pixel sized layouts can look nasty when the user increases the font sizes though- the CSS max-width attribute (which, helpfully, isn't yet implemented in Internet Explorer ) would be a better way to prevent a single line of unreadable text (and most users who run at such high resolutions will size their browsers to avoid this anyway).

I say would, because as with so much other useful CSS in the specification, IE's lack of support for it is often the limiting factor which holds people back from using it.

Edit: Whoops, deleted half my post when creating it and put "CSS property attribute" where I meant to write "CSS max-width attribute" when retyping

What is this "property" attribute that you speak so happily of? But maybe it's a story for another thread.

Whoops, maximum typo-age

See above

Oh ok... lol. Too bad it doesn't work in MSIE. :roll: Using colums is a good alternative I learnt from somewhere.

Don't you HATE it when you delete your message by accident? Then you know that you have to type it out all over again and usually don't bother.