Geek asks and answers

Resolving CSS in responsive design

This simple HTML5 layout has a navigation bar on the left with body text placed next to it (using percentages rather than pixels for a flexible, responsive design - calculations in CSS comments).

http://www.wturrell.co.uk/stackoverflow/20110615-01.html

The widths of the elements inside the "page" div are up to 100%. I want to add an addition to certain elements, in this case nav. If I remove all the add-ons, they will float correctly, but more than 1 or 2 pixels of indentation (regardless of the units in which it is indicated), and it breaks. I don’t understand why this violates the layout, since its filling so uncertainly should not change the total size of the block?

What did I miss?

Update - solution: http://www.wturrell.co.uk/stackoverflow/20110615-02.html

(Element screen width = width plus border plus . Navigation should be nominal 200 pixels with a total of 20px padding on the right, so for fluid design width = 180/900 * 100 or 20%, indentation = 20/900 * 100 or 2.222%, and the main text remains 700/900 * 100 or 77.777%.)

+3
source share
4 answers

In the CSS box model , is paddingadded in widthto get the total size of the box. In your case, if you add up to 100% as a percentage of the width, even 1px will mean that the content is full.

​​ 1 2 .

+6

-, doctype . Quirks, Internet Explorer.

:

<!DOCTYPE html>

, @Alex Ciminian (padding width). width padding, :

box-sizing: border-box: https://developer.mozilla.org/en/CSS/box-sizing

, padding width:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

.: http://css-tricks.com/box-sizing/

: http://caniuse.com/css3-boxsizing - , IE6/7.

+7

@williant; Alex on the right padding & borderadds widthto the item. So, adjust widthaccording to padding.

CSS

#page nav {
    clear: both;
    display: inline;
    float: left;
    padding: 0 10% 0 0;
    width: 12.2222%;
}
+3
source

You can try to use box-sizing: border-box;or install max-width:100%and / or max-height:100%;.

The max-width and max-height css option is compatible with older versions of IE if you want to try and maintain compatibility.

EDIT:

Use the following code to use window size in browsers:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
+1
source

More articles:


All Articles