SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Womble MarkB's Avatar
    Join Date
    May 2001
    Location
    London, UK
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Movinhg column depending on screen width

    Hi guys

    How do I do the following?

    I have 2 set-width columns. I want them to display side-by-side if there is room, otherwise I want them to be displayed vertically (neatly).

    Should this be achievable using simple floats?

    Thanks
    Mark

  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)
    Should this be achievable using simple floats?
    Unless I've misunderstood you then this is the default behaviour of floats anyway

    Just float your columns side by side and when the screen is resized one column will drop below the other. Of course it does depend on what else you have going on in that page.

    example:
    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">
    #column1, #column2{
     float:left;
     width:300px;
     border:1px solid #000;
     background:red;
     margin-left:100px;
     display:inline;/*ie double margin fix*/
    }
    #column2 {background:green}
    </style>
    </head>
    <body>
    <div id="column1"> 
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
    </div>
    <div id="column2"> 
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
      <p>some text</p>
    </div>
    </body>
    </html>
    Paul

  3. #3
    Womble MarkB's Avatar
    Join Date
    May 2001
    Location
    London, UK
    Posts
    234
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul My brain was a bit fried, so thanks for the clarity


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
  •