Layout: Space between divs

started by Schomer on Nov 22, 2004 — RSS Feed

Schomer Schomer
Posts: 24

I have three divs, each with a background image, all inside a container div. I can't remember how to get rid of the space between these divs... I need them to be on top of each other with no space between, so the images line up.

     #top_shadow {
     background-image: url(css_images/main_page_shadow/top.gif);
     background-repeat: no-repeat;
     background-position: center bottom;
     height: 19px;
     width: 712px;
     }
     #middle_shadow {
     background-image: url(css_images/main_page_shadow/middle.gif);
     background-repeat: repeat-y;
     background-position: center top;
     width: 712px;
     }
     #bottom_shadow {
     background-image: url(css_images/main_page_shadow/bottom.gif);
     background-repeat: no-repeat;
     background-position: center top;
     height: 26px;
     width: 712px;
     }

Jcadre Jcadre
Posts: 6

The first thing I learned about <DIV> tags is that they necessarily CAUSE a break, so I don't believe there is any way to prevent a space between each. You did type that you "can't remember" how to do it, so perhaps there's a way I don't know of. That's highly possible.

I would accomplish what you're trying to do with a table: 0 cell padding, 0 cell spacing, 0 border, 3 rows, 1 column, each row (cell) with an image for the background, which repeats within the cell by default.

Hope this helps!  :~}

Schomer Schomer
Posts: 24

Hi, thanks for the table advice.

I think there is something that can be done with padding to get rid of the space between divs. I'm plugging it in and not getting the results I'm looking for, so maybe I'm putting it in the wrong place...

Stan Stan
Posts: 44

Try setting margin & padding to 0. It depends on the browser. IE sometimes throws in margins that you didn't ask for. At no extra charge!

Schomer Schomer
Posts: 24

Thanks for the suggestion!

Strangely, the fix appears to be giving it a margin of 1px!

Just when I think I understand some of this stuff, I run into something like this - which makes my head spin.

Now, onto my investigation of inline tables - whatever that means. If anyone knows of a good resource about this, let me know. I noticed this was used for putting a border around an image, with four divs - one for each corner, around any size image. I want to know how it works, so off I go!

Schomer

Mpj Mpj
Posts: 76

Schomer,

Two ideas:

1. You might try setting the border to 0 in addition to the padding and margin.

2. You set the height and width of #top_shadow and #bottom_shadow but just the width for #middle_shadow. Is there any reason for this? If you can set the height for all three you can then use absolute positioning to line up the 3 images with no space between. The container div positioning will then dictate where on the screen your images are positioned.

Jcadre Jcadre
Posts: 6

You might also try an 'absolute top', which can prevent extra space being added. Not sure of the exact syntax.

Ladynred Ladynred
Posts: 5

I line up divs like this all the time with NO spacing problems. It would be more helpful if you would post your HTML as well as the CSS.

I make it a habit to set margin and padding to zero for the <body> in my css, basically you want to clear the slate first. I also define the base font characteristics in the same body element of my css.


Michael Bagge Michael Bagge
Posts: 1

Hi

I've just been there and solved it by setting margin-bottom: -2px;in the top div tag, and margin-top:-1px; in the bottom div tag. Try to work with that, it helped me!

I saw the date after posting my answer, lol! But I guess there still need for answers about this topic!

Sabri Dino Sabri Dino
Posts: 45

yerinde köpek egitimi
ücretsiz arkadaşlık sitesi
Web tasarımı
istanbul eskort
kopekegitimi
bayaneskort
5651 sayılı yasa
escort girls istanbul

Maskodok Eko Maskodok Eko
Posts: 171

Jasa SEO Profesional

TOP SEO | Jasa SEO Profesional RajaPoker88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya IDRPoker.COM Agen Texas Poker dan Domino Online Indonesia Terpercaya POKERSTAR88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya D

Kokokmas Kokokma Kokokmas Kokokma
Posts: 104




You must login to reply