SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Collapsible Page Layout

    Hey folks,

    I wanted to design a site where it expands / collapses depending on the individuals screen resolution. Basically, I have set the container to have side margins (left/right) of 50px, and it expands to within 50px of both sides dependent on the individuals resolution, however the problem occurs when I try to collapse (minimize) the browser window, it starts to push everything around / distort it all.

    What I am trying to achieve is a basically a "minimum" width if that makes sense. By minimum width, I mean the browser can expand / collapse as much as the person wants or can handle on their resolution, but at a certain point, I want it to stop from minimizing (around maybe 700px). So using the 700px example, say they were to minimize their window the site would begin to collapse, but after they reach a width of 700px, it wouldn't collapse anymore and they would begin to not see all of the content.

    How would I go about doing this?

    Thanks in advance,

    Elementax

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You can wrap all of your content in a div with left and right margins and set that div to min-width: 700px;

    Code:
    .wrapper {
      margin: 0 50px;
      min-width: 700px;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You can wrap all of your content in a div with left and right margins and set that div to min-width: 700px;

    Code:
    .wrapper {
      margin: 0 50px;
      min-width: 700px;
    }
    Thank you! That's exactly what I was looking for.

    Elementax


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
  •