Skip to main content
higgsyd
higgsyd
Inspiring
February 23, 2017
Answered

my margin-top not working

  • February 23, 2017
  • 1 reply
  • 583 views

In this page the picture has a footnote "Archive: 416 In 2016 with granddaughter"  and I want some space of 150px to follow it before the Archive: and Birth, Marriage and Death content appear.  To insert this space between the content and the blue Archive: section I use my spacer CSS rule which just defines a margin on the top of the Archive section of 150px but as we can see from the image below the spacer is not pushing the Archive section down, but for some reason it looks like it's extending up and under the floated picture - but earlier in the code I have a clear_float which should stop that.  Can anyone see what I'm doing wrong? many thanks - The page is at http://v28.ancestry.higgsy.co.uk/higgs_barbara.php 

This topic has been closed for replies.
Correct answer osgood_

Add  <br style="clear: both;">

directly before this opening div tag:

<div class="clear_float spacer">

Just to explain why this is happen. The below <div> 'fltlft_mine' is being floated which takes it out of the normal html workflow so any content which follows it has to 'clear' it by using a 'clearing' solution.

<div class="fltlft_mine"> <img src="archive/416_2016_barbara_copp_pic_w700.jpg" width="550" height="733" alt=""/><br/>

<span class="archive_text">Archive</span>: 416 - In 2016 with granddaughter </div>

1 reply

O
osgood_
Legend
February 23, 2017

Not sure really what it is you are trying to do but moving the paragraph of text inside the </div> allows the text to become visible?

<div class="fltlft_mine"> <img src="http://v28.ancestry.higgsy.co.uk/archive/416_2016_barbara_copp_pic_w700.jpg" width="550" height="733" alt=""/><br/>

<span class="archive_text">Archive</span>: 416 - In 2016 with granddaughter

<p>Barbara is the grand-daughter of <a href="http://v28.ancestry.higgsy.co.uk/higgs_richard_edward.php">Richard Edward Higgs</a>. Richard was my uncle and brother of my father <a href="http://v28.ancestry.higgsy.co.uk/higgs_harry.php">Harry Higgs</a>.</p>

<p> </p>

<p> In 1982 Barbara married a <a href="http://v28.ancestry.higgsy.co.uk/copp_maurice_edwin.php">Maurice Copp</a>

</p>

</div>

higgsyd
higgsydAuthor
Inspiring
February 24, 2017

Thanks osgood but I'm not trying to hide any element, I just want the margin-top to introduce some space between the main content and the footer text, like this sample page from another page on the site...

O
osgood_Correct answer
Legend
February 24, 2017

Add  <br style="clear: both;">

directly before this opening div tag:

<div class="clear_float spacer">

Just to explain why this is happen. The below <div> 'fltlft_mine' is being floated which takes it out of the normal html workflow so any content which follows it has to 'clear' it by using a 'clearing' solution.

<div class="fltlft_mine"> <img src="archive/416_2016_barbara_copp_pic_w700.jpg" width="550" height="733" alt=""/><br/>

<span class="archive_text">Archive</span>: 416 - In 2016 with granddaughter </div>

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices