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.
Related
I have two divs.
The first one covers the whole screen and with a transparent background
the other div has a white background and a higher z-index then the first div. But the transparent background covers the second div with the white backgorund...what can I do to fix this?
.lightbox{
top: 0;
left: 0;
background: #000;
width: 100%;
height: 100%;
position: absolute;
z-index: 1000;
filter:alpha(opacity=50);
opacity:0.5;
}
#lightboxContent{
display: none;
width: 325px;
height: 260px;
background: #FFF;
position: absolute;
z-index: 2000;
top:0;
border:3px solid #CCC;
text-align:center;
}
http://jsfiddle.net/DHYFz/
This works perfectly fine for me using IE7+ with your setup. Possible overlapping elements in some other portion of your code?
Possible problem: if you were to, let's say, nest the lightboxContent element, keep in mind that the parent z-index will trump the child.
Easy fix is, not to nest lightbox > lightboxContent. Takes full width and height of container regardless.
An easy way to do it is stop IE7 by putting at the top of your html.
I have an issue when using box-sizing:border-box on a fluid grid I have built. I have 1 main column and then a secondary column that contains 2 grid items. If I add border-bottom: 2px solid grey to the first grid item in the secondary column box-sizing is ignored which makes the grid look off as the second column is now slightly taller that the main one. Can anyone advise how I can make these look even, I understand that this is probably because I havent set heights but I'm not sure how to work round this?
Here is my JS Fiddle http://jsfiddle.net/97qpV/
CSS
body * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.featured-news-col {
width: 66.66667%;
float: left;
margin-right: 0%;
display: inline;
border-right: 2px solid grey;
}
.m-news-thumb {
position: relative;
display: block;
}
.sub-article{
border-bottom: 2px solid grey;
}
.sub-article:last-child{
border:none;
}
img {
display: block;
height: auto;
max-width: 100%;
min-width: 100%;
}
.additional-news-col {
width: 33.33333%;
float: right;
}
You'll need to set heights if you want them to be the same height. HTML elements will, by default "shrink-wrap" their contents, and be only as tall as the contents.
box-sizing doesn't change this. What it does change is how height and width are determined when things like margins, paddings, and borders are added.
So, for example, if you have a div with the following:
div {
height: 50px;
width: 50px;
border: 5px solid black;
}
With the default box-sizing (content-box), the calculated size of that div would actually be 60x60px (the height/width, plus the size of the border on both sides). However, with box-sizing: border-box, that border is now counted as part of the box size, making its calculated dimensions 50x50px.
Jeff Kaufman has a good demonstration of how box-sizing works, and why border-box makes more sense.
The boxes only line up when the contents match the ratio 3:2 (eg those 600x400 dummy images). By adding borders the boxes no longer fit that ratio.
I don't think there is any way to make this work with CSS borders. If the final content will be images I suggest making the borders part of the image. Then they will always line up at any size.
I have a difficult layout in my website and I have a problem now with IE7. How can I in this example set the inner wrapper to fill the height of the outer wrapper?
http://jsfiddle.net/fMPNw/2/
You have to explicitly define the height of .wrapper, in that situation. That being said, if your top: and bottom: attributes are going to make the height dynamic, your only solution is resetting the height with JavaScript, binding the height to update on window resize, etc.
I was able to get .wrapper2 to layout correctly by making it absolutely positioned. Using the following 2 lines of CSS, width to correct the width issue caused by absolute positioning.
position:absolute;
width:100%;
End result being:
.wrapper{
position: absolute;
top: 310px;
bottom: 130px;
border: 1px solid red;
width: 100px;
}
.wrapper2{
border: 1px solid blue;
height: 100%;
width:100%;
position:absolute;
}
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
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%