www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] Responsive layout problem

  1. #1
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    184

    resolved [RESOLVED] Responsive layout problem

    I am trying to design a responsive website and have run into a problem right from the start.

    I am using the code from http://www.responsivegridsystem.com

    Here is code in question in my index file:
    <div id="wrapper">

    <div id="navcontainer">
    <div class="col span_12_of_12">
    <h3>Navigation</h3>
    </div>
    </div>

    <div id="headcontainer">

    <header>
    <div class="col span_12_of_12">
    <h3>Header</h3>
    </div>
    </header>
    </div>
    Here is code in question in my css file:
    #navcontainer {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    padding: 0px 0px 10px 0px;
    position: relative;
    color: #000;
    text-align: center;
    background-color: yellow;
    }


    #headcontainer {
    width: 100%;
    /*background: url(/images/headerback.png) no-repeat center top;*/
    }

    header {
    clear: both;
    height: 85px;
    width: 100%; /* 1000px / 1250px */
    font-size: 0.8125em; /* 13 / 16 */
    max-width: 92.3em; /* 1200px / 13 */
    margin: 0 auto;
    padding: 0px 0px 10px 0px;
    position: relative;
    color: #000;
    text-align: center;
    background-color: red;
    }

    I am attempting to make both the navigation and the header area the same width. The background colors are just to show the area taken by these two DIVs.

    I have been designing websites for some time now, but this is my first "responsive" design.

    Hopefully the problem is obvious to someone. I just have a mental block on this one.

    Edit: I just noticed the problem only show up on higher resolution monitors. The Navigation area extends out to 100% on very high width monitors, but the Banner area stops at 1200 pixel width.

    Lawrence
    Last edited by lkeeney; 04-30-2014 at 05:30 PM.
    Larry

  2. #2
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    184
    I solved my own problem.

    Once I got a pixel ruler and measured the maximum width of the banner area, I found it stopped expanding at 1200 pixels then I found the problem in the CSS code.
    Larry

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles