SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)

    Elastic Layout - Problems

    Hey all. So I diagrammed everything for my site. Widths, locations, etc.

    The thing is, when I was planning it, I based it off the fact that 16px = 1 em usually. So then I just said to myself, "I want the navbar to be 80 px high...so that's 5em." It ended up just pretty much being a fixed width layout - just in em. I'm wondering if that's a bad idea? I literally made a fixed-width layout then switched to em.

    Am I doing this wrong?

    Thanks.
    ~TehYoyo

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It depends what you want to achieve

    By substituting pixels for ems you have in fact made another fixed width site except that it will expand and contract depending on users settings which is a good thing. However it does not address the issue of screen width and what the site looks like on smaller or larger devices than the one you designed it for.

    You should really be designing with min-width and max-width in mind so that the page can grow and contract depending on screen size. Of course that means being careful with how the elements are laid out so that they can ebb and flow with the screen size nicely.

    You could set a max-width of say 61em and use margin:auto so that it centers on screen.

    e.g.
    Code:
    #outer{
    	min-width:760px;
    	max-width:61em;
    	width:80%;
    	margin:auto;
    }
    Fluid/elastic sites present some design challenges but as long as you don't try to constrain everything into little boxes then you should be ok.

  3. #3
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Right now my width is 60 em. I was planning on having max-width maybe 85%? And min-width probably 760px?

    Should I set my width in % and then define min in px and max in em?

    ~TehYoyo

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    Right now my width is 60 em. I was planning on having max-width maybe 85%? And min-width probably 760px?

    Should I set my width in % and then define min in px and max in em?

    ~TehYoyo
    In this case width and max-width values are interchangeable in that you can either say width :60em and max-width:85% or max-width:60em and width 85%. The result will be the same and the width will be whatever is the smallest.

    I usually set the min-width in pixels but ems would be ok also. It just means that the actual pixel width would depend on the font-size if you use ems so the minimum size of the layout will be smaller or larger as a result. Usually the min-width of a page is determined by the largest element in that section and it usually turns out to be an image or something similar which is sized in pixels so you would need to match it with a pixel size rather than ems.

  5. #5
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    OK. I get what you're saying. My main concern is that I pretty much made a fixed-width layout then converted it to ems. Is that a bad thing? Will it break?

    ~TehYoyo

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    OK. I get what you're saying. My main concern is that I pretty much made a fixed-width layout then converted it to ems. Is that a bad thing? Will it break?

    ~TehYoyo
    If done correctly, of course not . Take a stab at converting and we will be here should you get tripped up by something .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    OK. Thanks a lot. I'll continue as I am doing!

    Forward, thy valiant self!

    ~TehYoyo


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
  •