The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Page width – cant get normally paddings

  • # November 27, 2012 at 4:18 am

    Hello and sorry. Question is really easy, but after reading your web site and book, i did not get answer for it. So..
    I want to make web site which have in psd file width – 1024 and left&right paddings – 38..
    But after a lot of trying i cant to make relative design, where in size of window (1024px) will be same paddings..

    My CSS:
    #page {
    width: 92,578125%; (948/1024)
    margin: 20px auto; – is it just editing top margin?)
    background: #ff00ff;

    What i have-

    Padding looks like-

    Sorry for my english and hope you understood what i meant ;)

    # November 27, 2012 at 5:00 am

    Firstly, you should probably be using a reset or normalise css.

    For a width as specified for the ‘page’ you should have

    page {
    padding:0 38px;

    However, you should be aware that **normally** padding is ADDED to a specified width so the ACTUAL width will be 1100px.

    To get round this you have to use change the way this is done with

    * {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */

    # November 27, 2012 at 5:08 am

    I didn’t understand your issue correctly, but I believe, adding the float property may solve your issue. It will force layout to take padding or margin whatever you want to add.

    # November 27, 2012 at 5:12 am

    You wouldn’t float a whole page!

    And in any case…I don’t think that’s his issue.

    Here’s an example of the difference:

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed