WordPress PHP Alignment

[smithaa99]

Okay, so I am starting out coding PHP and have been using CSS Tricks “Creating a Website” 1-3 and Starkers as a template. I have already successfully coded one site, but the layout is a bit different. Basically I want to align top of the sidebar with the bottom of the header line.

This is the current state of Swift Runway Productions in WordPress:
http://www.swiftrunwayproductions.com

This is the desired state of Swift Runway Productions in HTML/CSS:
http://www.adamanthonysmith.com/SRP/index.html

Please help!

Thanks,
Adam

[dhechler]

Looks like your

is ending before the rest of your sidebar.php content.

Also try floating your sidebar div left instead of right.

[dhechler]

Also, looking closer at your code, your

closes before you add your sidebar.

Try also adding

margin: 0 auto;

To your pagewrap div

[smithaa99]

Hey dhechler, that was really helpful actually. Thank you!

What I’m having a hard time figuring out though is where this extra tag is so I can delete it and put it at the beginning of the footer. Where did you see it?

[dhechler]

are you talking about your

div?

That was my mistake. I looked at your code wrong. It’s not that your closing tag is in the wrong spot. It’s that you didnt clear the float after closing your div. Let’s do this.
In your css write this.

.clear	 { clear: both; }

Then after your

get_sidebar();

in your index.php, put this in

So it would be

get_sidebar(); ?>




?>

That should fix your float issues.

Also, i noticed your content div had padding: 30px; which is causing the sidebar not to float next to the content as in your HTML document.
You could try

padding: 30px 0;

[dhechler]

Also, if you wouldn’t mind just grabbing all of your index.php and posting it at
http://www.pastebin.com and pasting that link here, I could take a look at it and help out further if you would like.

[smithaa99]

http://pastebin.com/HramyPbc

That’s where the index.php was uploaded

[dhechler]

Ok, this helps. Try this

get_header(); ?>




/* Run the loop to output the posts.

* If you want to overload this in a child theme then include a file

* called loop-index.php and that will be used instead.

*/

get_template_part( 'loop', 'index' );

?>










?>

This should solve some issues and get your posts inside your main content div.

[dhechler]

Also, go to your style.css and change your #page-wrap css to this just to help with centering the page and width.

#page-wrap {

margin: 0px auto;

width: 940px;

}

and your main-content div should be 700px width.

[smithaa99]

http://www.swiftrunwayproductions.com

This is what it looks like now. I floated the whole page wrap left, so it would align the borders.

Could it be that I need to fit the sidebar div WITHIN the main-content div and omit the sidebar outside of the container?

[dhechler]

don’t float your page-wrap left. It screws up the margin: 0 auto; and doesn’t center your content on the page.

Also, make your page-wrap width 941px; instead of 940. That will pull your sidebar up. Or you can go the opposite direction and make your sidebar width 239px; since your 1px border on your main-content adds 1px to the width.

[smithaa99]

http://www.swiftrunwayproductions.com

The sidebar still doesn’t want to go up to the top.

It does look like the clear worked, however, because I was able to add another navigation onto the footer.

[Bob]

Thats because you’ve added 20px padding around your sidebar div. Try replacing the padding you have there now with:

padding: 0 20px 20px 20px;

[smithaa99]

Okay, so here’s what I think might fix it:

How do I get rid of the PHP where it says this?

Swift Runway Productions
Just another WordPress site
Skip to content
Home
BIOGRAPHY
EVENTS
GALLERY
PRESS
SERVICES

Updated site with Lorem Ipsum post:

http://www.swiftrunwayproductions.com

[dhechler]

Heres what i found.

You need to add margin: 0 auto; to your #page-wrap in your style.css file. Right now you have it as

If you want to do it that way (inline styling) then you need to do this

but it would be better to add this into your css as

#page-wrap{

width: 1024px;

margin: 0 auto;

}

That should fix what you want.

[Author]

Posts