Dreamweaver - Re: css border width question

Author

Re: css border width question

Gary White

2004-06-02, 11:15 pm

On Tue, 1 Jun 2004 19:52:37 -0500, "-D-" <noone@nospam.com> wrote:

>I have a container div set at a fixed width of 790px. The divs placed
>within the container I've also set to the same width 790px. When I apply a
>left and right border to the divs within the container it causes the images
>to push down when I'm editing in DMX. It will view fine, but messes up the
>placement of the elements on the page when I'm editing the page in
>Dreamweaver. Is there a way to prevent this? Is this a bug?

If your inner div's are 790 pixels wide and you add a one pixel border,
then they will be 792 pixels wide. Now you're placing this 792 pixel
wide div inside a 790 pixel wide div. That could cause a problem.

That said, it's impossible to say without seeing the code, and exactly
what the layout problem actually is, to say what else might be wrong.

Gary

Osgood

2004-06-02, 11:15 pm

-D- wrote:
> I have a container div set at a fixed width of 790px. The divs placed
> within the container I've also set to the same width 790px. When I apply a
> left and right border to the divs within the container it causes the images
> to push down when I'm editing in DMX. It will view fine, but messes up the
> placement of the elements on the page when I'm editing the page in
> Dreamweaver. Is there a way to prevent this? Is this a bug?
>
> I've tried using a 100%, but that doesn't work either.

Its not a bug, its the way <divs> work. Padding and borders are added to
the width of a <div>*(see below). So now your inner <div/s> exceed the
width of the container <div>. Any elements within the inner <div/s>,
which, when combined, add up to more than the width of their container
will turn to the next line.

Try adding the sum of the borders (plus any padding if you are uisng it)
which you have applied to your inners <div/s> to the width of your
container <div> or reduce the the total sum width of your images to the
width of the container <div> minus any left/right borders and padding
applied to the inner <div/s>

*IE 5x on PC is the only browser which bucks the rule and adds the
border and padding to the inside of the <div>. To combat this you either
need to use the 'box model hack' or to use IE specific conditional
statements. Either method will tell that browser to render the <div> to
the correct width.

Oh what fun.