can't work it out... |
can't work it out... |
mattykg1987 |
Mar 10 2024, 11:41 AM
Post
#1
|
Group: Members Posts: 6 Joined: 24-February 24 Member No.: 29,138 |
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) |
Christian J |
Mar 10 2024, 12:02 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
We would need to see the CSS as well...
|
mattykg1987 |
Mar 10 2024, 12:05 PM
Post
#3
|
Group: Members Posts: 6 Joined: 24-February 24 Member No.: 29,138 |
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 |
Mar 10 2024, 01:21 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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 |
Mar 10 2024, 02:03 PM
Post
#5
|
Group: Members Posts: 6 Joined: 24-February 24 Member No.: 29,138 |
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 |
Mar 10 2024, 03:10 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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 |
Mar 11 2024, 02:15 PM
Post
#7
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there mattykg1987,
coothead |
mattykg1987 |
Mar 11 2024, 02:28 PM
Post
#8
|
Group: Members Posts: 6 Joined: 24-February 24 Member No.: 29,138 |
Hi there mattykg1987,
coothead Thanks for your reply sorry but im not sure what's changed, can you explain? |
coothead |
Mar 11 2024, 02:45 PM
Post
#9
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
coothead |
Lo-Fi Version | Time is now: 26th September 2024 - 06:25 AM |