Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

problem with blog layout

Featured Replies

Ok - first things first - I'm new to blogs in that this is my first attempt and I think I've done a pretty good job with regards to styling it to look like my actual site...but as I'm no expert on wordpress and how the whole blog structure is put together I'm finding it really difficult to debug this problem that's occuring.

 

blog address is http://www.milomade.co.uk/blog

 

Everything looks fine when it loads etc, but if you select a 'Recent Post' from the right hand column and wait for the page to load - everything is in the right place apart from the Right hand column which is now pushed to below the content of the rest of the site. I have no idea where to look to fix this tobe honest and would appreciate some help, if anyone can help by looking at the source code.

 

The funny thing is, that I'm sure the layout didn't break initially when I put the site live. I'm sure I would've noticed the error. So I thought maybe it's because I've added the Flickr thing, so I took that out but it makes no difference. so maybe the error has been there all along.

 

I'd really appreciate some of you blog experts having a look.

 

Thanks

 

E

At a quick lance every thing looks fine until you open a post and then it seems the post is to wide for the container and forces the sidebar underneath, it may be something to do with post width? or the comment section?

 

I could also be totally wrong but its worth a shot?

Ooh ok, I've figured out what it is, but not how to fix it yet.

 

For some reason on the posts page, the titles aren't wrapping so:

 

Button badges that look like flowers…nice!

 

Is all on one line and longer than the width of the column, it's throwing the column width off so that you get the typical widths don't add up float issue.

  • Author

brilliant - lots of things to investigate - thanks - I had no idea where to start looking. I had noticed that extra div tag but didn't know where to find it as I was looking at the source code of the page....will have a look into all these things now and see if I can fix it - cheers for the help.

No Problem, let us know how you get on would love to find out what the problem is.

  • Author

This is the code within the single.php file - no extra divs in it...

<?php get_header(); ?>

<div class="main">

<div class="col2">

	<div class="left">

		<div class="content">

			<?php if (have_posts()) : ?>
			<?php while (have_posts()) : the_post(); ?>
			<div class="post" id="post-<?php the_ID(); ?>">

			<h1><?php the_title(); ?></h1>

			<div class="descr"><?php the_time('F jS, Y') ?> by <?php the_author() ?>
<?php edit_post_link('Edit post',' ~ ',''); ?></div>

			<div class="entry">

				<?php the_content('Read the rest of this entry »'); ?>

			</div>

			<p class="info">Posted in <?php the_category(', ') ?></p>

		</div>

		<?php comments_template(); ?>

		<?php endwhile; ?>

		<p align="center"><?php next_posts_link('« Previous Entries') ?> 
<?php previous_posts_link('Next Entries »') ?></p>

		<?php else : ?>

		<h1>Not Found</h1>

		<p>Sorry, but you are looking for something that isn't here.</p>

		<?php endif; ?>

	</div>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

 

At the bottom there are 2 PHP bits to get the sidebar and the footer - so I'm guessing the extra div is within them...but when I check out the source code of the site the only time the extra div appears is when you're looking at a post - all the other section [home, archives, categories] are all fine...so this makes me think that the extra div isn't within the sidebar or the footer. Maybe I need to create an HTML page and slot all the bits together within that and find the error that way - or is that complicating the matter - is there an easier way to so this?

  • Author

Now I'm confused...

 

I created a blank HTML file and pasted into that the single.php code. I then took the header.php code and pasted that where <?php get_header(); ?> occured and did the same with the sidebar and footer.

 

I then went through the HTML and I cannot find an extra div tag that is surplus to requirements. So not sure where it's coming from?????

You didn't put any div tags in the actual content of the post did you?

  • Author

no - I don't think so - just content within paragraph tags

Ok, this is really random, but are all of your files saved with the same charset? Unicode/ANSI/UTF-8 whatever?

 

I'm just thinking if you opened and edited one of the .php files and not another that could cause an issue, maybe?

  • Author

I don't know - as I've done all the editing online witihin the wordpress admin thing.

 

maybe what I should do is reload the original template and see if the error exists there and if not compare templates old and new and find how I've messed it up. It's only something that I've noticed happening recently, so it's bound to be something I've added.

I've found the piece of css which is causing the issue, but not the rogue div!

 

In your stylesheet under /*misc*/ the bottom line is: .col2 .right {width: 200px;}

 

If you delete this on the normal blog page, the title stretches out and the sidebar goes under the content as it does on a post page. So it means that this style is not being applied on the post page.

 

I'm guessing that is due to the extra </div> tag?

Is the extra div not coming from whatever file adds the comments at the bottom of the post?

 

<?php comments_template(); ?>

  • Author

I don't know - I'm completely baffled - amazed that you can track this stuff down as I'm just scratching my head constantly.

 

I'll have a look at the 200px width thing and also the comments thing now and see whether that's where the annoying div is coming from.

Lol, I'm just using the web dev toolbar to delete bits of code and see what happens :)

 

Just try deleting a random </div> somewhere and see what happens lol. I'm pretty sure that the extra one is in the comments bit though as that is the major difference between the two pages.

 

There is also a useful tool for tracking down bugs called examdiff. It allows you to compare text files. I can't live without it: http://www.prestosoft.com/ps.asp?page=edp_examdiff

  • Author

This is doing my head in - I'm going back to paid work now and will look at this later. I'm going to compare the original template with my updated version later this evening and see if I can fix it.

 

Thanks for taking time out to have a look/play at/with the code.

 

It's helped me pinpoint what to look at.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.