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.


2476 posts

Uber Geek
+1 received by user: 291

Trusted

Topic # 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!




Create new topic
3343 posts

Uber Geek
+1 received by user: 1089

Trusted
Vocus

  Reply # 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.

Webhead
2049 posts

Uber Geek
+1 received by user: 654

Moderator
Trusted
Lifetime subscriber

  Reply # 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)






2476 posts

Uber Geek
+1 received by user: 291

Trusted

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

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




Webhead
2049 posts

Uber Geek
+1 received by user: 654

Moderator
Trusted
Lifetime subscriber

  Reply # 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.









2476 posts

Uber Geek
+1 received by user: 291

Trusted

  Reply # 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?




Create new topic

Twitter »

Follow us to receive Twitter updates when new discussions are posted in our forums:



Follow us to receive Twitter updates when news items and blogs are posted in our frontpage:



Follow us to receive Twitter updates when tech item prices are listed in our price comparison site:





News »

Intel introduces new NUC kits and NUC mini PCs
Posted 16-Aug-2018 11:03


The Warehouse leaps into the AI future with Google
Posted 15-Aug-2018 17:56


Targus set sights on enterprise and consumer growth in New Zealand
Posted 13-Aug-2018 13:47


Huawei to distribute nova 3i in New Zealand
Posted 9-Aug-2018 16:23


Home robot Vector to be available in New Zealand stores
Posted 9-Aug-2018 14:47


Panasonic announces new 2018 OLED TV line up
Posted 7-Aug-2018 16:38


Kordia completes first live 4K TV broadcast
Posted 1-Aug-2018 13:00


Schools get safer and smarter internet with Managed Network Upgrade
Posted 30-Jul-2018 20:01


DNC wants a safer .nz in the coming year
Posted 26-Jul-2018 16:08


Auldhouse becomes an AWS Authorised Training Delivery Partner in New Zealand
Posted 26-Jul-2018 15:55


Rakuten Kobo launches Kobo Clara HD entry level reader
Posted 26-Jul-2018 15:44


Kiwi team reaches semi-finals at the Microsoft Imagine Cup
Posted 26-Jul-2018 15:38


KidsCan App to Help Kiwi Children in Need
Posted 26-Jul-2018 15:32


FUJIFILM announces new high-performance lenses
Posted 24-Jul-2018 14:57


New FUJIFILM XF10 introduces square mode for Instagram sharing
Posted 24-Jul-2018 14:44



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.

Alternatively, you can receive a daily email with Geekzone updates.