Clear Floats

I have spent much of the day trying to clear a float.

I have a phrase floated to the left, followed by a table in the centre. I then want the next phrase to be underneath these two items but it sits to the right of the table.

How do I clear the float.?

The div is “mydiv” and I thought I wanted something like

.mydiv after { clear:left; } or maybe clear both but it doesn’t work. Four <br>s does the trick, but that’s not the real answer is it?

The float is created by .insert {float:left;font-size:smaller;margin-left:5%;}

HTML

<div class="mydiv"><p class="insert">Here insert the Name and Description<br>of the Public Institution</p>
<table class="Institution">
 <tr>
  <td><p class="statscenter">* Ashton Under Lyne</p></td>
 </tr>
 <tr>
  <td><p class="statscenter">Union</p></td>
 </tr>
 <tr>
  <td><p class="statscenter">Workhouse</p></td>
 </tr>

</table>
</div>

<div class="spacebetweenparas"></div>
<br><br><br><br><p class="statscenter">The above mentioned Institute is situated with the Boundaries of the</p>

This is the page which appears to display as I would like it to:

Thanks

Then simply add clear:both to that element and it will move underneath.

Note that the html you posted is not very semantic.

Never (almost never) do this:

<div class="spacebetweenparas"></div>

You can achieve space by applying a bottom margin on the element above or a top margin on the element below. No need for unnecessary mark up.

Never (always never) do this either:

<br><br><br><br>

Breaks are for line breaks between phrases and not for making space. They are used to make text move to another line such as in a poem or address. They are not a substitute for using paragraphs and never a means to create space. (In the olden days a browser was allowed to ignore more than one break in a row as there is no criteria for when more than one break can be used.)

Create space using margins or padding on the existing elements you use.

Lastly the use of a table for the address is not semantic as tables are for tabular data and you basically just have an address which could be in a p tag and spans as follows.

<p><span>Ashton Under Lyne </span> <span>Union</span> <span Workhouse</span></p>

There is no element called after but I think you meant to the pseudo element called :after.

Commonly the ‘clearfix’ technique is applied to the parent of a div to contain the floats so must encompass the floated children and not the element you want cleared.

To use the :after element you have to supply some content with the content property otherwise it is empty and won’t have any effect.

e.g.

.mydiv:after {
content:" ";
clear:both;
}

There are better techniques today than using floats but I’ll leave that for another day :slight_smile:

5 Likes

Thanks for that; I didn’t think of using the element after the floated ones and I didn’t come across this anywhere by googling.

I have removed the div class=“spacebetweenparas”></div

The four brs were only there to enable the page to be depicted as I wished the forum to see it.

I noted your comments about the table being really an address, but I did think this was the best option as I wanted the three lines underneath to be of equal length, as if they had been put there to be written on, and underlining the text doesn’t do the job as I would like. The line under Union and Workhouse should be the same length as the one under Ashton under Lyne

Is there a - not too complex- way to draw a line of equal length for the three lines? Or is using the bottom border of a table cell the better option in this instance.

http://www.c5d.co.uk/descriptionworkhouse1861.php

When you want something to appear like a table, but not actually be a table in the mark-up, you can use display: table.
Though there are other ways to get equal lines.
This example uses an inline-flex.

You will of course use classes to target the CSS in the real world, this is a simplified example.

1 Like

I had used display table in the amended version, but couldn’t get the lines to extend far enough. Hence the use of the table. I will try what you have suggested.

This was the amended version

