SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Two Columns: Height or Margin?

    I'm helping a friend learn web design, and we're working on a two column layout. It goes something like this:

    HTML Code:
    <div id="first_column"> ... </div>
    <div id="second_column"> ... </div>
    ...with the CSS:

    Code css:
    #first_column {
    	width:300px;
    	float:left;
    }

    Simple stuff. Then the content in #second_column got to be bigger than the content in #first_column. Again, no problem, just give #second_column a 300px margin-left.

    But then they asked why not just give #first_column an explicit height? I didn't have an answer, and so I've come here. I think the reason I do margins is just because that's how I learned it.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You rarely want to give containers that hold fluid content a height because that means the element can never grow and if a user resizes the text then the layout breaks.

    Content on a site is ever changing and you want the element to accommodate one word or a thousand words without having to do anything different. If you work on an assumption that one column will always be longer then that's a fragile assumption that will break at the first opportunity.

    There are many ways to make two columns and in a fixed width layout floating both columns with a specific width is the easiest.

    In a fluid layout you can float the left column and that give the right column a margin-left to clear the float but it does suffer from the 3px jog in iE6 although that is a diminishing problem these days.

    You could also just float the left column and then give the second column overflow:hidden and it will automatically form a rectangular box to the side of the float.(IE6 would need to have haslayout on the element though for this to work). This method is no good if you want visible layout or if you don't want the whole block to wrap under at small screen sizes.

    (Not forgetting that for ie8 and other modern browsers you could use the display:table properties for columns or perhaps display:inline-block but they are not without bugs also.)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •