SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Bangkok
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Simple 2-Col layout problems...

    Hi,

    I'm trying to constuct what, in real terms, is a simplistic page layout using CSS-P.

    Maybe I'm being stupid - but here goes...

    I am trying to constuct a page as follows:

    header (viewport width)
    leftMenu (width 150px)
    content (as wide as necessary) - top aligned with top of leftMenu
    footer (viewport width) - underneath the "tallest" of "Left Menu" and "Content"

    Easy huh?

    But, as soon as any content is greater than [viewportWidth - 150] (150=width of leftMenu), the content (depending, of course, on the CSS implementation) either slips below the leftMenu, disappears altogether(?), or has the footer right underneath the header with everything else below.

    I could do this with a simple table construct in under a minute. So please - CSS gurus, can you advise me how to achieve this in CSS, as it seems impossible (10 hours+)?

    I thought CSS was supposed to make design easy; If I'm not missing something and CSS can't achieve this (common) basic layout - what hope is there?

    All comments truly appreciated,
    HEX.

  2. #2
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds like you need Paul O'B's 2 column layout (there is a sticky thread in this forum):
    http://www.pmob.co.uk/temp/2colfixedtest_4.htm
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Bangkok
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Has the same problem...

    Pacman2504,

    Thanks for the suggestion - but that layout suffers the same problem as most of mine. Any content wider than the remaining viewport content space gets pushed vertically below anything in the left menu - this is the major problem that I cannot get round.

    It is very important that wide content (images, tables, etc.) be accomodated in my design and that it remains flush underneath the header with horizontal scrolling as needed. Currently clients with low-res (800x600) just think they've hit a blank page.

    It is obviously a much better starting point than any of my previous attempts though.

    I can almost acheive the required effect with absolute positioning but then the footer seems to go wherever it feels like. I don't really want to use JS to position the footer, I'd rather use a simple table.

    Maybe I could use some overflow property on the content section (not tried this yet) - but I would definately prefer the default horizontal slider of the browser.

    I'm mostly looking for a definitive answer as to whether this is possible using CSS.

    Thanks again,
    HEX.

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

    Thanks for the link pacman but I don't think Hextac is looking for something that complicated anyway.

    It seems to me as though he;s just looking for this basic layout.
    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 type="text/css">
    #header{background:yellow}
    #left {
     width:150px;
     background:red;
     float:left;
    }
    #content {margin-left:150px;background:green;}
    #footer{clear:both;background:blue}
    </style>
    </head>
    <body>
    <h1 id="header">Header</h1>
    <div id="left"> 
      <p>Left</p>
      <p>Left</p>
      <p>Left</p>
    </div>
    <div id="content"> 
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
    <div id="footer">Footer</div>
    </body>
    </html>
    The content is kept clear of the menu by specifying a margin-left (couldn't be simpler).

    Quote Originally Posted by hextac
    I thought CSS was supposed to make design easy
    Who told you that

    CSS is very powerful but does have rules that have to be learned thorougly before you can say its easy. Unlike tables, css covers a wide varierty of techniques to perform different tasks all with their own sets of rules.

    Once you have applied the css and created the layout then controlling the design becomes easier compared to table layouts etc. Changing the look and layout of the site becomes easy as you can change ons css file instead of maybe hundreds of html page etc.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Bangkok
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Almost...

    Cheers Paul,

    That works pretty well in firefox (some strangeness with the background-color ending at screen-width), and is almost identical to one (of the 40 or so) things I've already tried but IE still does the usual - pushes the main content down the screen until after the left content.

    The weird thing is that only the actual object (eg image, table) that is wider than the screen gets forced down. Any preceding text that fits in the remaining viewport space remains (as wanted) flush with the bottom of the header.

    Maybe there a simple hack for IE to stop it, or am I overlooking some necessary CSS in the image/table?

    Thanks,
    HEX

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,300
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Maybe there a simple hack for IE to stop it, or am I overlooking some necessary CSS in the image/table?
    I'm going to need to see some code to see what you are ectually doing.

    In my examle the content is alongside and level with the left menu. The only reason it will be drop is if you put an element into the content that is wider than the available space such as a large image or table.

    I'll need to see your code to give you an answer one way or the other. If its the float dropping because of a large image then theres a couple of things you can try but I will need to see the code to advise

    Paul

  7. #7
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Bangkok
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Sorry it took so long, maybe my initial post wasn't clear enough. The major problem stems from a content element larger than the available screen (after the leftmenu).

    On IE (at least - I havent got past Firefox and IE yet) a wide element like a picture or table will be pushed below all content in the left menu. Using most methods of float-based 2-Column layouts. If I use absolute positioning I can get it to work(ish) but the footer goes all over the place.

    You can replicate the situation using your previous example just place a short sentence of normal text in the "content" div, then immediately following that place a huge image or table (maybe make the leftMenu content a bit larger too)

    eg.
    Code:
    <div id="content"> 
    <p>blah blah blah</p>
    <img src="/image/image.gif" width="2000" />
    </div>
    The picture will be pushed until level with the base of the left content.

    Even stranger is that sometimes the "blah blah blah" will disappear (in IE again)... But thats another problem.

    Cheers,
    HEX.

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

    I think you are talking about ie/s float drop problem.

    When the content is too large then ie will try and find room underneath the adjacent content. However if there is a mrgin set then it has nowhere to go and just sits there below the left column but still to the side. Other browsers are not so stupid.

    If you have a look at the FAQ on floats then there is a solution you can try that works in some cases. Or you can use a more complicated method as below which changes the source order with a couple of nestings and avooids the problem.

    Here's an example although its not for the faint hearted.

    http://www.pmob.co.uk/temp/2colum_so...der_image3.htm

    Of course you can simplify it if you don't want the equalising columns and 100% footer etc.

    Hope that helps anyway.

    Paul

  9. #9
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Bangkok
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thanks

    Paul,

    Thanks for all your help - its a bit late here now (1:30 AM) so I'll try what you suggest tomorrow.

    I'll post any findings & conclusions here after that.

    Thanks again,
    HEX.


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
  •