Stylesheets - CSS Layout Problems

Author

CSS Layout Problems

Rob

2006-08-18, 6:34 pm

I am just venturing into the world of pure CSS layouts. Although I am
enjoying it so far, I have come across an issue that really has me
stumped.

The main body of my page is set out using a container div which has
inside it to further divs left and right. I want the left div to have a
grey background and the right to have white background.

Originally I gave the left div the grey background and left the right
div as my page body was set to white. This caused a problem if the
right div has more content the grey border on the left div didn't
continue to the bottom of the page.

I though I had the answer make the container div grey and the right div
white. Problem solved in Netscape and FireFox, but in IE even though I
have all my width and margins right it seems to think that the div is
to wide to fit, and pushes it down.

I'm probably missing something really simple and I hope that you
understand what I'm trying to say, if not have a look at the below
link it might help.

http://www.platforum.co.uk/training/training.htm

Thanks for taking the time to read this

Rob

Stephen Poley

2006-08-18, 6:34 pm

On 18 Aug 2006 08:49:38 -0700, "Rob" <robert@platforum.co.uk> wrote:

>I though I had the answer make the container div grey and the right div
>white. Problem solved in Netscape and FireFox, but in IE even though I
>have all my width and margins right it seems to think that the div is
>to wide to fit, and pushes it down.
>
>I'm probably missing something really simple and I hope that you
>understand what I'm trying to say, if not have a look at the below
>link it might help.
>
>http://www.platforum.co.uk/training/training.htm
>
>Thanks for taking the time to read this

I'm not sure, but I think you're suffering from the notorious IE 3px-jog
bug. Try making the left-margin of the right-hand div 5px wider and see
if that helps.

When you've done that, work on sizing the elements in relative units
(ems or %) rather than pixels, so that the layout adjusts gracefully to
different window sizes and text sizes.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Feederbillia

2006-08-18, 6:34 pm

Rob wrote:
> I am just venturing into the world of pure CSS layouts. Although I am
> enjoying it so far, I have come across an issue that really has me
> stumped.
>
> The main body of my page is set out using a container div which has
> inside it to further divs left and right. I want the left div to have a
> grey background and the right to have white background.
>
> Originally I gave the left div the grey background and left the right
> div as my page body was set to white. This caused a problem if the
> right div has more content the grey border on the left div didn't
> continue to the bottom of the page.
>
> I though I had the answer make the container div grey and the right div
> white. Problem solved in Netscape and FireFox, but in IE even though I
> have all my width and margins right it seems to think that the div is
> to wide to fit, and pushes it down.
>
Hi Rob,

Im only just getting to grips with CSS myself, so this is only an idea.

If you've applied padding or margins to the two inner divs (left and
right) its could make the total width larger than your main container
div??

Id try reducing the width of the right div (a few pixels at a time) and
see what happens.

Hope this makes sense?? Like I said - still learning the basics myself!

Mark.

hiazle

2006-08-18, 6:34 pm

>but in IE even though I
> have all my width and margins right it seems to think that the div is
> to wide to fit, and pushes it down.
>
> Rob

try this:

#divBodyRight {
width: 510px;
width: expression("505px");
}

Only IE processes understands "EXPRESSION", and it usually helps to
make the div smaller by 5px for IE.

Hope that helps

Hiazle

Rob

2006-08-19, 6:40 pm

hiazle wrote:
>
> try this:
>
> #divBodyRight {
> width: 510px;
> width: expression("505px");
> }
>
> Only IE processes understands "EXPRESSION", and it usually helps to
> make the div smaller by 5px for IE.
>
> Hope that helps
>
> Hiazle

Thanks Hiazle

Thats it!!!

Problem solve, youve made my day.

Thanks as well to all you other guy that took the time to help.

Have a good weekend

Rob