SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast webchick's Avatar
    Join Date
    Jun 2004
    Location
    in front of a computer
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 2 column layout, with a twist

    I'm trying to make a *very* simple layout:

    Code:
    <div id="page">
      <div id="menu">
      <!-- menu -->
      </div>
      <div id="content">
      <!-- content -->
      </div>
    </div>
    
    #page
    +--------+----------------------------+
    | #menu  | #content                   |
    |        |                            |
    |        |                            |
    |        |                            |
    |        |                            |
    |        |                            |
    |        |                            |
    |        |                            |
    |        |                            |
    |        |                            |
    |        |                            |
    |        |                            |
    |        |                            |
    |        |                            |
    +--------+----------------------------+

    #menu should be hard-coded at 150px.
    #content should auto-stretch to take up the rest of the screen.

    The twist?

    #menu is secondary navigation that may or may not be on any given page. When it's *not* on a page, I'd like for the content area to stretch and take up the entire screen, thusly:

    Code:
    <div id="page">
      <div id="content">
      <!-- content -->
      </div>
    </div>
    
    #page
    +-------------------------------------+
    | #content                            |
    |                                     |
    |                                     |
    |                                     |
    |                                     |
    |                                     |
    |                                     |
    |                                     |
    |                                     |
    |                                     |
    |                                     |
    |                                     |
    |                                     |
    |                                     |
    +-------------------------------------+
    I initially thought, "Simple! I'll just float both columns left!" which works beautifully in Internet Explorer, but falls flat on its face with Firefox/Opera (the menu always appears *above* the content).

    All solutions I've seen either have you hard-coding the width of both the menu and the content area (either in percentages or in pixels), or hard-coding the size of the lefthand margin. When the menu is missing, this either causes a big gap to appear where the menu used to be, or causes the content to be shrunk down to its normal size on the page, rather than stretching to the screen width.

    Hoping I'm missing something stupid... thanks in advance for any help.
    <?$a='496620796f752063616e2072656164207468697320796f7527726520'.
    '616c6d6f7374206173206269672061206765656b206173204920616d203b29'
    ;$b=explode("\n",chunk_split($a,2));$c='';for($i=0;$i<count($b)
    -1;$i++){$c.=chr(base_convert($b[$i],16,10));}echo nl2br($c);?>

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

    Well I'd probably do something like this but it may not be what you want

    On the pages where the menu is removed set an id in the body tag.
    Code:
    <body id="nomenu">
    Then you can address the left margin of content like this.
    Code:
    #content {margin-left:150px}/*normal pages get this*/
    #menu {width:150px;float:left}/*normal pages get this*/
    body#nomenu #content {margin-left:0}/* nomenu pages get this*/
    body#nomenu #menu{display:none}/*nomenu pages get this*/
    I hope thats the sort of thing you were looking for

    Paul

  3. #3
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webchick
    I initially thought, "Simple! I'll just float both columns left!" which works beautifully in Internet Explorer, but falls flat on its face with Firefox/Opera (the menu always appears *above* the content).
    Well technically it looks how it's supposed to in Firefox and Opera, but because of IE's incorrect box model the two floats seem smaller than they really are (according to the correct box model) and that's why they 'fit' in IE and not in Firefox.

    I assume you're developing in IE and then checking everything in Firefox and other browsers? It's probably a better idea to test in Firefox, or some standards compliant browser, and then test in IE and make any necessary hacks/changes.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by maxor
    Well technically it looks how it's supposed to in Firefox and Opera, but because of IE's incorrect box model the two floats seem smaller than they really are (according to the correct box model) and that's why they 'fit' in IE and not in Firefox.
    I think its more a case of floating the content without a width that stops the layout working in firefox . The float then takes up 100% and won't fit alongside something else. Floats should always have widths unless they are replaced elements such as images where they have intrinsic width.

    Paul
    Edit:


    lol - I'm talking rubbish again

    It seems that if you float the content next to the left float it will in fact float alongside but it won't stretch to the whole 100% but collapse to content width when there is no specified width. However when there is enough content to take up the whole line then mozilla will keep expanding to 100%and drop the float below but ie will wrap and stay alongside the float.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    #left {float:left;width:150px;height:200px;background:red}
    #right {float:left;background:blue;}
    </style>
    </head>
    <body>
    <div id="left">Left</div>
    <div id="right">Right</div>
    </body>
    </html>
    Obviously you could use this method to put content alongside the left column but you couldn't have a full width background on the content as it will shrinkwrap to the content.

  5. #5
    SitePoint Enthusiast webchick's Avatar
    Join Date
    Jun 2004
    Location
    in front of a computer
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Thanks!

    Thanks a lot, Paul! You're right that that's not quite the solution I was hoping for, but it should work well nonetheless. When these pages are dynamically generated I'll just add the id attribute to the <body> tag on those without the menu.

    Quote Originally Posted by maxor
    I assume you're developing in IE and then checking everything in Firefox and other browsers?
    Actually, the opposite is true... But I thought I was going crazy because I have used float: left; on layouts like this before, and couldn't figure out for the life of me why it wasn't working this time. I guess I had always specified a width for both columns in the past.

    Quote Originally Posted by Paul O'B
    It seems that if you float the content next to the left float it will in fact float alongside but it won't stretch to the whole 100% but collapse to content width when there is no specified width. However when there is enough content to take up the whole line then mozilla will keep expanding to 100%and drop the float below but ie will wrap and stay alongside the float.
    Very interesting! Yeah, when I replace 3 paragraphs of "Lorem ipsum..." with "Insert content here" it works beautifully! ;P Thanks again for the help!
    <?$a='496620796f752063616e2072656164207468697320796f7527726520'.
    '616c6d6f7374206173206269672061206765656b206173204920616d203b29'
    ;$b=explode("\n",chunk_split($a,2));$c='';for($i=0;$i<count($b)
    -1;$i++){$c.=chr(base_convert($b[$i],16,10));}echo nl2br($c);?>


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
  •