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:
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
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.
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.
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.
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…
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.
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.
[/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.
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?
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.
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.
