can't work it out... Options

[mattykg1987]

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>

[Christian J]

We would need to see the CSS as well...

[mattykg1987]

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; }

[Christian J]

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.

[mattykg1987]

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....?

[Christian J]

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).

[coothead]

Hi there mattykg1987,

First things first, unfortunately your choice of text and
background colors fails miserably in a contrast test here...

WebAim Contrast Checker

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

[mattykg1987]

Hi there mattykg1987,

First things first, unfortunately your choice of text and
background colors fails miserably in a contrast test here...

WebAim Contrast Checker

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?

[coothead]

Thanks for your reply sorry but I'm not sure what's changed, can you explain?

1. the background-color has been changed.
2. the HTML has been changed - ( simplified ).
3. the CSS has been changed.

These changes make the page work on all devices and make the content readable for all viewers.

I hope that this answer will help your understanding.

coothead