How can I make a block filling the full width of its container given the fact both are absolutely positionned, and the inside one has padding.
I've made a JSFiddle:
http://jsfiddle.net/dmdBB/
here a sample:
<style>
.containerOut {
position: absolute;
width: 400px;
height: 400px;
border: thin solid black;
}
.containerIn {
position: absolute;
outline: 1px solid red;
width: auto;
padding: 4px;
}
</style>
<div class="containerOut">
<div class="containerIn">
im not large enough
</div>
</div>
In this sample, the .containerIn element is too thin. If I set its width to 100%, it would overflow because of its padding.
PS: I would like a CSS solution, I know that placing an intermediate HTML container with 100%width and 0margin/padding/border would solve the problem.
Instead of using width: 100%, you need to use left: 0; right: 0.
To fix the last example, you can use word-wrap: break-word.
See: http://jsfiddle.net/QjdD5/1/
.containerIn {
width: auto !important; /*just to override your inline CSS */
left: 0;
right: 0;
word-wrap: break-word
}
right:0px;
left:0px;
overflow:hidden;
for the inner element and if you dont want that red border showing on the black border you can use overlfow:hidden for outer div
#biab; padding & border add width to an element.
may be you can put in your css:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
http://jsfiddle.net/sandeep/dmdBB/28/
replace...
width: auto;
with...
left:0;
right:0;
Tested on chrome
Related
My sticky header covers the vertical scrollbar, is there a way to fix this?
URL: http://jlwebdesigns.co.uk/
Header code (using a HTML5 tag)
header {
background: none repeat scroll 0 0 #283744;
border-bottom: 4px solid #4F5B66;
height: 97px;
margin-top: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
Yeah make that element have a higher z-index and make sure you set a positioning such as relative or what not to that element.
header {
background: none repeat scroll 0 0 #283744;
border-bottom: 4px solid #4F5B66;
height: 97px;
margin-top: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
Underlying element
#underlyingelementwithscrolls{
position:relative;
z-index:1000;/*higher than 999 since header has it*/
}
in your case you have overlayed the bodies scroller
do this and it should get fixed
body{
overflow:hidden;}
html{
overflow-y:scroll;}
solution is not very neat but give margin-top: 97px; to the below div....based on ruddy's fiddle :
here is a demo
After reviewing your page you can change a couple of things...
Your banner is at 100% but it also has a padding which makes your banner to exeed the 100%. You try to avoid this by putting the overflow hidden in the html, body but that makes your header to overlap the scroll bar.
Solution:
html, body {
width:100%;
overflow:hidden; //remove this
}
#homeBanner {
width: 100%;
background: url(../img/bannerHolder.jpg) center no-repeat #558582;
text-align: center;
margin-top: 100px;
padding: 13% 2%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
I looked at the site and a simple fix is to put:
margin-top: 97px; // if header has some padding so count that too.
Put that margin on the section in the CSS. This will fix the scrollbar but will break the logo. You will have to replace some stuff because of the new margin.
Here is a demo using the margin-top. You can see the text under the header. Take the margin away and it will hide behind the header.
DEMO
Note: Just seen there's more then 1 section. You could just wrap them all in a div and give that the margin. Or use :first-of-type.
I have two div tags parent and child. child tag has position fixed with width 100%. Parent has padding of 10px as show in this jsfiddle code. The issue is that when I give width of 100% to child tag then its right side moves out of parent div tag. I know that is because it has padding. One way to solve this is to give child tag a width of 90%. But is there a better way than this so that child tag appears exactly inside parent tag?
UPDATE
I want to keep position: fixed for child tag
.parent {
height: 300px;
padding: 10px;
border: 1px solid red;
}
.child {
position: fixed;
height: 100px; width: 100%;
border: 1px solid black;
}
jsfiddle.net/q4ffs/3/ DEMO
If you are comfortable with a little use of jQuery then this should fix your issue. CSS still have some limitations but this little line of javascript may serve you well.
$(function (){
$('.child').each(function (){
$(this).css('width', $(this).parent('div').width());
})
});
Thanks
Place the absolute div inside another div which is placed inside the parent div.
<div class="parent">
<div class="newDiv">
<div class="child">
</div>
</div>
</div>
The other div will get the position:relative;.
.newDiv
{
position:relative;
height:100%;
}
.child {
position: absolute;
height: 100px; left:0; right:0;
border: 1px solid black;
}
DEMO
Make the Postion to relative see the output
.parent {
height: 300px;
padding: 10px;
border: 1px solid red;
}
.child {
position: relative;
height: 100px; width: 100%;
border: 1px solid black;
}
You can also adjust its padding if padding is the problem
give class padding to child
and append the code
.padding /*for box padding ie padding inside the box*/
{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
it dont let the child to maximize her width with padding
Hey you can use width is 100vw and set margin-left:-10px ; on the child.
Cheers
This question already has answers here:
Prevent padding from making an element bigger?
(2 answers)
Closed 6 years ago.
I'm not a designer. When writing CSS it often happens that I need to add some padding to an element. How do you avoid that padding to propagate to the parent element ?
HTML:
<div id="outer">
<input id="login">
</div>
CSS:
#outer {
width: 300px;
}
#login {
width: 100%;
padding: 1em;
}
If you use that HTML+CSS, you'll see that the #outer element is bigger than 300px. The easiest solution if to re-write the #login's width to "300px - to_pixel(1em)". It works well but also means that now the font size needs to be fixed. Is there another way where I don't need to convert everything in pixels ?
What you want is the box-sizing property. Take a look at this jsFiddle for it in practice. Just add this:
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
to your #login CSS. This is supported in most modern browsers, including IE8+.
You can css box-sizing property like this:
#outer {
width: 300px;
background:red;
height:100px;
}
#login {
width: 100%;
padding: 1em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
http://jsfiddle.net/TQXdn/
box-sizing does not work in IE7
Yes you have to fix this or adjust according to width + padding . The Actual Size when you are using padding will be
actual size = Defined Width + Padding Width + Border Width
then if you want to limit it to the container size then take care about the CSS box model
#outer {
width: 300px;
border:1px solid red;
padding:1em;
}
#login {
width: 100%;
}
It will put the input in center of the container.. Use Box Model as suggested in question comments also.
There is my solution:
width : calc( 100% - 10px );
padding: 5px;
#outer {
width: 300px;
background:red;
height:100px;
position: relative;
}
#login {
position: absolute;
left: 1em;
right: 1em;
top: 1em;
bottom: 1em;
}
See it here:
http://jsfiddle.net/22ABj/
If you do:
<div style="width: auto; background: red; color: white">test</div>
You get a div that is stretched to fill the entire screen width (100%). That is what I need to happen.
However, I also need the starting position to be set. So, I need position: absolute.
When I add position:absolute, the width of the div is only as wide as the content within (similar to floats). Is there any way around this?
I cannot simply specify width: 100% since this does not take in to account border sizes, etc.
When I add position:absolute, the width of the div is only as wide as
the content within.. (Similar to floats). Is there any way around
this?
I cannot simply specify width:100% since this does not take in to
account border sizes, etc..
You could use position:absolute; left:0; right:0; top:0.
Like this: http://jsfiddle.net/thirtydot/yQWGV/
You can use width:100% and the css attribute box-sizing, to get the box model working like IE 5.5, i.e. padding and border counted into the width.
div.absolute {
width: 100%;
border: 5px solid #000;
background-color: #F00;
position: absolute; top: 100px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 50px;
}
Here's a fiddle: http://jsfiddle.net/dJtm2/
Be wary though, as it's a relatively new CSS3 attribute and will only work in newer browsers, and as you can see from my example requires the dreadful counter-productive measure that is vendor prefixes.
simply write like this:
div.absolute {
border: 5px solid #000;
background-color: #F00;
position: absolute;
top: 100px;
padding: 50px;
left:0;
right:0;
}
http://jsfiddle.net/dJtm2/1/
in this padding & border not increase the width of the element.
I set a div's width to 100% of the window. When I apply a border to this div, the right border is cut off. Do I have to perform a box model hack to this?
#textBoxContainer {
width:100%;
height:30%;
position:fixed;
z-index:99;
bottom:0px;
left:0px;
background-color:#999;
border: 4px solid #000;
}
<div id="textBoxContainer"></div>
Already has been answered, but I like this solution better. Add this to textBoxContainer:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
It will put the border on the inside of the box. More info: http://css-tricks.com/box-sizing/
Edit - Doesn't work on IE7, but not much does. Here's more on that: box-sizing support in IE7
The easiest fix in your case is this:
#textBoxContainer {
height: 30%;
position: fixed;
z-index: 99;
bottom: 0;
left: 0;
right: 0;
background-color: #999;
border: 4px solid #000;
}
<div id="textBoxContainer"></div>
Live Demo
Remove width: 100%.
To make the div fill the screen, instead add right: 0.
It's perfectly viable to give an element both a left and a right (or a top and a bottom), like we're doing here.
Somewhat related firefox bug
A 100% select dropdown will often be missing its right border (dependent on width of window)
https://bugzilla.mozilla.org/show_bug.cgi?id=924068
No workaround other than to try width: 99%