Re: [css-d] Content being pushed down

[Tom McNeer]

Hi Els,

Thanks for a very complete explanation. Let me apologize for not getting
back to you before now. It's been a day for meetings, not development.

As you've been able to see, my understanding of the box model is pretty
shaky at this point. I have not yet had time to seriously go through your
explanation and the code itself, but obviously it does what I'm looking for.
I'll use your information for education. It'll certainly help me understand
the model better.

Thanks for your patience and generosity.


--
Thanks,

Tom

Tom McNeer
MediumCool
http://www.mediumcool.com
530 Means St NW, Suite 110
Atlanta, GA 30318
404.589.0560
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Content being pushed down

[Els]

Tom McNeer wrote:
> Hi Els,
>
> Thank you for your very complete explanation. Aside from the 
> syntax
> errors, and the fact that I should have stated that I hadn't
> attempted to make any adjustments for IE yet, perhaps it would 
> be
> clearer if (as you suggest), I explain my intent.
>
> Actually, the page as it is displayed (which isn't the entire 
> page,
> just a partial) looks just the way I want it to (in Firefox), 
> except
> for the fact that the content in the right-hand column is being
> pushed down.
>
> So perhaps you can help me understand how to achieve that 
> effect in a
> proper manner.

Here's my version:
http://here.locusmeus.com/temp/tom.html
No adjustments needed for IE.

I commented the rules that may need explanation.

Some things you will notice:

I changed the doctype to Strict, which will throw IE in standards 
mode. Personally, I find that much easier to work with than 
quirksmode, since I never got round to study IE's quirks ;-)

I haven't set any height.
The 100% height you had for #wrapper, didn't do anything, as this 
states 100% height of the parent. But the parent is body, which 
didn't have a height either.
So, if I would give body and html a 100% height, then 100% on the 
wrapper would make it as high as your window. But you want it 
123px from the top, so it will also extend 123px below the bottom 
of the window. Doubt you want that :-)

So, the way it works now, is that the more content you write in 
either leftCol or rightCol, the higher #wrapper becomes. This is 
actually the preferred way of building webpages (imo of course). 
If you set a fixed height, all sorts of bad looking stuff happens 
when people enlarge the font. Either boxes need scrolling (ugly 
and very uncomfortable if the box is higher than one's window), 
or things start overlapping or being cut off. Not good either :-)

-- 
Els
http://locusmeus.com/
http://locusoptimus.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Content being pushed down

[Tom McNeer]

Hi Els,

Thank you for your very complete explanation. Aside from the syntax errors,
and the fact that I should have stated that I hadn't attempted to make any
adjustments for IE yet, perhaps it would be clearer if (as you suggest), I
explain my intent.

Actually, the page as it is displayed (which isn't the entire page, just a
partial) looks just the way I want it to (in Firefox), except for the fact
that the content in the right-hand column is being pushed down.

So perhaps you can help me understand how to achieve that effect in a proper
manner.

Also --

On 3/1/06, Els <[EMAIL PROTECTED]> wrote:
>
> The combination of your styles,
> makes the right column sit vertically below the left column, and
> horizontally 580px to the right of the middle.


I understand what you're saying about the horizontal position, but  -- the
right column isn't really sitting vertically below the left column (at least
not in Firefox). Only its content is. The top of the div is precisely where
I'd like it to be, as indicated by the tiled brown background. But the
content within is being pushed downward as content is added to the left
column. That's the part that mystifies me.

Thanks in advance for your help.



--
Thanks,

Tom

Tom McNeer
MediumCool
http://www.mediumcool.com
530 Means St NW, Suite 110
Atlanta, GA 30318
404.589.0560
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Content being pushed down

[Els]

Tom McNeer wrote:
> Simple problem, I'm sure. But not for me.
>
> Could you folks please look at this example
> pageand explain to me 
> why
> the content in the right-hand column is being pushed
> downward by the content in the left-hand column?

First of all, there's a syntax error in your styles, which causes 
the right column to overlap the left one.
#rightCol {
margin: 0 px auto;

should be margin:0px auto;

Changing that, sets the right column further to the right, in IE 
without being able to reach it by means of a scrollbar.

You set a min-height of 200px, but IE doesn't recognize 
min-height, so the right column isn't as high as should be.

You have a wrapper of 780px wide, inside you have a div of 565px 
wide plus left padding of 10px, which you float:left, *and* give 
position:relative, and then you have a right column div, which 
you give position:relative and left:580px, which means 580px to 
the right from where it would sit if it hadn't position:relative. 
And because of your margin: 0px auto;, this is in the middle of 
the page, below the left column. The combination of your styles, 
makes the right column sit vertically below the left column, and 
horizontally 580px to the right of the middle.

To find out which styles have to be eliminated, it would help to 
know what the desired result is :-)

-- 
Els
http://locusmeus.com/
http://locusoptimus.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/