I am in the middle of creating a basic, plain jane, old school div layout. But for the life of me, I can't figure out how to get padding in the content area and side menu without the template distorting with extra padding. I've been searching online for hours -- and I'm finding 'apparent' solutions, but when I try to implement them, they don't work. I now have a migraine. If anyone has a solution, I'd be rapt to know what it is. Note: The template isn't complete, per se. I'm just trying to get the basic layout/functionality right. html { height: 100%; font-size: 1.8vw; } body { height: 100%; background-color: #EEEEEE; font-family: arial; } .wrap { width: 80%; height: 100%; background-color: #FFFFFF; max-width: 1200px; margin: 0px auto 0px auto; border-left: 1px solid #999999; border-right: 1px solid #999999; } .head { margin-top: 10px; } .logo { background-color: #FFFFFF; float: left; width: 30%; height: 100px; line-height: 100px; text-align: center; } .head-right { background-color: #FFFFFF; float: right; width: 70%; text-align: center; height: 100px; line-height: 100px; } .topmenu { clear: both; background-color: #FFFFFF; } .content-wrap { background-color: yellow; } .content { background-color: #CCCCCC; float: left; width: 70%; } .content-box { } .content-2 { clear: both; border-top: 1px solid #999999; background-color: #FFFFFF; } .content-2-box { padding: 1vw; } .sidemenu { background-color: #999999; float: right; width: 30%; } .sidemenu-box { } .foot { clear: both; background-color: #FFFFFF; margin-top: 10px; } /* Top Menu */ ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: green; text-align: center; } li { display: inline-block; } li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } li a:hover { background-color: #111111; } .home-link { padding-left: 20%; } /* Responsive */ @media screen and (max-width: 600px) { html { font-size: 2.5vw; } .logo { float: none; width: 100%; text-align: center; } .head-right { float: none; width: 100%; } .content { float: none; width: 100%; } .sidemenu { float: none; width: 100%; } } Code (CSS): <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="style.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="wrap"> <div class="head"> <div class="logo"> LOGO </div> <div class="head-right"> head right </div> </div> <div class="topmenu"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Contact</a> </li> <li> <a href="#">Blog</a> </li> </ul> </div> <div class="content-wrap"> <div class="content content-box"> <h1>This Is A Page Heading</h1> <p>This is some content.</p> </div> <div class="sidemenu sidemenu-box"> sidemenu </div> <div class="content-2 content-2-box"> Content 2 </div> </div> <div class="foot"> <div class="content content-box"> <p>Foot Left</p> </div> <div class="sidemenu sidemenu-box"> Foot Right </div> </div> </div> </body> </html> HTML:
wow, 75 views, no answer Anyways, it's all good. I figured it out. If you float a div and then add padding, that padding will cause the div to become too big. But if you add the code below, it won't box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; Code (CSS): ie: so in my code above: .content { background-color: #CCCCCC; float: left; width: 70%; } Code (CSS): becomes: .content { background-color: #CCCCCC; float: left; width: 70%; padding: 20px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } Code (CSS): All fixed!
Another chunk of your problem is overthinking the layout by throwing widths at everything. Instead of floating everything and width on everything, leave one element not floated and without width on it. That way it will auto-fill the available space. I also dislike % width columns since the smaller one either ends up ugly empty crap at high resolutions, and end up too small at low resolutions. An elastic (em measured) column next to a fluid one generally looks and behaves better for users. Though these days you probably should be using flex for at least some of this, ease up on the pointless DIV since you've got about twice as many if not more than needed, and you should look into how you have a DIV doing H1's job and H1 doing H2's job . You should probably also be using EM or REM instead of PX so you aren't telling users with accessibility needs to go F*** themselves. Remember, if you're thinking in PX, somebody's not thinking. Also since you're using a HTML 5 doctype you can tell the XML namespace crap to take a hike too, we don't say type="" on stylesheet LINK or SCRIPT anymore, and you failed to provide a media target on said stylesheet LINK. Remember, if you see a <link> without media="" or set to media="all" when the stylesheet is for a screen layout, you're looking at ignorance, incompetence, and/or ineptitude, No matter how many dipshit framework fanboys go "media attribute, what's that?!?"
Padding inside DIV does not affects how your div is floating, or how much space it takes. <div style=" float: right; padding: 2px; width: 25%; min-width: 400px; max-width: 700px; "> ><ul> <li> <a href=""> some link </a> </li> <li> <a href=""> another link </a> </li> </ul> </div> <div style=" float: left; padding: 20px; width: 70%; min-width: 400px; max-width: 700px; " <p> Some content here </p> <p> Some content here </p> <p> Some content here </p> <p> Some content here </p> </div> First div will float right, will take 25% screen width, minimum 400px, and max 700px. Second one floats left, takes 70% width, same min/max. Padding does not matters. You can increase or decrease padding, these above sizes will remain same. Your problem could be that you are using 30% and 70% width sizes, leaving no space for "outside margins" Reduce one of those values a little bit. Like 25% and 70% width sizes. Also do a "clear: both;" in your content-wrap That will separate the content section from the header section.
Uhm... bullcookies? Or at least bullcookies if you haven't set box-sizing:border-box;, since without that the padding is added TO the width, not inside it. It's idiotic rubbish to be declaring widths on EVERYTHING, particularly when floats are involved. Just like the idiocy of percentage based grids. IF you just make your content or "larger" area fluid to take up the excess, you can stop throwing all the dipshit values at everything! Pixel metrics, percentage widths, min-max on the children instead of a parent container... it's all epic /FAIL/ at the most basic aspects of CSS.
@deathshadow I am on a monitor with 1280x720 resolution. In this code below, I have used fixed width for the div as 1280px, and a padding of 400px for the same div. Now, if padding is added to the width, then total width of this div should have become 400px more than my laptop's total screen resolution of 1280px, forcing me to scroll the page right and left. But that is not happening. DIV displays as 1280px wide, with a 400px inside padding on all sides. Here's the HTML: (Let me know what I missed) <html><body style=" margin: 0px; padding: 0px; background: #000000; color: #FFFFFF; "> <div style=" width: 1280px; margin: 0px; padding: 400px; border: #FFFFFF 10px solid; "> <p> This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text <p> This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text <p> This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text </div> </body></html> Code (markup): Padding is not affecting the width in any way.
Silly question, but are you still using the long-defunct IE? The lack of a doctype would put you into "quirks mode" which has the same rules as setting box-sizing:border-box; In FF and Chrome here that's giving me a 2100px width. 1280 + 400 left padding + 400 right padding + 10px left border + 10px right border I'd have to add box-sizing:border-box; to get that inner div to stay inside 1280.