Grow your CSS skills. Land your dream job.

Creating Pages with Sidebars…

  • # July 11, 2008 at 12:32 am

    This isn’t exactly a help or troubleshooting thread and it’s probably a very simple situation for most (especially the CSS gurus) but Im curious as to how you guys create your content and sidebar elements. We see these everywhere, typically on a blog… an element full of content and then a sidebar to the left or right of it with site navigation, search, etc…

    I have two ways of creating these and Im not sure which way is most beneficial and/or semantic (Im still a CSS newb).
    So here are my two ways of doing it, which one do you use? Or please suggest and explain your own so everyone can see the various methods of creating these…

    You might want to whip out notepad and try these out so dont have to picture how the code actually displays, and add some borders to the CSS to make everything clear and visible.

    1.
    This is the most logical way I think, here is the HTML:

    Code:

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

    and here is the CSS:

    Code:
    #contentContainer{
    width:800px;
    }

    #contentContainerInside{
    margin:10px;
    }

    #mainContent{
    width:580px;
    float:left;
    }

    #sidebar{
    width:200px;
    float:right;
    }

    .clear{
    clear:both;
    }

    Simple enough right?

    2.
    This one I found in use on another website… it seems a bit less logical, but it definitely works.

    HTML:

    Code:

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

    here is my sidebar.

    CSS:

    Code:
    #contentWrapper{
    width:800px;
    }

    .withSidebar{
    float:left;
    width:600px;
    }

    #mainContent{
    margin:10px;
    }

    #sidebarContainer{
    background:white;
    float:right;
    width:200px;
    }

    #sidebarInside{
    margin:10px;
    }

    .clear{
    clear:both;
    }

    My question is, what exactly is the difference between the two and which one is superior? Are there any other methods out there that are even better than these two? How do you create your content and sidebars? Maybe Im over analyzing this and there is no major difference and I should just go with one, I tend to do that sometimes, but it’s good to hear what others think :). Looking forward to see what you guys have to say about this…

    # July 11, 2008 at 12:46 am

    These are both perfectly valid and actually very similar. This is usually the route I take for layout myself, using Floats to position things. Floats do have their weaknesses and quirks for sure, as you might have read in my recent article All About Floats. If you are looking for a totally different way to approach the problem, you could consider absolute positioning the main content area and sidebar. There is also "faux absolute positioning" which is becoming more popular lately, you can search for the A List Apart article on it if you are interested. I also think YUI grids makes use of this a bit.

    # July 11, 2008 at 1:19 am
    "chriscoyier" wrote:
    These are both perfectly valid and actually very similar. This is usually the route I take for layout myself, using Floats to position things. Floats do have their weaknesses and quirks for sure, as you might have read in my recent article All About Floats. If you are looking for a totally different way to approach the problem, you could consider absolute positioning the main content area and sidebar. There is also "faux absolute positioning" which is becoming more popular lately, you can search for the A List Apart article on it if you are interested. I also think YUI grids makes use of this a bit.

    Thanks for the fast reply Chris. Good to know that both methods are safe to use :).

    I looked up the faux absolute positioning article, which can be found here for anyone interested:
    http://www.alistapart.com/articles/faux … sitioning/

    Im going to play around with absolute positioning and see if I can figure that out for sidebars.

    # July 11, 2008 at 1:53 am

    I believe that second method is better because it leaves allowances for IE’s buggery when it comes to floated elements. It’s generally considered better practice, I believe, to not apply margins to block elements that are floated in one direction or the other.

    I use the second method – in terms of code "bloat" and in the minds of some who may not be thinking in the same terms as the developer, it does seem like extraneous code, but it’s a nice way to skate around problems with IE6. I think that you miiiiiiiiight also just apply the margins to all of the elements within the containing divs in the first element and be fine, but I’d imagine that would present more problems than it would solve in the style sheet. Let me stop speculating though, LOL.

    # July 13, 2008 at 9:13 pm
    "Erika" wrote:
    I believe that second method is better because it leaves allowances for IE’s buggery when it comes to floated elements. It’s generally considered better practice, I believe, to not apply margins to block elements that are floated in one direction or the other.

    Ah, yes. I think youre right about not using margins on floated elements. Nor are we supposed to add width to it and the second method takes care of that for us :).

    Ive decided to use the second method for the site Im working on. Maybe Ill post it up on the forumsonce it’s live. Thanks again…

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

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