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%
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 found the following from the site: http://www.htmlgoodies.com/html5/tutorials/learn-css3-from-a-z-getting-started-with-layouts-.html#fbid=Byc3E58e8v-
"The CSS3 code for this is very simple. You just need to add the following property to switch the model for a particular element.
#W3C-model {
box-sizing: content-box;
}
#traditional-model {
box-sizing: border-box;
}
Having understood how box-sizing works, the next question is where can you use it? Well, its very useful when you have two equal columns. If you give them 50% width each and add some padding and maybe a border, the columns won't show up side by side. This is an ideal scenario where you can set box-sizing to border-box and happily set the width to 50% for both boxes."
I am not sure what is meant by the columns won't show up side by side? It sounds like what is expected here is the dividing border between the two columns would vanish or something like that - I am not sure. I have this sample code to experiment with:
http://jsfiddle.net/hE8UZ/
I am not seeing any effect at all. Besides not sure why the span elements didn't occupy 250px as width was mentioned as 50% of body.
Please help.
Thanks
If you have any container with 500px width and child with 1px border, 10px padding, 100% width and set box-sizing to border-box then the width will be 500px if you set box-sizing to content box then the width will be 500px + 2x10px + 2x1px = 522px.
.container {
display: block;
width: 500px;
}
.one {
display: block;
padding: 10px;
-webkit-box-sizing: border-box;
width: 50%;
border: 1px solid;
}
.two {
display: block;
padding: 10px;
-webkit-box-sizing: content-box;
width: 50%;
border: 1px solid;
}
http://jsfiddle.net/Vaj5x/
EDIT:
If you wanna have tow columns add them float to left. Like here http://codepen.io/Chovanec/pen/cuBpg
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
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.
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