SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Braveheart4's Avatar
    Join Date
    Nov 2005
    Location
    Macedonia
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Creating a Buletproof & Responsive Layout

    I'm at the beginning stages to start experimenting with an administration panel that needs to be flexible enough to fit variety of resolutions and platforms and be bulletproof enough to degrade gracefully on older browsers.

    I started with some bare-bone example, and I want to be sure that it does not breaks on older browsers, not even in IE 7.

    I have a header and footer that are always 100% width. The whole layout is fluid, so by default the secondary navigation needs to have a fixed width and sit on the left side, while the main area needs to fill the remaining width of the page. The main navigation should be 100% width and just above the header.

    When the resolution goes below 1000px (tablets and mobile devices) the secondary navigation should stack right below the main navigation, so the main area gets to be 100% width.

    When the site is browser an large screens, now it should get 3 column layout. The main navigation on the left, then the secondary navigation in the middle, and the main area to fit the remaining width.

    The HTML code I'm using:

    Code HTML4Strict:
    <header id="header">
    	Header
    </header>
     
    <nav id="nav-primary">
    	Primary navigation
    </nav>
     
    <nav id="nav-secondary">
    	Secondary navigation
    </nav>
     
    <div id="main">
    	Main section
    </div>
     
    <footer id="footer">
    	Footer
    </footer>


    The default CSS:

    Code CSS:
    #header {
    	background: #54616b;
    	color: #CCC;
    }
     
    #nav-primary {
    	background: #333;
    }
     
    #nav-secondary {
    	float: left;
    	width: 200px;
    	background: #eee;
    }
     
    #main {
    	margin-left: -200px;
    	background: #fff;
    }
     
    #footer {
    	clear: both;
    	background: #54616b;
    	color: #CCC;
    }


    And the media-queries CSS:

    Code CSS:
    @media (max-width: 1000px) {
     
    #nav-secondary {
    	float: none;
    	width: 100%;
    }
     
    #main {
    	margin-left: 0px;
    }
     
    }
     
     
    @media (min-width: 1260px) {
     
    #nav-primary {
    	float: left;
    	width: 80px;
    }
     
    #nav-secondary {
    	float: left;
    	width: 220px;
    }
     
    #main {
    	margin-left: -300px;
    }
     
    }

    Is there anything left that I need to include in the CSS in order to be sure it does not break on older browsers? Any tips are welcomed.
    Author at GraphicRiver

  2. #2
    SitePoint Addict Braveheart4's Avatar
    Join Date
    Nov 2005
    Location
    Macedonia
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just improved it, realizing that I'm making a mistake. Now I'm using negative margins as "margin-right: -200px;", and not "margin-left: -200px;", as I did the first time. Somehow it fixes some of the issues I'm facing, but I'm still not sure if this is the right way to go.

    Also I'm having problems with equal height column, so for now I'm using fixed height. I'm aware that it's not a good practice to rely on JavaScript to calculate which is the longest column, and make the same as the longest one, but it seem I can't find a pure CSS solution without extraneous CSS and bloated markup.
    Author at GraphicRiver

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Well you could try something like this

    Basically each column is child to a wrapper. That wrapper contains the floats via overflow or clearfix or whatever. Then you just set a background image to repeat-y. Clever really.

    And I was changing the viewport size over on my computer and it seems like the behavior you mentioned in the first post about wanting it to be 3 columns when width is available, then if it's less..blah blah etc etc. Seems to be working.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    This discussion from the other day should help with your responsive layout techniques.

    For the equal columns if you are just talking about the two fixed width left columns then just use a background image as Ryan suggested as no extra mark up is needed. Fixed heights should be avoided at all costs in most cases for text content.


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
  •