Geek Answers Handbook

Relative width and padding on the same element - responsive web design

In an attempt to make my websites more responsive, I am trying to learn how to identify elements that are fluid. Today I came across a situation that I finally fixed, but I don’t understand why the fix works, and I would like to.

I can’t link to the site (NDA), but I put a few sample pages with the appropriate elements:

WRONG: http://cruxwire.com/wrong.html RIGHT: http://cruxwire.com/right.html

What I have consists of three sections. I try to add an addition to them (in percent), and I use target / context = result, and then * 100 (because it's a percentage.)

My copy of responsive web design by Ethan Marcott says: "When you set up a flexible complement to an element, your context is the width of the element itself." I gave divs a width of 20%. Since the parent is 945px, the pixel width of each div is 189px. I wanted to add a 20px add-on, so 20/189 = 0.1058201058201058. I added an addition to each div from 10.58201058201058%.

This causes each div to fill 100px, not 20px. In the end, I realized that the padding is calculated based on the width of the parent element, not the div itself.

My solution was to add an extra div around each existing div so that I could apply width to one and padding to the other, and this solved the problem.

I have two questions:

Why is padding computed relative to its parent and not its own?

How can I do this without adding extra divs?

You can see the code on the pages associated with this post, and I added it also below.

Thanks Kim

WRONG:

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>WRONG</title> <style> #main { width:945px; margin:0 auto; padding:40px 0; background-color:blue; } #slideshow { background-color:green; } .threecolumn { float:left; width:20%; padding:10.58201058201058%; background-color:yellow; } /* 20px/189px */ .slide { position:relative; margin:0 1%; background-color:red; } p { background-color:white; margin:0; padding:0; } </style> </head> <body> <div id="main"> <div id="slideshow"> <h1>WRONG</h1> <div class="threecolumn slide"> <p>According to Firebug, this element has 100px padding.</p> </div> <div class="threecolumn slide"> <p>According to Firebug, this element has 100px padding.</p> </div> <div class="threecolumn slide"> <p>According to Firebug, this element has 100px padding.</p> </div> <div style="clear:both;"></div> </div> </div> </body> </html>

RIGHT:

 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>RIGHT</title> <style> #main { width:945px; margin:0 auto; padding:40px 0; background-color:blue; } #slideshow { background-color:green; } .threecolumn { float:left; width:20%; margin:0 1%; background-color:yellow; } .slide { position:relative; padding:10.58201058201058%; background-color:red; } /* 20px/189px */ p { background-color:white; margin:0; padding:0; } </style> </head> <body> <div id="main"> <div id="slideshow"> <h1>RIGHT</h1> <div class="threecolumn"> <div class="slide"> <p>According to Firebug, this element has 20px padding.</p> </div> </div> <div class="threecolumn"> <div class="slide"> <p>According to Firebug, this element has 20px padding.</p> </div> </div> <div class="threecolumn"> <div class="slide"> <p>According to Firebug, this element has 20px padding.</p> </div> </div> <div style="clear:both;"></div> </div> </div> </body> </html>
+4
source share
3 answers

The W3 window model includes an investment in the estimated width. What you really want to do is wrap the content that you want to fill in another div and apply a field to that div equivalent to the filling you cannot use:

HTML example:

 <div id="nav"> <div class="block" id="left"> <div> <h1>blah blah</h1> </div> </div> <div class="block" id="middle"> <div> <h1>blah blah</h1> </div> </div> <div class="block" id="right"> <div> <h1>blah blah</h1> </div> </div> </div>

CSS example:

 .block { width:33%; height:50%; position:relative; float:left; background-color:#CCC; /** Instead of applying a 20px padding here... */ } .block>div { margin:20px; /* we apply a 20px margin here */ }

http://jsfiddle.net/AlienWebguy/Yf34X/1/

0
source

You are correct in assuming that target / context = result, but this includes the width, padding, and edge of the element.

I made the code so you can see how it works - http://codepen.io/justincavery/pen/dtusa

You do not need to add an additional div, just follow the rules of the target and context, but remember that the context is the parent container and not the current element when it comes to filling and fields.

 .wrapper { margin: 0 auto; width: 1000px; } #main { width:100%; padding:40px 0; background-color:blue; float:left } .pixeled { float:left; background-color:green; width: 400px; margin: 25px; padding: 25px; } .percentaged { float:left; width:40%; padding:2.5%; background-color:yellow; margin:2.5%; } <div class="wrapper"> <div id="main"> <div class="pixeled"> <div class="inner"> This is content </div> </div> <div class="percentaged"> <div class="inner"> This is conent </div> </div> </div> </div>
0
source

Here is one way to do this without adding additional divs:

You want the padding to be approximately 20 pixels. Thus, 20 pixels from a total width of 945 pixels = 20/945 x 100 = 2.116402116%

Therefore, if you use this percentage in your original "wrong" code instead of 10.58%, you will get the desired effect. Below is the code that you provided for your "wrong" example, only with the modified css.

CSS

 #main { width:945px; margin:0 auto; padding:40px 0; background-color:blue; } #slideshow { background-color:green; } .threecolumn { float:left; width:20%; padding:2.116402116%; /*<<<<<<<<padding is 20px/945px*/ background-color:yellow; } .slide { position:relative; margin:0 1%; background-color:red; } p { background-color:white; margin:0; padding:0; }

HTML:

 <div id="main"> <div id="slideshow"> <h1>WRONG</h1> <div class="threecolumn slide"> <p>According to Firebug, this element has 100px padding.</p> </div> <div class="threecolumn slide"> <p>According to Firebug, this element has 100px padding.</p> </div> <div class="threecolumn slide"> <p>According to Firebug, this element has 100px padding.</p> </div> <div style="clear:both;"></div> </div> </div>
0
source

More articles:


All Articles