Forums

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

<div id="sidebar">

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

<div id="pagewrap">

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 id="pagewrap">

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

<div class="clear"></div>

So it would be


get_sidebar(); ?>
<div class="clear"></div>
<?php get_footer(); 
?>

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(); ?>
<div id="main-content">
	 <?php
		 /* 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' );
	?>
</div>

<?php get_sidebar(); ?>
<div class="clear"></div>
<?php get_footer(); 
?>

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


<div id="page-wrap" margin: 0 auto;>

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


<div id="page-wrap" style="margin: 0 auto;">

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.

smithaa99

Thanks dhechler, you and bob have both been a tremendous help.

I fixed the site.

What I did is took out the code for the post listing from the header, it was getting placed in a weird spot and I didn't need it:

http://www.swiftrunwayproductions.com

Huge thanks!

dhechler

It seems that you might want to center your page-wrap or un-center your header. They conflict with each other. Kinda confusing.

treehouse : what would you like to learn today?

Forums

Wordpress PHP Alignment