Geekzone: technology news, blogs, forums
Guest
Welcome Guest.
You haven't logged in yet. If you don't have an account you can register now.


sonyxperiageek

2958 posts

Uber Geek

Trusted

#146820 29-May-2014 22:53
Send private message

I have been trying to figure this out ever since, but if you go to my website, and scroll down, you can see that there are some gaps in the posts which is not normal and they should be filled up with posts. 

Also, if you resize the browser on desktop, or view the site from a mobile, the first few posts overlap each other.

Does anybody know what is wrong? I.E what code is overlapping what please?

I am using the Pinboard theme, but with mods, on Wordpress.

Thanks in advance!




Sony


Create new topic
ubergeeknz
3344 posts

Uber Geek

Trusted
Vocus

  #1056366 30-May-2014 09:33
Send private message

In your two column section; you need to force the articles to the same height.

I made a change to .twocol adding "height: 271px" and it seemed to fix it.

edit: another way would be to put some kind of clearing div after every two articles.



jarledb
Webhead
3253 posts

Uber Geek

Moderator
ID Verified
Trusted
Lifetime subscriber

  #1056512 30-May-2014 13:33
Send private message

Clearing div is a much better way to fix it than forcing the height. Especially if you are making a responsive design (but in general its always better to let things flow dynamically than trying to force a set height)




Jarle Dahl Bergersen | Referral Links: Want $50 off when you join Octopus Energy? Use this referral code
Are you happy with what you get from Geekzone? Please consider supporting us by making a donation or subscribing.


sonyxperiageek

2958 posts

Uber Geek

Trusted

  #1056547 30-May-2014 14:13
Send private message

Thanks guys, would the clearing divs go in the css file after every two articles?




Sony




jarledb
Webhead
3253 posts

Uber Geek

Moderator
ID Verified
Trusted
Lifetime subscriber

  #1056678 30-May-2014 17:46
Send private message

This is an example of clearing div stylesheet:

.fix {
clear: both;
height: 1px;
margin: -1px 0 0;
overflow: hidden;
}

You would put that in your stylesheet and use

<div class="fix"></div> where you want to clear the floats.







Jarle Dahl Bergersen | Referral Links: Want $50 off when you join Octopus Energy? Use this referral code
Are you happy with what you get from Geekzone? Please consider supporting us by making a donation or subscribing.


sonyxperiageek

2958 posts

Uber Geek

Trusted

  #1056927 31-May-2014 01:21
Send private message

jarledb: This is an example of clearing div stylesheet:

.fix {
clear: both;
height: 1px;
margin: -1px 0 0;
overflow: hidden;
}

You would put that in your stylesheet and use

<div class="fix"></div> where you want to clear the floats.





Where should I clear the floats using the div tags?




Sony


Create new topic





News and reviews »

Air New Zealand Starts AI adoption with OpenAI
Posted 24-Jul-2025 16:00


eero Pro 7 Review
Posted 23-Jul-2025 12:07


BeeStation Plus Review
Posted 21-Jul-2025 14:21


eero Unveils New Wi-Fi 7 Products in New Zealand
Posted 21-Jul-2025 00:01


WiZ Introduces HDMI Sync Box and other Light Devices
Posted 20-Jul-2025 17:32


RedShield Enhances DDoS and Bot Attack Protection
Posted 20-Jul-2025 17:26


Seagate Ships 30TB Drives
Posted 17-Jul-2025 11:24


Oclean AirPump A10 Water Flosser Review
Posted 13-Jul-2025 11:05


Samsung Galaxy Z Fold7: Raising the Bar for Smartphones
Posted 10-Jul-2025 02:01


Samsung Galaxy Z Flip7 Brings New Edge-To-Edge FlexWindow
Posted 10-Jul-2025 02:01


Epson Launches New AM-C550Z WorkForce Enterprise printer
Posted 9-Jul-2025 18:22


Samsung Releases Smart Monitor M9
Posted 9-Jul-2025 17:46


Nearly Half of Older Kiwis Still Write their Passwords on Paper
Posted 9-Jul-2025 08:42


D-Link 4G+ Cat6 Wi-Fi 6 DWR-933M Mobile Hotspot Review
Posted 1-Jul-2025 11:34


Oppo A5 Series Launches With New Levels of Durability
Posted 30-Jun-2025 10:15









Geekzone Live »

Try automatic live updates from Geekzone directly in your browser, without refreshing the page, with Geekzone Live now.



Are you subscribed to our RSS feed? You can download the latest headlines and summaries from our stories directly to your computer or smartphone by using a feed reader.