[Solved] Bars all the way, but content in the middle

[TheN00b]

Hi Guys

I’m working on a site that will have bars running horizontal along the whole length of the page (kinda like that orange and bark brown bar at the top of CSS Tricks).

I started the website without them bars in mind, and once it had finished, I decided the site will look much nicer with the bars running the whole length of the page. So here I am attempting this, but I am stuck.

I don’t know how to get rid of my #wrapper div, yet have all the content centered. I’d greatly appreciate any help.

Thank You.

[tafkanator]

Im not very sure what you are thinking but if I understand you want your bars as a background why not change the background in body tag in css?

[TheN00b]

Hi Tafkanator

Plz check know, you’ll know Exactly what I mean ! See how all the content is to one side. I want everything to be in the middle like it is here on CSS Tricks.

Please help :(

[tafkanator]

ok. here is what i did. You still have to change code, place right widths, take my green background away and so on..

Code:

• HOME
• ABOUT
• CONTACT

• Home
• About
• Portfolio
• Links
• Contact

• 
• 
• 

Sample Blog Entry

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit

• 5 Comments
• |
• Bookmark this article
• |
• Posted on: 17 January 2010

• 1
• 2
• 3
• 4
• 5
• Next
• Previous

Page 1 of 25

Copyright © 2010 KurdWD. All rights reserved.

Short version of the change is: I created a div around sidebar and content div, gave fixed width and margin:0 auto. Because you used floats inside the div i cleared floats before the closing div. That easy! :)

[TheN00b]

Hi

Thanks Tafkanator, I see you that you have placed a div starting just before the Sidebar and Ending after the content.

However, I think I will be right in saying this Div will not center the stuff in the header .. right ?

I mean like the search box, the logo, the navigation ..etc ! how would they get to the center ?

Thanks

[tafkanator]

Make another div inside the header. Give it a fixwd width and margin:0 auto. then place all content inside it. Like so:

Code:

• HOME
• ABOUT
• CONTACT

• Home
• About
• Portfolio
• Links
• Contact

(not sure if clear div is needed this time)

[TheN00b]

Thanks Tafkanator

I was wondering … if that is the case, can’t I have just on wrapper div around the whole thing ? i.e. around the header, sidebar and content and footer ?

Wouldn’t that work ?

Thanks

[TheN00b]

ahh now it is clear.

Thanks :) I shall give it my BEST SHOT. :)

Will let you know how I got on.

Thanks Guys

[TheN00b]

Woo Hoo Thanks Guys

It worked :D Thank You Soo Much :)

Now I have another issue, on photoshop the design is so that the Sidebar extends all the way to the bottom, to touch the footer.

How can I acheive this ?

Thank You.

[TheN00b]

anyone ?

[TheN00b]

Hi Virtual

No it doesn’t ! I had set a specific height for it on the site, but as you can see if I make more posts, it does not extend ! :(

[TheN00b]

Hi Virtual

I’m using FireFox (3.6) here is a screenshot of what I got !

[img]http://i45.tinypic.com/mlk2sy.jpg[/img]

Thanks

[tafkanator]

Hi!

Sry for not posting sooner. Have been busy lately. Ill give quick guide how to do it. Dont use height attribute. Here is a hint of how to do it right. http://css-tricks.com/video-screencasts/5-columns-of-equal-height-super-simple-two-column-layout/

[TheN00b]

Thanks Guys

That worked perfectly :)

[Author]

Posts