Is there some way to use position: absolute; with an element that's also display: table;?
In the example below I would imagine that the table would be 100% wide and (100% - 50px) high, but it's not. Instead, I'll have to wrap the table in an absolute positioned container and make it 100% wide and high. It feels stupidly redundant. Why doesn't absolute positioning a table work? Is there some way to make it work?
html, body {
min-height: 90%;
min-width: 90%;
height: 90%;
width: 90%;
}
body {
background-color: #333;
}
.table {
display: table;
border: 3px solid rebeccapurple;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 50px;
}
.cell {
display: table-cell;
height: 100%;
width: 33%;
border: 3px solid #f00;
}
.not-a-table {
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
background-color: rgba(0,200,0,.2);
}
<div class="table">
<div class="cell"> </div>
<div class="cell"> </div>
</div>
<div class="not-a-table"> </div>
Add width and height in .table
.table{
....
width: 100%;
height: calc(100% - 50px);
}
Elements with display:table property cannot be placed in absolute positioning without specifying width and height... Need to use display:block property.
Related
I am trying to stretch a sticky element to size of the screen. I have the following HTML
.large {
height: 200vw;
width: 200vw;
}
.header {
left: 0;
top: 0;
color:white;
position: sticky;
width: 100px;
height: 100px;
background: black;
}
<div class="header">Header</div>
<div class="large">Content</div>
The problem is that this works but the element is not stretched. If I change width:100px to width:100vw the sticky to the left breaks. So it seems like I cannot specify relative width and use sticky to the left at the same time?
You can achieve this by adding a div around both elements and giving that div a display: inline-block;:
.container {
display: inline-block;
}
.large {
height: 200vw;
width: 200vw;
}
.header {
left: 0;
top: 0;
position: sticky;
width: 100vw;
height: 100px;
background: black;
}
<div class="container">
<div class="header"></div>
<div class="large"></div>
</div>
I want to use position: absolute to create a centered element, but it will create a horizontal scrollbar on Internet Explorer 11. Please see the script below. Anyone here knows how to fix this problem?
*Update: I figured out that using overflow:hidden seems to solve this problem somehow. But when there are another one outside of the container, it will be hidden as well.
.container {
width: 80%;
margin: 0 auto;
height: 100vh;
border: 1px solid green;
position: relative;
overflow: hidden; /*This one is not the solution, though*/
}
.content {
width: 80%;
height: 30px;
position: absolute;
top: 50px;
left: 50%;
transform: translate(-50%, 0);
border: 1px solid red;
}
.another-content {
width: 40px;
height: 40px;
border: 1px solid blue;
position: absolute;
bottom: 20px;
right: -20px;
}
<div class="container">
<div class="content"></div>
<div class="another-content"></div>
</div>
You need to add following properties with the position absolute in IE
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0; //specify all including bottom:0
The scrollbar show up in all browsers, not only IE. You can do the following:
The biggest issue is that the left: 50% and width: 80% together are adding to the total width and forcing the horizontal scrollbar to show up in some browsers (e.g. Internet Explorer and MS Edge). You set the width to 80%, so divide the remaining 20% between the left and right border and you'll end up with 10% each. Simply use left: 10% to achieve the same result, but without the side effect of the horizontal scrollbar.
Also when you set the size to 100% and then add border, those borders will be out of the view and cause the scrollbars to show up. This is the same in all browsers. Use box-sizing: border-box to force the browser to include the border in the height and width calculation.
The height: 100vh makes the box height equals to the view port. However, the body has default margins which vary from one browser to another. You can either set those margins to zero body { margin: 0; }, or change the height to height: 100% which is 100% of the container which the body in this case.
Try this:
.container {
width: 100%;
height: 100%;
border: 1px solid green;
position: relative;
box-sizing: border-box;
}
.content {
width: 80%;
height: 30px;
position: absolute;
top: 50px;
left: 10%;
border: 1px solid red;
}
<div class="container">
<div class="content"></div>
</div>
Thanks for your replies. Though they are not direct solution, they helped me a lot to figure out how to solve it.
The cause is as what Racil Hilan said. When I use left:50% and width:80%, the content width will be added up and create a horizontal scroll, which is not ignored by only IE. And my point is to avoid creating that added-up width. Here is my two way to workaround this one.
* {
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
border: 1px solid green;
position: relative;
}
.content {
width: 80%;
height: 30px;
position: absolute;
top: 50px;
left: 0;
right: 0;
border: 1px solid red;
margin: 0 auto;
}
.content-wrapper {
border: 1px solid black;
height: 30px;
position: absolute;
top: 100px;
left: 0;
right: 0;
}
.another-content {
width: 80%;
display: block;
height: 100%;
border: 1px solid red;
margin: 0 auto;
}
<div class="container">
<div class="content"></div>
<div class="content-wrapper">
<div class="another-content"></div>
</div>
</div>
I have a 4:3 parent, and a child shrinked and centered. Finally a 4:3 child inside.
.table {
position: relative;
width: 400px;
height: 300px;
border: 1px solid;
}
.top {
position: absolute;
left: 15%;
right: 15%;
top: 20%;
bottom: 20%;
background: yellow;
}
.item {
position: absolute;
width: 10%;
height: 50%;
background: pink;
}
<div class="table">
4:3
<div class="top">
<div class="item">4:3</div>
</div>
</div>
.table has a 4:3 aspect ratio
.top is distanced by equal amount from the edges of .table
.item should have a 4:3 aspect ratio
In this code .top is centered and distanced equal from .table.
Problem is .item doesn't have 4:3 aspect ratio. (I gave it arbitrary height, width). Here's an codepen demo.
Note: .top is preferred to be distanced equal, it may be close to equal.
You can achieve this with CSS only and the padding-bottom technique to maintain the aspect ratio of the elements. It relies on the fact that percentage padding is calculated according to the with of the container (w3.org reference).
In the following example, I applied the aspect ratio on the .top element (centered it with absolute positioning and margin:auto; ) this way, you can size .item with width:100%; height:100%; as .top already has a 4:3 aspect ratio:
.table {
position: relative;
border: 1px solid;
width: 400px;
height: 300px;
}
.top {
position: absolute;
width: 70%;
height: 0;
padding-bottom: 52.25%;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
background: yellow;
}
.item {
background: pink;
position: absolute;
width: 100%;
height: 100%;
}
<div class="table">4:3
<div class="top">
<div class="item">4:3</div>
</div>
</div>
This technique also allows you to make the elements responsive by applying the padding technique to the .table element too:
.table {
position: relative;
border: 1px solid;
width: 30%;
padding-bottom:22.5%;
}
.top {
position: absolute;
width: 70%;
height: 0;
padding-bottom: 52.25%;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
background: yellow;
}
.item {
background: pink;
position: absolute;
width: 100%;
height: 100%;
}
<div class="table">4:3
<div class="top">
<div class="item">4:3</div>
</div>
</div>
You could use margin for .top:
.top {
margin: auto xx auto xx; /* top right bottom left */
}
And then you could set width and height of item:
.item{
height: 200px; /* example */
}
And then you use jQuery to set width:
var cw = $('.item').width();
$('.item').css({'height': 1.2 * cw +'px'});
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}
I'm trying to center a div vertically using line-height, without specifying a set pixel value for the line-height. I need the line-height to expand to the size of it's div. Using '100vh' works, but viewport units aren't widely supported widely enough. Setting the line-height to 100% doesn't seem to work. Here's my HTML:
<div class="background">
<div class="lightboxbg">
<div class="wrapper">
<div class="centerme"></div>
</div>
</div>
</div>
And my CSS:
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.background {
width: 90%;
height: 100%;
background-color: AntiqueWhite;
}
.lightboxbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
vertical-align: middle;
text-align: center;
}
.wrapper {
vertical-align: middle;
line-height: 100%;
height: 100%;
width: 100%
}
.centerme {
vertical-align: middle;
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
And here's a jsfiddle. The blue box would be centered if I could get the line-height of wrapper to expand to the height of wrapper, but I don't know how to go about doing that. Thanks for reading.
EDIT: Check out Nathan Lee's answer for a solution with table cells, Fredric Fohlin's for a pretty wild 'absolute positioning' answer, and MM Tac's for a solution using absolute positioning.
Here you go.
WORKING DEMO
The CSS Change:
.lightboxbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
vertical-align: middle;
text-align: center;
display: table;
}
.wrapper {
vertical-align: middle;
line-height: 100%;
height: 100%;
width: 100%;
display: table-cell;
}
Hope this helps.
Have a look at this idea. It may suit you: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
.Center-Container {
position: relative;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
In your case the wrapper needs the relative positioning, and the "center me" the absolute positioning.
Replace .centerme with following css:
CSS:
.centerme {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px; /* negative-half of element's width*/
margin-top: -50px; /* negative-half of element's height*/
}
Here is a DEMO and here is a full page RESULT.
UPDATE
To center div for variable length is simple, just remove height, width, margin-left, margin-top reference from .centerme css.
.centerme {
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
}
Here is a UPDATED DEMO.