Overlapping Posts and Gaps on my Blog

Forums › IT Pro and developers › Overlapping Posts and Gaps on my Blog

sonyxperiageek

2356 posts

Uber Geek
+1 received by user: 278

Trusted

Topic # 146820 29-May-2014 22:53

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

NZ TechBlog | A bit about me | Follow me on Twitter | My Geekzone blog

ubergeeknz

Fully Operational
3343 posts

Uber Geek
+1 received by user: 1088

Trusted

Vocus

Subscriber

Reply # 1056366 30-May-2014 09:33

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
1928 posts

Uber Geek
+1 received by user: 577

Trusted

Lifetime subscriber

Reply # 1056512 30-May-2014 13:33

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 on Twitter - Senson NZ - WordPress experts

Try Wrike: fast, easy, and efficient project collaboration software

sonyxperiageek

2356 posts

Uber Geek
+1 received by user: 278

Trusted

Reply # 1056547 30-May-2014 14:13

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

Sony

NZ TechBlog | A bit about me | Follow me on Twitter | My Geekzone blog

jarledb

Webhead
1928 posts

Uber Geek
+1 received by user: 577

Trusted

Lifetime subscriber

Reply # 1056678 30-May-2014 17:46

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 on Twitter - Senson NZ - WordPress experts

sonyxperiageek

2356 posts

Uber Geek
+1 received by user: 278

Trusted

Reply # 1056927 31-May-2014 01:21

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

NZ TechBlog | A bit about me | Follow me on Twitter | My Geekzone blog