By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,337 Members | 2,234 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,337 IT Pros & Developers. It's quick & easy.

css positioning problem

P: n/a
Hi All,

Working at developing my css skills. I have a page here,

<http://ocgweb.marine.usf.edu/~patrick/indexnew.html>

It validates for html and css but I am having two problems that perhaps
someone can straighten out for me.

First problem, in Mozilla my farthest right column (my pic is there)
wants to drop down below the right hand edge of the middle column. It
doesn't do this in IE.

Second problem, I have height set for 5px in botban and it displays just
fine in Mozilla, but in IE it looks to be displaying at 20px.

I would appreciate anyones response as to how to fix this, and thanks
for taking the time to look at this.

Thanks,
Patrick

--
Patrick A. Smith Assistant System Administrator
Ocean Circulation Group USF - College of Marine Science
http://ocgweb.marine.usf.edu Phone: 727 553-3334

The trouble with doing something right the first time is that nobody
appreciates how difficult it was. - La Rochefoucauld
Oct 11 '06 #1
Share this Question
Share on Google+
6 Replies


P: n/a
On 2006-10-11, Patrick <ps****@marine.usf.eduwrote:
Hi All,

Working at developing my css skills. I have a page here,

<http://ocgweb.marine.usf.edu/~patrick/indexnew.html>

It validates for html and css but I am having two problems that perhaps
someone can straighten out for me.

First problem, in Mozilla my farthest right column (my pic is there)
wants to drop down below the right hand edge of the middle column. It
doesn't do this in IE.
leftbod is width: 20%, midbod is width: 60% and rightbod is width: 20%.
This adds up to 100%, but the width property sets the horizontal
distance between the left and right _inside padding edges_. Since you've
got left/right padding on some of those floats too, they take up their
percentages plus the padding, with the result that there's not enough
room at the side for rightbod, so it jumps below.

This is all correct behaviour.

The best fix is probably another level of nesting, making sure the
floats with percentage widths set on them don't themselves have any
borders, padding or margins.

<div class="leftbod" style="width: 20%; float: left">
<div style="padding-left 3px">
Actual leftbod content...
</div>
</div>

etc.

Then you can still work in percentages that add up to 100%.
Second problem, I have height set for 5px in botban and it displays just
fine in Mozilla, but in IE it looks to be displaying at 20px.
Looks like another IE bug. I don't know any workaround.
Oct 11 '06 #2

P: n/a
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2006-10-11, Patrick <ps****@marine.usf.eduwrote:
Hi All,

Working at developing my css skills. I have a page here,

<http://ocgweb.marine.usf.edu/~patrick/indexnew.html>

It validates for html and css but I am having two problems that perhaps
someone can straighten out for me.

First problem, in Mozilla my farthest right column (my pic is there)
wants to drop down below the right hand edge of the middle column. It
doesn't do this in IE.

leftbod is width: 20%, midbod is width: 60% and rightbod is width: 20%.
This adds up to 100%, but the width property sets the horizontal
distance between the left and right _inside padding edges_. Since you've
got left/right padding on some of those floats too, they take up their
percentages plus the padding, with the result that there's not enough
room at the side for rightbod, so it jumps below.

This is all correct behaviour.

The best fix is probably another level of nesting, making sure the
floats with percentage widths set on them don't themselves have any
borders, padding or margins.
Wouldn't it be easier to leave out the midbod width: 60%, and simply
let it take up whatever remains after the leftbod and rightbod are
determined?
<div class="leftbod" style="width: 20%; float: left">
<div style="padding-left 3px">
Actual leftbod content...
</div>
</div>
Oct 11 '06 #3

P: n/a
Ben C wrote:
On 2006-10-11, Patrick <ps****@marine.usf.eduwrote:
>>Hi All,

Working at developing my css skills. I have a page here,

<http://ocgweb.marine.usf.edu/~patrick/indexnew.html>

It validates for html and css but I am having two problems that perhaps
someone can straighten out for me.

First problem, in Mozilla my farthest right column (my pic is there)
wants to drop down below the right hand edge of the middle column. It
doesn't do this in IE.


leftbod is width: 20%, midbod is width: 60% and rightbod is width: 20%.
This adds up to 100%, but the width property sets the horizontal
distance between the left and right _inside padding edges_. Since you've
got left/right padding on some of those floats too, they take up their
percentages plus the padding, with the result that there's not enough
room at the side for rightbod, so it jumps below.

This is all correct behaviour.

The best fix is probably another level of nesting, making sure the
floats with percentage widths set on them don't themselves have any
borders, padding or margins.

<div class="leftbod" style="width: 20%; float: left">
<div style="padding-left 3px">
Actual leftbod content...
</div>
</div>

etc.

Then you can still work in percentages that add up to 100%.

>>Second problem, I have height set for 5px in botban and it displays just
fine in Mozilla, but in IE it looks to be displaying at 20px.


Looks like another IE bug. I don't know any workaround.
Thanks Ben, I will give this a go. anyone else out there have any ideas
onproblem number two?

Patrick

--
Patrick A. Smith Assistant System Administrator
Ocean Circulation Group USF - College of Marine Science
http://ocgweb.marine.usf.edu Phone: 727 553-3334

The trouble with doing something right the first time is that nobody
appreciates how difficult it was. - La Rochefoucauld

Oct 11 '06 #4

P: n/a
Patrick <ps****@marine.usf.eduwrites:

Second problem, I have height set for 5px in botban and it
displays just fine in Mozilla, but in IE it looks to be
displaying at 20px.
You've got a quirks mode doctype, which pretty much
maximises differences in behaviour.

--
Jón Fairbairn Jo***********@cl.cam.ac.uk
Oct 11 '06 #5

P: n/a
On 2006-10-11, David Stone <no******@domain.invalidwrote:
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
[snip]
>The best fix is probably another level of nesting, making sure the
floats with percentage widths set on them don't themselves have any
borders, padding or margins.

Wouldn't it be easier to leave out the midbod width: 60%, and simply
let it take up whatever remains after the leftbod and rightbod are
determined?
IIRC all three 'bod's were floats. If midbod has an auto width, it'll
quite likely (it depends on the content) help itself to more than 60%
and then rightbod will jump down.

If these were table columns, that approach would work nicely though.

><div class="leftbod" style="width: 20%; float: left">
<div style="padding-left 3px">
Actual leftbod content...
</div>
</div>
Oct 11 '06 #6

P: n/a
Patrick wrote:
Hi All,

<http://ocgweb.marine.usf.edu/~patrick/indexnew.html>

It validates for html and css but I am having two problems

I would appreciate anyones response as to how to fix this
I suggest to perform the changes in steps as noted and check the result
step-by-step in order to understand what's going on:

1.
Change DTD to "Strict": <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2.
add: html,body,#wrapper,#leftbod {height:100%;}
remove references to height:100% and position:relative in: #leftbod
#midbod and #rightbod
3.
Remove float:left and width:60%; from div#midbod.
4.
Remove clear:left; from #rightbod.
5.
In the HTML move "rightbod" immediately after "leftbod" and before "midbod".

The concepts and main ideas are to leave everything as Static since
Relative is not necessary, that #leftbod is floated left, #rightbod is
floated right and #midbod is not floated at all - all in that order.
#midbod is allowed to "flow" between the two floats - neither is there a
clearing applied.

The addition in step 2. applies the background to the full extent of the
viewport.

All new pages should be using Strict Doctype.

--
Gus
Oct 11 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.