CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3745738
user3745738

Reputation: 55

Reduce 100% div width by certain amount of pixels

I have below code which I need to keep original css as is. Problem is the inner div has a border value of 10px which makes the inner div 20px wider than the outer div. Can I adjust the width of the inner div by minus 20px to fix. I have tried negative margins etc but no luck any ideas?

<style>

.content {  
width: 90%; 
float: left;

}

.content-inner {    
float: left;
width: 100%; 
background: #6DA249;
border: 10px solid #333333;

}
body {

padding: 0px;
margin: 0px;


}

</style>

<div class="content">
<div class="content-inner">

dfg

</div>
</div>

Upvotes: 1

Views: 2446

Answers (4)

Brett Caswell
Brett Caswell

Reputation: 730

I think the other answers are more interesting, but as an alternative.

consider these three Css Declarations. width: auto; margin: 0; display:block;

the auto width of the element should fill it's parent container, when the margin is set to 0 on margin-left and margin-right, the display is set to block.

I removed float and the percentage widths..

Sample Code Snippet

 .content {  
   /*
      width: 90%; 
      float: left;
   */
      position:relative;
      left:0; top:0;
   
      display:block;
      margin:0; padding:0;
      width: auto;
      /*margin is 0, so with width set to auto, and display being block.. width auto should go to 100%*/  

    }

    .content-inner {    
    /*
      float: left;
      width: 100%; 
    */
      
      position:relative;
      left:0;top:0;
      
      background: #6DA249;
      border: 10px solid #333333;
      
      display:block; 
      width:auto;
      margin:0; padding:0;    
      
      overflow:auto;
    }

    body {
      position:relative;
      left:0;top:0;
      
      display: block;
      padding: 0; margin: 0;
      width:auto;
      
      overflow:auto;
      }
    <div class="content">
    <div class="content-inner">

    dfg

    </div>
    </div>

when you set float on an element, and don't specify clear on the parent element (Container), the properties (width and height) of the parent don't pickup and/or account for the size of the floated child element.. which will mess up the auto width.

Additionally, you will want to explicitly set the overflow style declaration on the parent/containers..

Upvotes: 0

David Thomas
David Thomas

Reputation: 253358

The simplest solution, that avoids rewriting properties on the parent <div> would be to add a single, further, rule to your CSS for the inner-<div>:

.content-inner {
  /* other CSS */
  box-sizing: border-box;
}

This causes the browser to include the borders (and padding) in the assigned width of the elements of that class.

Failing that, of course, you could use the CSS calc() function:

.content-inner {
  /* other CSS */
  width: calc(100% - 20px);
}

I do feel it worth reiterating, though, that by default a <div>, set to display: block; will take the full-width of its parent element and its borders contained within. This question feels like you're trying to solve a problem that exists because of a deliberate (though unexplained) choice.

Simply put: if you don't float the <div>, and leave, or set, its display as block, then you won't need to use the somewhat experimental (as defined by MDN, in the references below) CSS and will have CSS that's functional back to the days of IE 6 (if not earlier).

References:

Upvotes: 4

Gershom Maes
Gershom Maes

Reputation: 8170

The default behavior of a border is to extend the overall dimensions of its element.

You can change this default behavior with the following rule:

box-sizing: border-box;

That css is pretty much intended to resolve exactly this situation.

Upvotes: 0

technology101010
technology101010

Reputation: 774

You can't reduce a div by pixels if its set via percent. As you stated you can position things that way, example set a div with 30% width to a negative margin. margin:-20px; etc. but you cannot resize them. The solution is to simply drop the percent of the width by a percentage point or two.

Upvotes: 0

Related Questions