7 replies to this topic

[Quimp]

Hello,
it looks like this forum is full of problems related to the use of div tags, but a quick search and hours of tries and failures have led me nowhere. I'm trying to remove the cluttered tables to move on to DIVs. Things were right on track until I add the main content.

1. To start with, as described in the title, I'm having troubles with the width of my divs. Whenever I have a padding of 4px on the right (for instance), I have to write width:100%-4px; for the width to be the right size in Firefox, as opposed to IE where 100% alone works fine. As you can guess, the CSS Validator doesn't like my approach.

To make a short story, I need a fix for the static widths of parts of my layout.


What am I talking about?
See what it looks like.


Any ideas? This is getting very tricky due to the use of my template. Any help is greatly appreciated!

Kindly,
Ben.

Edited by Quimp, 03 March 2006 - 10:39 PM.

[coolaid]

ok easy fixes.

for the padding problem in firefox, just remove the padding, add another nested div, give that div a smaller width (such as 98%) and add margin:0 auto; to that nested div.
eg.

<div style="width:100%">
  <div style="width:90%;margin:0 auto;">Content</div>
</div>

and for the otehr problem (the content slides under the menu, just dont use 100%, use something like 95% or whatever it takes. (just make sure all paddings/margins/width dont expand past the containing divs width... try to not even let the total width of the contained objects reach the containg divs width)

Edited by coolaid, 02 March 2006 - 10:23 PM.

[Quimp]

Quote

just remove the padding, add another nested div

I will need to add another div everytime I need to add padding... that's messy. Thanks for the tip.

Quote

(just make sure all paddings/margins/width dont expand past the containing divs width... try to not even let the total width of the contained objects reach the containg divs width)

This seems to be working fine in IE, but doesn't solve the problem in Firefox (I changed the container's width from 100% to 98%, and tried as low as 80%). The problem is that the width for the content is undefined. The menu has a static width, and I want the content div to expend and cover all the space.

See attachment.

Attached Files

•  prob.png   1.46K   29 downloads

[greg]

The problem occurs from the fact that IE and FF act upon padding differently. IE makes the div the exact width you specify it to be, and subtracts padding and borders from the div's inside. FF, however, makes the div the width you specify, but then adds on the padding and borders to the outside, making it wider than what you put for its width.

There is a work-around for it, called the box model hack, which you can Google to get a good explanation.

However, I prefer to take a much simpler approach: Just use margins! Instead of adding padding to a container, I add margins to the items inside the container. That way, I still get the spacing I want without all the mess.

[Quimp]

I understand the Box Model Hack, but all resources I've checked explained how to fix it with static width only. My only problem remaining is the horizontal bar. Its width is set to 100% and it has a left and right border of 1px. In my CSS, I could go with:

#bar
{
width: 100%-2px !important;
width: 100%;
}

... but this isn't valid CSS. Any alternatives? If preferable, I would prefer not having to use another div to add the borders, but if it's the only way to go, I won't have the choice.


Thanks for the help greg.

[coolaid]

also, in a case where you want an static box and an expandable box next to it, it's best to use absolute positioning.
http://www.bluerobot...ts/layout1.html

[greg]

Why don't you make the line a background image?

[Pax]

coolaid, on Mar 3 2006, 05:36 PM, said:

also, in a case where you want an static box and an expandable box next to it, it's best to use absolute positioning.

If you use absoulte positioning, just keep in mind all browsers will position things differently...and it can be fairly noticeable at times. Just be careful with it. Like greg said, use margins. Keep your head up for some funky bugs in IE...like having your margins doubled. Easy to fix that tho, just search for CSS bugs or CSS hacks on google to find alot of the bugs so you know about them, and alot of the fixes too.