Grow your CSS skills. Land your dream job.

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

  • # February 16, 2010 at 7:20 pm

    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.

    # February 16, 2010 at 7:51 pm

    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?

    # February 16, 2010 at 8:13 pm

    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 :(

    # February 16, 2010 at 9:16 pm

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

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




    image of a city

    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

    Page 1 of 25


    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! :)

    # February 16, 2010 at 9:26 pm

    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

    # February 16, 2010 at 9:34 pm

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

    (not sure if clear div is needed this time)

    # February 17, 2010 at 10:07 am

    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

    # February 17, 2010 at 10:52 am

    If you put everything in a centered wrapper div with a fixed width, your header and footer bars will not stretch the full width of the browser, they will be contained in the wrapper. Do like Tafkanator suggested and then update the code in the site.

    # February 17, 2010 at 11:10 am

    ahh now it is clear.

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

    Will let you know how I got on.

    Thanks Guys

    # February 17, 2010 at 11:59 am

    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.

    # February 17, 2010 at 8:41 pm

    anyone ?

    # February 18, 2010 at 5:04 am

    I don’t understand what you mean, the grey sidebar does extend all the way down to the footer in IE7 and 8.

    # February 18, 2010 at 5:20 pm

    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 ! :(

    # February 19, 2010 at 5:10 am

    It does extend to the footer, which browser are you seeing the problem in?

    # February 19, 2010 at 10:51 am

    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

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".