I have 2 fieldsets wrapped in a <div>, let's call them blah1 and blah2.
blah2 can grow as the max of its <div> parent, but I need blah1 to have the same % height of his sibling blah2
This is my demo
The answer was kinda weird, but I make it work, looks like the margin was making a mess here, if I set it to margin: 0 5px; then I can make both fieldsets to have the same height as their parent
Part of the css markup:
fieldset
{
border: 1px solid #ddd;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
border-radius: 8px;
margin: 0 5px;
height: 100%;
}
legend
{
font-size: 1.2em;
font-weight: bold;
}
.blahContainer{
width: 100%;
height: 100%;
}
.blahColumna1{
width: 70%;
height: 100%;
}
If you wanna see the final demo, click here.
Hope it can help somebody else...
Try wrapping both <fieldset>s in a single container <div> that isn't fixed height -- it will neatly enclose blah2, and will grow up to the max size of your <div> parent. Set blah1's height to be 100% of the containing <div>.
I was able to get it working by adding padding-bottom to the fieldset for Chrome only. This balances out some of the extra height %. It's nice in that it works (relatively consistently) even when resizing.
if (navigator.userAgent.toLowerCase().indexOf('chrome')) { // Replace this with your preferred way of checking userAgent
$('fieldset').css('padding-bottom', '4%'); // Exact percent may vary
}
Just as a note, I found this to be an issue in at least IE8 - IE11 as well, so the fix can be applied to IE.
Related
I have an html input.
The input has padding: 5px 10px; I want it to be 100% of the parent div's width(which is fluid).
However using width: 100%; causes the input to be 100% + 20px how can I get around this?
Example
box-sizing: border-box is a quick, easy way to fix it:
This will work in all modern browsers, and IE8+.
Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.
This is why we have box-sizing in CSS.
I’ve edited your example, and now it works in Safari, Chrome, Firefox, and Opera. Check it out: http://jsfiddle.net/mathias/Bupr3/
All I added was this:
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Unfortunately older browsers such as IE7 do not support this. If you’re looking for a solution that works in old IEs, check out the other answers.
Use padding in percentages too and remove from the width:
padding: 5%;
width: 90%;
You can do it without using box-sizing and not clear solutions like width~=99%.
Demo on jsFiddle:
Keep input's padding and border
Add to input negative horizontal margin = border-width + horizontal padding
Add to input's wrapper horizontal padding equal to margin from previous step
HTML markup:
<div class="input_wrap">
<input type="text" />
</div>
CSS:
div {
padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}
input {
width: 100%; /* force to expand to container's width */
padding: 5px 10px;
border: none;
margin: 0 -10px; /* negative margin = border-width + horizontal padding */
}
Use css calc()
Super simple and awesome.
input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}
As seen here: Div width 100% minus fixed amount of pixels
By webvitaly (https://stackoverflow.com/users/713523/webvitaly)
Original source: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/
Just copied this over here, because I almost missed it in the other thread.
Assuming i'm in a container with 15px padding, this is what i always use for the inner part:
width:auto;
right:15px;
left:15px;
That will stretch the inner part to whatever width it should be less the 15px either side.
Here is the recommendation from codeontrack.com, which has good solution examples:
Instead of setting the width of the div to 100%, set it to auto, and be sure, that the <div> is set to display: block (default for <div>).
You can try some positioning tricks. You can put the input in a div with position: relative and a fixed height, then on the input have position: absolute; left: 0; right: 0;, and any padding you like.
Live example
Move the input box' padding to a wrapper element.
<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>
<div class="outer">
<div class="inner">
<input/>
</div>
</div>
See example here: http://jsfiddle.net/L7wYD/1/
Maybe browsers have changed since this question was last answered, but this is the only thing that has ever worked reliably for me to accomplish this:
width: auto;
left: 0;
right: 0;
Then you can make the margins / padding anything you want and the element will not expand past its available width.
This is similar to #andology's answer from way back but if you make left/right both 0 then you can make margin and/or padding whatever you want. So this is always my default div.
Just understand the difference between width:auto; and width:100%;
Width:auto; will (AUTO)MATICALLY calculate the width in order to fit the exact given with of the wrapping div including the padding.
Width 100% expands the width and adds the padding.
What about wrapping it in a container. Container shoud have style like:
{
width:100%;
border: 10px solid transparent;
}
Try this:
width: 100%;
box-sizing: border-box;
For me, using margin:15px;padding:10px 0 15px 23px;width:100%, the result was this:
The solution for me was to use width:auto instead of width:100%. My new code was:
margin:15px;padding:10px 0 15px 23px;width:auto. Then the element aligned properly:
You can do this:
width: auto;
padding: 20px;
I have an html input.
The input has padding: 5px 10px; I want it to be 100% of the parent div's width(which is fluid).
However using width: 100%; causes the input to be 100% + 20px how can I get around this?
Example
box-sizing: border-box is a quick, easy way to fix it:
This will work in all modern browsers, and IE8+.
Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.
This is why we have box-sizing in CSS.
I’ve edited your example, and now it works in Safari, Chrome, Firefox, and Opera. Check it out: http://jsfiddle.net/mathias/Bupr3/
All I added was this:
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Unfortunately older browsers such as IE7 do not support this. If you’re looking for a solution that works in old IEs, check out the other answers.
Use padding in percentages too and remove from the width:
padding: 5%;
width: 90%;
You can do it without using box-sizing and not clear solutions like width~=99%.
Demo on jsFiddle:
Keep input's padding and border
Add to input negative horizontal margin = border-width + horizontal padding
Add to input's wrapper horizontal padding equal to margin from previous step
HTML markup:
<div class="input_wrap">
<input type="text" />
</div>
CSS:
div {
padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}
input {
width: 100%; /* force to expand to container's width */
padding: 5px 10px;
border: none;
margin: 0 -10px; /* negative margin = border-width + horizontal padding */
}
Use css calc()
Super simple and awesome.
input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}
As seen here: Div width 100% minus fixed amount of pixels
By webvitaly (https://stackoverflow.com/users/713523/webvitaly)
Original source: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/
Just copied this over here, because I almost missed it in the other thread.
Assuming i'm in a container with 15px padding, this is what i always use for the inner part:
width:auto;
right:15px;
left:15px;
That will stretch the inner part to whatever width it should be less the 15px either side.
Here is the recommendation from codeontrack.com, which has good solution examples:
Instead of setting the width of the div to 100%, set it to auto, and be sure, that the <div> is set to display: block (default for <div>).
You can try some positioning tricks. You can put the input in a div with position: relative and a fixed height, then on the input have position: absolute; left: 0; right: 0;, and any padding you like.
Live example
Move the input box' padding to a wrapper element.
<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>
<div class="outer">
<div class="inner">
<input/>
</div>
</div>
See example here: http://jsfiddle.net/L7wYD/1/
Maybe browsers have changed since this question was last answered, but this is the only thing that has ever worked reliably for me to accomplish this:
width: auto;
left: 0;
right: 0;
Then you can make the margins / padding anything you want and the element will not expand past its available width.
This is similar to #andology's answer from way back but if you make left/right both 0 then you can make margin and/or padding whatever you want. So this is always my default div.
Just understand the difference between width:auto; and width:100%;
Width:auto; will (AUTO)MATICALLY calculate the width in order to fit the exact given with of the wrapping div including the padding.
Width 100% expands the width and adds the padding.
What about wrapping it in a container. Container shoud have style like:
{
width:100%;
border: 10px solid transparent;
}
Try this:
width: 100%;
box-sizing: border-box;
For me, using margin:15px;padding:10px 0 15px 23px;width:100%, the result was this:
The solution for me was to use width:auto instead of width:100%. My new code was:
margin:15px;padding:10px 0 15px 23px;width:auto. Then the element aligned properly:
You can do this:
width: auto;
padding: 20px;
Here's what I'm wanting to do. When the site gets down to medium and small sizes, I want 100% width with margin: 20px all around. I'm trying to not define specific pixels for the width, so that it's consistent across all devices as much as possible. I figured that my CSS would apply the 20px margin to the right side as well as the left, but it's only applying to the left and the right is going outside the window.
Here's my HTML:
<div class="swipe-content">
<div id="your-accounts">
<h1>Your Accounts</h1>
<p>
Your accounts data will go here.
</p>
</div>
</div>
And here's my CSS:
.swipe-content {
clear: both;
width: 100%;
padding: 20px;
background-color: #fff;
margin-top: 20px;
}
Sorry to waste anyone's time with this, but it's late and I'm probably missing something really simple. I'm coming back to coding after a couple of years and any help would be appreciated.
In CSS when you specify a width, it usually means the inner-width not the outer-width.
outer-width = inner-width + margin + padding + border
In your case, your div is becoming 100% + 20px (left padding) + 20 px (right padding)
When you add display: block, the div will automatically try to take up as much width as possible.
Sure, in CSS 3 you could take advantage of the box-sizing property as focorner suggested. But to be compatible i would suggest removing width: 100% and adding display: block.
For this to work, you would need an outer div which has 100% width and is display:block
TL;DR
{
display: block;
// width: 100%; remove this
padding: 20px
}
One simple option would be to use:
.swipe-content {
box-sizing: border-box;
...
}
One way you could do this is by creating an outer div that fills the entire page and setting it to have a left and right padding of both 20px.
You could then put a div on the inside that fits 100% of the outer div.
#outer {
padding: 20px;
background-color: blue;
}
#inner {
width: 100%;
height: 500px;
background-color: grey;
}
Here it is in action: https://jsfiddle.net/SplashHero/cb1xs67u/
you can do like this
.swipe-content {
clear: both;
width: 100%;
padding: 20px;
background-color: #fff;
margin : 20px 20px 20px 20px;
}
I have an html input.
The input has padding: 5px 10px; I want it to be 100% of the parent div's width(which is fluid).
However using width: 100%; causes the input to be 100% + 20px how can I get around this?
Example
box-sizing: border-box is a quick, easy way to fix it:
This will work in all modern browsers, and IE8+.
Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.
This is why we have box-sizing in CSS.
I’ve edited your example, and now it works in Safari, Chrome, Firefox, and Opera. Check it out: http://jsfiddle.net/mathias/Bupr3/
All I added was this:
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Unfortunately older browsers such as IE7 do not support this. If you’re looking for a solution that works in old IEs, check out the other answers.
Use padding in percentages too and remove from the width:
padding: 5%;
width: 90%;
You can do it without using box-sizing and not clear solutions like width~=99%.
Demo on jsFiddle:
Keep input's padding and border
Add to input negative horizontal margin = border-width + horizontal padding
Add to input's wrapper horizontal padding equal to margin from previous step
HTML markup:
<div class="input_wrap">
<input type="text" />
</div>
CSS:
div {
padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}
input {
width: 100%; /* force to expand to container's width */
padding: 5px 10px;
border: none;
margin: 0 -10px; /* negative margin = border-width + horizontal padding */
}
Use css calc()
Super simple and awesome.
input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}
As seen here: Div width 100% minus fixed amount of pixels
By webvitaly (https://stackoverflow.com/users/713523/webvitaly)
Original source: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/
Just copied this over here, because I almost missed it in the other thread.
Assuming i'm in a container with 15px padding, this is what i always use for the inner part:
width:auto;
right:15px;
left:15px;
That will stretch the inner part to whatever width it should be less the 15px either side.
Here is the recommendation from codeontrack.com, which has good solution examples:
Instead of setting the width of the div to 100%, set it to auto, and be sure, that the <div> is set to display: block (default for <div>).
You can try some positioning tricks. You can put the input in a div with position: relative and a fixed height, then on the input have position: absolute; left: 0; right: 0;, and any padding you like.
Live example
Move the input box' padding to a wrapper element.
<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>
<div class="outer">
<div class="inner">
<input/>
</div>
</div>
See example here: http://jsfiddle.net/L7wYD/1/
Maybe browsers have changed since this question was last answered, but this is the only thing that has ever worked reliably for me to accomplish this:
width: auto;
left: 0;
right: 0;
Then you can make the margins / padding anything you want and the element will not expand past its available width.
This is similar to #andology's answer from way back but if you make left/right both 0 then you can make margin and/or padding whatever you want. So this is always my default div.
Just understand the difference between width:auto; and width:100%;
Width:auto; will (AUTO)MATICALLY calculate the width in order to fit the exact given with of the wrapping div including the padding.
Width 100% expands the width and adds the padding.
What about wrapping it in a container. Container shoud have style like:
{
width:100%;
border: 10px solid transparent;
}
Try this:
width: 100%;
box-sizing: border-box;
For me, using margin:15px;padding:10px 0 15px 23px;width:100%, the result was this:
The solution for me was to use width:auto instead of width:100%. My new code was:
margin:15px;padding:10px 0 15px 23px;width:auto. Then the element aligned properly:
You can do this:
width: auto;
padding: 20px;
I'm trying to get my horizontal rule to ignore the parent padding.
Here's a simple example of what I have:
#parent {
padding:10px;
width:100px;
}
hr {
width:100px;
}
You will find that the horizontal rule extends out of the parent by 10px. I'm trying to get it to ignore the padding that everything else in the parent div needs.
I'm aware that I could make a separate div for everything else; this is not the solution I'm looking for.
Easy fix, just do
margin:-10px
on the hr.
For image purpose you can do something like this
img {
width: calc(100% + 20px); // twice the value of the parent's padding
margin-left: -10px; // -1 * parent's padding
}
In large this question has been answered but in small parts by everyone. I dealt with this just a minute ago.
I wanted to have a button tray at the bottom of a panel where the panel has 30px all around. The button tray had to be flush bottom and sides.
.panel
{
padding: 30px;
}
.panel > .actions
{
margin: -30px;
margin-top: 30px;
padding: 30px;
width: auto;
}
I did a demo here with more flesh to drive the idea. However the key elements above are offset any parent padding with matching negative margins on the child. Then most critical if you want to run the child full-width then set width to auto. (as mentioned in a comment above by schlingel).
Another solution:
position: absolute;
top: 0;
left: 0;
just change the top/right/bottom/left to your case.
Kinda late.But it just takes a bit of math.
.content {
margin-top: 50px;
background: #777;
padding: 30px;
padding-bottom: 0;
font-size: 11px;
border: 1px dotted #222;
}
.bottom-content {
background: #999;
width: 100%; /* you need this for it to work */
margin-left: -30px; /* will touch very left side */
padding-right: 60px; /* will touch very right side */
}
<div class='content'>
<p>A paragraph</p>
<p>Another paragraph.</p>
<p>No more content</p>
<div class='bottom-content'>
I want this div to ignore padding.
</div>
I don't have Windows so I didn't test this in IE.
fiddle:
fiddle example..
If you have a parent container with vertical padding and you want something (e.g. an image) inside that container to ignore its vertical padding you can set a negative, but equal, margin for both 'top' and 'bottom':
margin-top: -100px;
margin-bottom: -100px;
The actual value doesn't appear to matter much. Haven't tried this for horizontal paddings.
margin: 0 -10px;
is better than
margin: -10px;
The later sucks content vertically into it.
Here is another way to do it.
<style>
.padded-element{margin: 0px; padding: 10px;}
.padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
<img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>
Here are some examples on repl.it: https://repl.it/#bryku/LightgrayBleakIntercept
Your parent is 120px wide - that is 100 width + 20 padding on each side so you need to make your line 120px wide. Here's the code. Next time note that padding adds up to element width.
#parent
{
width: 100px;
padding: 10px;
background-color: Red;
}
hr
{
width: 120px;
margin:0 -10px;
position:relative;
}
If your after a way for the hr to go straight from the left side of a screen to the right this is the code to use to ensure the view width isn't effected.
hr {
position: absolute;
left: 0;
right: 0;
}
The problem could come down to which box model you're using. Are you using IE?
When IE is in quirks mode, width is the outer width of your box, which means the padding will be inside. So the total area left inside the box is 100px - 2 * 10px = 80px in which case your 100px wide <hr> will not look right.
If you're in standards mode, width is the inner width of your box, and padding is added outside. So the total width of the box is 100px + 2 * 10px = 120px leaving exactly 100px inside the box for your <hr>.
To solve it, either adjust your CSS values for IE. (Check in Firefox to see if it looks okay there). Or even better, set a document type to kick the browser into strict mode - where also IE follows the standard box model.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
...
http://www.quirksmode.org/css/quirksmode.html
You just need to add negative margins to the child that match the padding of the parent. No need to set a width, change the box-sizing, or use absolute positioning.
#parent {
padding: 10px;
width: 100px;
}
hr {
margin-right: -10px;
margin-left: -10px;
// For modern browsers you can use margin-inline: -10px
}
The reason you don't need to set a width is because the hr element is a block element. It's width defaults to "auto", which means it will expand to fill it's parent (minus padding, margin, and border).
easy fix.. add to parent div:
box-sizing: border-box;