.center1861description {
display: table;
margin-right:43.5%;
margin-bottom:25px;
text-decoration:underline;

You will need to use spans not breaks as I posted in my example above (and as @SamA74 posted) .

e.g.

<p class="center1861description">
  <span>Ashton Under Lyne </span> <span>Union</span>
  <span>Workhouse</span>
</p>

Then use this CSS:

.center1861description {
  display: table;
  margin: 1rem 43.5% 1rem 25px;
  text-align: center;
  /*text-decoration:underline; remove this */
}

.center1861description span {
  display: block;
  padding: 5px 10px;
  border-bottom: 1px solid #000;
}

Demo here:

1 Like

It helps to remember that html is the structure of the page and not its appearance. You never choose an html element based on what it looks like. It’s the Job of css to present the html to look the way you want.

CSS doesn’t care what you use (in most cases) as it can make it look like anything you want.

Choose the html based on the content it contains and that content should be structured logically using the correct and semantic html for the job in hand. There is always a correct element to use and that will immediately add semantic meaning to the page to a whole range of viewers whether they be human or not or sighted or not and so on… :slight_smile:

5 Likes

Thanks for this. I’m sorry for the delayed response, real work got on the way!.

I wonder if I may ask about this please?

margin: 1rem 43.5% 1rem 25px;

What is the 1rem and the 25% trying to do? If I use it, there is a very big space between the word “for” and the block.

If I simply use margin-left: 43.5%; it displays fine.

Thanks very much

The top margin would have made little difference to the vertical position as you have 1em bottom margin on the element above so they will collapse into one margin anyway.

It looks as though I typed that rule out the wrong way around regarding the horizontal margins as it should be 43.5% for the left margin.:frowning:

I believe the bottom margin of 25px was actually taken from your previous code as I would not have made that up.

If you want to control all margins for that element then use this:

margin: 0 0 0 43.5%;

(top, right, bottom, left)

Remember that p elements come with default vertical margins so you need to explicitly set them to what you want.

The left value of 43.5% is a bit of a magic number and you should try and avoid using measurements like that as they only work for the specific case in hand and should anything change then alignment no longer matches. You are probably ok in this case but its something to be aware of. Generally avoid magic numbers that rely on something always else being there in order for them to work.

You are looking to center the element so you could use this trick.

.center1861description{
margin:0 0 0 50%;
transform:translateX(-50%);
}

That will align it centrally as your 43.5% is a bit out.

[quote=“PaulOB, post:9, topic:359786”]

.center1861description{
margin:0 0 0 50%;
transform:translateX(-50%);
}

[/quote]Thanks for that, but it’s no go I’m afraid.

The CSS moved it miles left, and extends the underlines massively. You’re right this is a "one off. I have hundreds of standard pages, but maybe on this occasion the magic number is OK

Maybe the way to do it is the include the the phrase "Enumeration Book For in the block, centre that and then float the block Here insert the Name etc left of that.

Which page are you referring to as I used the last link you gave and this is the result I get.

Normal page:

With my code added shown below (as you can see in the CSS injection panel):

As you can see my version is centred perfectly while your current version is about 10px off centre. (I had to put the 25px bottom margin back on the rule.)

Maybe you are referring to a different page that has a different set up?

Thanks again.

You confused me because I understand that I had to remove the text center from the element.

By adding text center to the .center1861description
{
display: table;
margin: 0 0 0 50%;
transform:translateX(-50%);
text-align:center;

}

It has centred the text. However the table underneath is not centered but aligned left. I have looked at the “inspection” and the element “location” is only partially recognised.

I’m not sure what is preventing this

Where did I say that?

Please show me the page with the error.

Did you not see my screenshots showing everything working perfectly? I think you may be referring to a different page that has different code. The screenshot I posted is a live example of your page with the extra code added as shown in the inspection panel. It aligns perfectly. :slight_smile:

1 Like

In the Code Pen

.center1861description {
  display: table;
  margin: 1rem 43.5% 1rem 25px;
  *text-align: center;*
*  /*text-decoration:underline; remove this */*
*}*

.center1861description span {
  display: block;
  padding: 5px 10px;
  border-bottom: 1px solid #000;
}

No, I never posted that anywhere.

This is what I posted.

I only removed the text-decoration:underline.

Notwithstanding your error you still shouldn’t be seeing the layout you showed in post #10 so I need to see the page whjere that display is evident.

As I said I have shown screenshots of it all working so there must be something I am missing somewhere :slight_smile:

OK, I’m sorry. I must have misunderstood it.

This is the live page and it is the table at the bottom with St michael’s in it which needs to eb centred

It’s blank :slight_smile:

Sorry

It is this bit which appears to be left-aligned.

image

It should really start under the asterisk.

I have added the bottom margin.