CODEWITHSUNDEEP
cssresponsive-design
ansarob
ansarob

Reputation: 825

Basic Responsive Design Issue

Having trouble with just some basic responsive design. I've checked my math a number of times but I can't figure out why the left and right sections aren't lining up. It seems to be an issue with the padding:

http://jsfiddle.net/J3Rx3/

* {
    margin: 0;
    padding: 0;
    text-decoration: none; 
    list-style-type: none;
    border: none;
}

body { 
  background-color: #ffffff; 
  color: #2C2C2C; 
  font: normal 100% Cambria, Georgia, serif;
}

#container {
    background-color: gray;
    margin: 0 auto;
    width: 90%; /* 960px */
}

    #left {
        background-color: #cccccc;
        float: left;
        padding: 0 5.5555556%; /* 10 / 180 */
        width: 18.75%; /* 180 / 960 */
    }

    #right {
        background-color: #999999;
        float: right;
        padding: 0 01.3157895%; /* 10 / 760 */
        width: 79.166667%; /* 760 / 960 */
    }

h1 {
  font-size: 1.5em; /* 24px / 16px */
  font-style: italic;
  font-weight: normal;
}

h1 a {
  color: #747474;
  font: bold 0.458333333333333em Calibri, Optima, Arial, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
}


    <div id="left">

        <ul>
            <li><a href="">Nav Item 1</a></li>
            <li><a href="">Nav Item 2</a></li>
            <li><a href="">Nav Item 3</a></li>
        </ul>


    </div>

    <div id="right">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</div>

Upvotes: 0

Views: 64

Answers (3)

brouxhaha
brouxhaha

Reputation: 4093

If you add box-sizing: border-box; (a savior when it comes to responsive design) to your * declaration, you can just use width: 20%; and width: 80% for your divs, then the padding will be included in, and won't add to, the width calculation.

I should also add that you can mix different units of measure. If you use percentages for width, you can use px or em for padding.

DEMO

Upvotes: 1

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

I am pretty sure you can use calc() to avoid those calculations. Here is PEN which simulates a similar example to what you are trying to achieve.

calc() automatically takes care of the calculations for you.

#left{
    float:left;
    width:calc(20% - 10px); /*20% minus the margin on both sides*/
    margin:5px;
    display:block;
}
#right{
    float:left;
    display:block;
    width:calc(80% - 10px); /*80% minus the margin on both sides*/
    margin:5px;
}

NOTE: operator in calc() needs to be surrounded by whitespace.

Upvotes: 0

EWit
EWit

Reputation: 1994

The padding as described in:

#left {
    background-color: #cccccc;
    float: left;
    padding: 0 5.5555556%; /* 10 / 180 */
    width: 18.75%; /* 180 / 960 */
}

Is incorrect. It's not 10/180 but 10/960, or just plain 0. The padding in percentages is relative to the parent and not the object itself. Use: 

#left {
    background-color: #cccccc;
    float: left;
    padding: 0 0.0104%; /* 10 / 960  or just leave it out.*/
    width: 18.75%; /* 180 / 960 */
}

Update:

Also the padding on the right box is incorrect. padding: 0 01.3157895%; should be padding: 0 0.013157895%; the decimal seperator is two places too far to the right. But it makes the same mistake as the previous and should actually be 10/960 instead of 760. or 0.0104%. But at those small numbers it doesn't really matter.

Upvotes: 0

Related Questions