More css help please

Mark M

Mark M

Mark M

Soldato
Joined
6 Jan 2006
Posts
3,423
Location
Newcastle upon Tyne
Got a wordpress blog sort of up and running but when you select the 2 column layout it doesnt line up.

Example here

I believe its something to do with the width and the padding but Ive tried to work out the correct width but I sadly cant crack it.

Here is the css (think its the correct section of css rather than copying the whole lot) if anyone can shed any light on it?

Code: 
LAYOUT: Two columns
DESCRIPTION: Two-column fixed layout with one sidebar right of content
*/

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 1024px;
}
#content {
	margin: 0 280px 0 20px;
	}
#primary,
#secondary {
	float: right;
	overflow: hidden;
	width: 220px;
}
#secondary {
	clear: right;
}
#footer {
	clear: both;
	width: 100%;

If you need to see the whole css file then here is the link

Hopefully it should be something obvious for someone?

Thanks
 
Is that a ready built theme you're using, or is it something you have created?

Theres a lot of entwining DIVs in there that coud have an affect on the alignment.
 
Mark M said:
Erm, I sort of pulled it together myself...
Click to expand...

Hehe, you should try using Starkers Theme for Wordpress.

Its basically a naked theme with all the crap and CSS erased. You get complete control over how you style it. Its much quicker using that to build a theme rather than chewing your way thru all that crap in a default theme.
 
djkav said:
Hehe, you should try using Starkers Theme for Wordpress.

Its basically a naked theme with all the crap and CSS erased. You get complete control over how you style it. Its much quicker using that to build a theme rather than chewing your way thru all that crap in a default theme.
Click to expand...

That is amazing, why didn't I know about it before. I've always just stripped out the default theme my self and then altered it. Shall defiantly be trying it on my next site.
 
Wow, that would take me months to sort out and Id be on here every hour asking for help haha

I only added 3 divs on top of the twentytwenty theme, how have I broke it??
 
Mark M said:
Wow, that would take me months to sort out and Id be on here every hour asking for help haha

I only added 3 divs on top of the twentytwenty theme, how have I broke it??
Click to expand...

Im still trying to work out which part is out of line :P The top part (2 black sections and the big silver pic) or the bottom white section... hmmm... Im guessing its the top part.
 
Yeah the logo navbar etc are 20px to the right?

I removed the 20px padding on the single column css and it works, example here but it looks rubbish as it needs the padding to get the text away from the left edge!
 
Edward01 said:
That is amazing, why didn't I know about it before. I've always just stripped out the default theme my self and then altered it. Shall defiantly be trying it on my next site.
Click to expand...

Mark M said:
Wow, that would take me months to sort out and Id be on here every hour asking for help haha

I only added 3 divs on top of the twentytwenty theme, how have I broke it??
Click to expand...

Even better, Chris Coyier has done a design for wordpress video tutorial using starkers theme :)

After a couple of hours, everything becomes extremely clear :)
 
Mark M said:
Yeah the logo navbar etc are 20px to the right?

I removed the 20px padding on the single column css and it works, example here but it looks rubbish as it needs the padding to get the text away from the left edge!
Click to expand...

Have you tried putting padding on: div id="container"

The class="one-column" is a class so it could be reused elsewhere which would upset the alignment whenever that class is used. IDs can only be used once per page.
 
Last edited:
The divs seem a bit messed up; it's using the id container multiple times (it should be made into a class for reuse, unless this is some new CSS3 thing) and the header div spans the whole page, surely the content should be in its own div and outside of the header? If you were to do that then you could style just the content (rather than the header) and nudge it properly so it's inline.

The HTML seems to be in the wrong order as well, the posts appear above the header (in the HTML) which is probably causing problems, as the CSS is having to use position: absolute to then nudge the header items back up the the top of the page. If you use the left attribute where you have the position absolute and top attributes (to move the header items) you can nudge the header graphic to the left and have it line up but it's not really the best way to do it.

Adding this will shift it so it's all inline: (only tested in Firefox), but it's actually slightly off-centre still (but no one would notice):
#logo,#navbar,#banner { left:200px }

The default Wordpress theme from v3 looks quite similar to what you need.
 
Last edited:
A-ha.. Your navigation and logo DIVs appear in the HTML: source below the white content section. I have a feeling that they are adding up the padding twice. !st from the Container DIV as it appears above, then also from the sections that are supposed to be above.

Move your 3 sections 2 black parts and the logo into the header.php and above the main content. See if that helps.
 
Ah! I wondered if they were in the wrong place!

Will shift them over now and report back!

Pho-that is the default theme, just took out the logo and replaced it my own.
 
Well that nearly worked! Now it lines up but its also duplicating the images 20px to the right!

Think I'll stick to basic html haha
 
Haha, meh Im going to be, perhaps it will fix itself by the morning?!

Thanks for the help (so far ;) ) though

Mark
 
Just changed it back, but it was on all the pages. Will give it a bash tomorrow if your about.
 
Mark M said:
Pho-that is the default theme, just took out the logo and replaced it my own.
Click to expand...

Are you sure? I have a test Wordpress site setup using v3.1 alpha (which will probably be a bit different to the one you have admittedly) however all the HTML is in the right order and everything lines up.

Might be an idea to download the latest Wordpress release and copy \wp-content\themes\twentyten to \wp-content\themes\twentyten_original (or something) on your site and try switching to it and seeing if it makes a difference.
 
You must log in or register to reply here.
Back
Top Bottom