9 replies [Last post]
Damien
Offline
Regular
Adelaide, South Australia
Last seen: 16 years 2 weeks ago
Adelaide, South Australia
Joined: 2003-09-05
Posts: 16
Points: 0

Hi I am currently redesigning my website with CSS so I decided to try to do this whole "replace tables with divs" thing.

My problem is that I am trying to float one div to the left and another oposite it on the right. I know I am doing something wrong but I don't know what.

The example below works fine in MSIE/6.0 but I cannot get it to work in NSN/7.1 or Opera/7.11:

.plocation, .date {
	background-color: #FFC;
	border-bottom: double 3px #FC0;
	padding: 3px 10px 3px 10px;
	width: 50%;
}
.plocation {
	float: left;
}
.date {
	float: right;
	text-align: right;
}

<div class="plocation">Location: Home</div><div class="date">Date</div>
<p>&nbsp;</p>
<p>&nbsp;</p>

Any help would be greatly appreciated. It works fine in MSIE/6.0, so if you wan't to get an idea of what I am talking about you can check my website here in Internet Explorer:
http://www.palominoweb.com

Tygger2512
Offline
newbie
Parsons, KS
Last seen: 16 years 2 weeks ago
Parsons, KS
Timezone: GMT-5
Joined: 2003-09-05
Posts: 2
Points: 0

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,

Quote:

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


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

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 15 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Replacing Tables with CSS

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

Damien
Offline
Regular
Adelaide, South Australia
Last seen: 16 years 2 weeks ago
Adelaide, South Australia
Joined: 2003-09-05
Posts: 16
Points: 0

Solved

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;
}

Tygger2512
Offline
newbie
Parsons, KS
Last seen: 16 years 2 weeks ago
Parsons, KS
Timezone: GMT-5
Joined: 2003-09-05
Posts: 2
Points: 0

Replacing Tables with CSS

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.

Damien
Offline
Regular
Adelaide, South Australia
Last seen: 16 years 2 weeks ago
Adelaide, South Australia
Joined: 2003-09-05
Posts: 16
Points: 0

Replacing Tables with CSS

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. Laughing out loud

insin
insin's picture
Offline
Enthusiast
Belfast, NI
Last seen: 16 years 19 weeks ago
Belfast, NI
Joined: 2003-05-07
Posts: 57
Points: 0

Replacing Tables with CSS

Damien wrote:
I understand all that mumbo jumbo and for my purposes of not having a huge line of unreadable text, I prefer having ultimate control.

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 Sad ) 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 Wink

A Pedant Writes...
Into the mountain,
I will fall.

Damien
Offline
Regular
Adelaide, South Australia
Last seen: 16 years 2 weeks ago
Adelaide, South Australia
Joined: 2003-09-05
Posts: 16
Points: 0

Replacing Tables with CSS

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

insin
insin's picture
Offline
Enthusiast
Belfast, NI
Last seen: 16 years 19 weeks ago
Belfast, NI
Joined: 2003-05-07
Posts: 57
Points: 0

Replacing Tables with CSS

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

Whoops, maximum typo-age Wink

See above Laughing out loud

A Pedant Writes...
Into the mountain,
I will fall.

Damien
Offline
Regular
Adelaide, South Australia
Last seen: 16 years 2 weeks ago
Adelaide, South Australia
Joined: 2003-09-05
Posts: 16
Points: 0

Replacing Tables with CSS

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.