padding causes overlap, fluid design?

Question

I am starting to get in creating websites, but There are some things i don't understand. For example:

I created a wrapperdiv. Inside it are three maindivs: header, content and footer. I gave the wrapperdiv a fixed size (1280px x 1024px) and set the content div to 2/3 of that size. The rest is 1/3. Now whenever i want to pad something inside my subs divs, it overlaps the wrapper div and i don't know how to fix it.

I decided to use percentages inside the wrapperdiv so that zooming and such works fluid when somebody looks up the website.

Any ideas on this? how i can do it better?

thanks!

Code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="pagewrapper">
    <div id="header">

    </div>
    <div id="content">

    </div>
    <div id="footer">

    </div>
</div>
</body>
</html>

CSS:

@font-face {
    font-family: "Bickley";
    src: url(fonts/Bickley%20Script.ttf);
}

@font-face {
    font-family: "American";
    src: url(fonts/American%20Classic%20Bold.ttf);
}

body {
    font-size: 1em;
    font-family: sans-serif;
    color: #c6c6c6;
    background-image: url("images/bodybackground.jpg");
}

a:link {
    text-decoration: none;
    color: #c6c6c6;
}

a:visited {
    color: #c6c6c6;
}

a:hover {
    color: #c6c6c6;
}

a:active {
    color: #c6c6c6;
}

#pagewrapper {
    width: 1280px;
    height: 1024px;
    margin: 0 auto;
    padding: 1%;
    background-color: red;
}

#header {
    width: 100%;
    height: 16.75%;
    background-color: blue;
}

#content {
    width: 100%;
    height: 66.5%;
    background-color: yellow;
}

#footer {
    width: 100%;
    height: 16.75%;
    background-color: green;
}

score 5 · Answer 1 · answered Sep 23 '14 at 08:24

5

You should add the following to the divs you add padding to:

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

Good luck!

answered Sep 23 '14 at 08:24

Wijnand M

372
1
3
12

On default padding adds to the width of the div. Adding this code makes it so it doesn't do that. That way the divs with padding stay the size they need to be. – Wijnand M Sep 23 '14 at 08:30
is this a clean way? or is it a remedy that isnt used much? – user3197307 Sep 23 '14 at 08:32
I'm not sure, but I use it often and don't see any drawbacks... – Wijnand M Sep 23 '14 at 08:34

score 1 · Accepted Answer · answered Sep 23 '14 at 09:33

I think you will be happier using this solution because it will:

Give You A Fluid Design

Look The Same On All Screen Sizes

Allow you to pad in your sub divs

Allow You To Do More Custom Inner Styling With CSS

One Important Thing I needed to mention was I added a "wrapper ID" to cover all your content so that it would size accordingly.

I hope this helps you :D

/* ADDED CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 display: block;
}
/* YOUR CSS */
@font-face {
 font-family: "Bickley";
 src: url(fonts/Bickley%20Script.ttf);
}
@font-face {
 font-family: "American";
 src: url(fonts/American%20Classic%20Bold.ttf);
}
body {
 font-size: 1em;
 font-family: sans-serif;
 color: #c6c6c6;
 background-image: url("images/bodybackground.jpg");
}
a:link {
 text-decoration: none;
 color: #c6c6c6;
}
a:visited {
 color: #c6c6c6;
}
a:hover {
 color: #c6c6c6;
}
a:active {
 color: #c6c6c6;
}

/* ADDED CSS */
/* This will contain all of your content */

#wrapper {
 width: 100%;
}
#pagewrapper {
 width: 1280px;
 margin-left: auto;
 margin-right: auto;
 padding:0px;
}
#header {
 width: 1280px;
 min-height: 16.75%;
 background-color:#00F;
}

/* CALL THE CLASS YOU WANT TO CHANGE IN THE ID */
/* EXAMPLE BELOW */
#header p {
 padding: 10px;
}
#header a {
 padding: 10px;
}
#header h1 {
 padding: 10px;
}
/* So if you want to add padding to your content do the same as above */

#content {
 width: 1280px;
 min-height: 66.5%;
 background-color: yellow;
}

#content p {
 padding: 5px;
}
/* And the same for your footer */
#footer {
 width: 1280px;
 min-height: 16.75%;
 background-color: green;
}
#footer p {
 padding: 10px;
}

<html>
<head>
</head>
<body>
<div id="wrapper">
  <div id="pagewrapper">
    <div id="header"> </div>
    <div id="content"> </div>
    <div id="footer"> </div>
  </div>
</div>
</body>
</html>

You can it in full here http://sectorvi.com/stackoverflow-test1.html

Its a standard reset I learned this from this site: http://meyerweb.com/eric/tools/css/reset/ — javacoder101, Sep 23 '14 at 10:31
wow it's allot to look trough :P So the wrapper i made (pagewrapper) can be deleted? — user3197307, Sep 23 '14 at 10:35
The "pagewrapper" is defining how wide your header, content and footer should be so no. The "wrapper" is containing the entire site and keeping all of your content center and allowing your content to change in size depending on the screen size. — javacoder101, Sep 23 '14 at 10:42
You can adjust the size of your "pagewrapper" to whatever you want by adjusting the width. (By The Way) — javacoder101, Sep 23 '14 at 10:44
If you want your header, content and footer to have 100% width then just adjust your "pagewrapper" width to width:100%. — javacoder101, Sep 23 '14 at 10:45

padding causes overlap, fluid design?

2 Answers2

Linked