468,107 Members | 1,359 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,107 developers. It's quick & easy.

CSS Layout Problems

Rob
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

Aug 18 '06 #1
4 1134
On 18 Aug 2006 08:49:38 -0700, "Rob" <ro****@platforum.co.ukwrote:
>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/
Aug 18 '06 #2

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.

Aug 18 '06 #3
>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

Aug 18 '06 #4
Rob

hiazle wrote:
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

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

Aug 19 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

39 posts views Thread by Zak McGregor | last post: by
22 posts views Thread by Jam Pa | last post: by
20 posts views Thread by Tammy | last post: by
30 posts views Thread by Diane Wilson | last post: by
14 posts views Thread by Anoop | last post: by
15 posts views Thread by Gary Peek | last post: by
5 posts views Thread by Jeff User | last post: by
1 post views Thread by Solo | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.