How to add space between DIVs?

Question

I have a WordPress generated page where I want to place AdSense below the header of the page. See image at https://i.stack.imgur.com/DTOQB.jpg

I want to create some white space between the header and the AdSense ad. I've tried adding margin-top and padding to the div that contains the AdSense ad (as noted below) - all to no avail.

<div style="text-align: center; margin-top: 5px; padding: 13px 0 10px 0;">
  <script type="text/javascript"><!--
    google_ad_client = "**************";
    google_ad_slot = "**************";

What do I have to do provide some white space between the header and the AdSense ad?

P.S. The site is http://phoneswithwindows.com/

I have it too, but the internet connection isn't gonna pay for itself :) — Frank Rizzo, May 05 '11 at 17:26

score 14 · Accepted Answer · answered May 05 '11 at 17:01

14

put in your css

#access {
  margin-bottom: 5px; /* or whatever */
}

answered May 05 '11 at 17:01

Eineki

14,773
6
50
59

`margin:0 auto 5px` in this case (since there already is a `margin:0 auto` declaration present). – Šime Vidas May 05 '11 at 17:05
Those two are very well combined. It doesn't matter if they're 2 properties (being `margin` first and `margin-bottom` after). – Rudie May 05 '11 at 17:07
@Šime Vidas: Using just margin-bottom leave the other margin eventually set into other css untouched. – Eineki May 05 '11 at 17:10
Could you please answer http://stackoverflow.com/questions/9943560/html-alignment-issue-in-one-machine-only-both-ie8 ? – LCJ Mar 30 '12 at 13:25

score 3 · Answer 2 · answered May 05 '11 at 17:09

3

I added margin-top: 5px on the <ins> element inside the div and it work. If you could add an id to the div you use this css rule:

div#adds > ins{
    margin-top: 5px;
}

answered May 05 '11 at 17:09

isra17

401
3
8

Child selectors (`>`) don't work in IE6. This may or may not be an issue, depending on the OP's support needs, but something to keep in mind. – Shauna May 05 '11 at 17:14

score 1 · Answer 3 · answered May 05 '11 at 17:01

1

Add a margin-bottom to the div with id "access"

answered May 05 '11 at 17:01

Amjad Masad

4,035
1
21
20

score 1 · Answer 4 · answered May 05 '11 at 17:11

Your #access div has float:left; on it, so you will need to add clear:left (or clear:both) on the div containing the ad, so they don't overlap.

If you look at your page with Firebug, or the developer tools in your favorite browser, you can see that your ad div actually sits above and layered below your header divs, and when you add clear: both, it will move down to where it should be.

score 1 · Answer 5 · answered May 05 '11 at 17:39

1

Have you tried adding the following

<div style="clear:both;"></div>

after the header div?

This way the header float (if it had a float) is cleared and the Ad div below should now utilise the padding

answered May 05 '11 at 17:39

Rob

1,235
2
19
44

How to add space between DIVs?

5 Answers5

Linked

Related