Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ can't work it out...
Posted by: mattykg1987 Mar 10 2024, 11:41 AM
If you look at the screen shot you will see I have 3 in a row but I don't understand why the one on its own I can't make go into a row of 3 this is the code. Thanks to anyone that can help.
<div class="col">
<h2>Tiling Contractors in Shere</h2>
<h2><strong>Shere Tilers</strong></h2>
<div class="ft">
<p>Affordable & Quality <strong>Tiling service in Shere</strong></p>
<p><a href="tiler-in-shere.html">Read More</a></p>
</div>
</div>
<div class="col last">
<h2>Tiling Contractors in Staines</h2>
<h2><strong>Staines Tilers</strong></h2>
<div class="ft">
<p>Affordable & Quality <strong>Tiling service in Staines</strong></p>
<p><a href="tiler-in-staines.html">Read More</a></p>
</div>
</div>
<div class="col">
<h2>Tiling Contractors in Sunbury on Thames</h2>
<h2><strong>Sunbury on Thames Tilers</strong></h2>
<div class="ft">
<p>Affordable & Quality <strong>Tiling service in Sunbury-on-Thames</strong></p>
<p><a href="tiler-in-sunbury-on-thames.html">Read More</a></p>
</div>
</div>
<div class="col">
<h2>Tiling Contractors in Surbition</h2>
<h2><strong>Surbition Tilers</strong></h2>
<div class="ft">
<p>Affordable & Quality <strong>Tiling service in Surbition</strong></p>
<p><a href="tiler-in-Surbition.html">Read More</a></p>
</div>
</div>
<div class="col">
<h2>Tiling Contractors in Tadworth</h2>
<h2><strong>Tadworth Tilers</strong></h2>
<div class="ft">
<p>Affordable & Quality <strong>Tiling service in Tadworth</strong></p>
<p><a href="tiler-in-tadworth.html">Read More</a></p>
</div>
</div>
Attached thumbnail(s)
Posted by: Christian J Mar 10 2024, 12:02 PM
We would need to see the CSS as well...
Posted by: mattykg1987 Mar 10 2024, 12:05 PM
We would need to see the CSS as well...
.col { float: left; width: 286px; margin: 0 35px 40px 0; }
.col h3 { border-left: 4px solid #E6AB0B; padding: 0 0 5px 12px; }
.col h2 { border-left: 4px solid #E6AB0B; padding: 0 0 5px 12px; }
.col h4 { border-left: 4px solid #E6AB0B; padding: 0 0 5px 12px; }
.col a { font-weight: bold; }
.col p { margin: 0 0 10px; }
.ft { border-left: 1px solid #ddd; padding: 8px 0 0 15px; }
.last { margin-right: 0; }
Posted by: Christian J Mar 10 2024, 01:21 PM
Sometimes that happens with floated elements if they get caught by a previous one. Perhaps the browser thinks the Shepperton box extends slightly more (due to its two lines of white text) than the Shere box (that has only one line of white text). If you add a CSS border around the boxes you might be able to confirm this.
The most robust solution might be to use a Flex layout instead of floats. Or possibly give all the .col boxes the same explicit height.
Posted by: mattykg1987 Mar 10 2024, 02:03 PM
Sometimes that happens with floated elements if they get caught by a previous one. Perhaps the browser thinks the Shepperton box extends slightly more (due to its two lines of white text) than the Shere box (that has only one line of white text). If you add a CSS border around the boxes you might be able to confirm this.
The most robust solution might be to use a Flex layout instead of floats. Or possibly give all the .col boxes the same explicit height.
Thanks for your reply. The thing is if I remove the shepperton box completely it happens to the next one....?
Posted by: Christian J Mar 10 2024, 03:10 PM
I remove the shepperton box completely it happens to the next one....?
That's because all of them have two lines of white text except the Shere box. Try giving the Shere box a second line of text too (it doesn't have to be actual text, just something to make the height of all boxes the same).
Posted by: coothead Mar 11 2024, 02:15 PM
Hi there mattykg1987,
First things first, unfortunately your choice of text and
background colors fails miserably in a contrast test here...
https://webaim.org/resources/contrastchecker/
Unfortunately, some of your visitors may not be blessed with 20/20 vision.
With that in mind your may see a reworking of your page here...
Full Page View
https://codepen.io/coothead/full/wvZGOVy
...and the code for it here...
Editor View
https://codepen.io/coothead/pen/wvZGOVy
The page is also fully responsive for all devices.
coothead
Posted by: mattykg1987 Mar 11 2024, 02:28 PM
Hi there mattykg1987,
First things first, unfortunately your choice of text and
background colors fails miserably in a contrast test here...
https://webaim.org/resources/contrastchecker/
Unfortunately, some of your visitors may not be blessed with 20/20 vision.
With that in mind your may see a reworking of your page here...
Full Page View
https://codepen.io/coothead/full/wvZGOVy
...and the code for it here...
Editor View
https://codepen.io/coothead/pen/wvZGOVy
The page is also fully responsive for all devices.
coothead
Thanks for your reply sorry but im not sure what's changed, can you explain?
Posted by: coothead Mar 11 2024, 02:45 PM
Thanks for your reply sorry but I'm not sure what's changed, can you explain?
These changes make the page work on all devices and make the content readable for all viewers.
- the background-color has been changed.
- the HTML has been changed - ( simplified ).
- the CSS has been changed.
I hope that this answer will help your understanding.
coothead
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)