Consider the following code:
<html>
<head></head>
<body>
<div id="A">
<div id="B" style="left: 0; position: absolute; top: 0;">... STUFF ...</div>
</div>
</body>
</html>
A turns out to have a height of 0, regardless of the size of B and its contents. I want A to have its height set appropriately according to what's inside B.
Is this possible to achieve with CSS ?
So far, I haven't found any way to do it, but I'm pretty sure CSS should be capable of handling this, it looks like an extremely trivial to do.
I know there are many posts about achieving clearfix, but they appear to be outdated. It's 2016 now, maybe there are new alternatives available.
Important stuff: This is what I want to achieve, I didn't write that little layout and those style properties by chance. Please refrain from suggesting alternatives where the layout is different form the one I presented.
Since you want A's height to match the content in B, you can do it by adding display: list-item; to A. display: list-item; generates block box for content.
#A {
background-color: yellow;
position: relative;
display: list-item;
}
<div id="A">
<div id="B" style="left: 0; position: absolute; top: 0;">... STUFF ...</div>
</div>
Related
I am trying to understand why a div with display:block will not sit under another div with display:block
My mark-up is this:
.container{
display: block;
position: relative;
}
.container img{
width: 100%;
position: absolute;
top:0;
left:0;
}
.container .text-left{
position: absolute;
top:35rem;
left:35rem
}
.container .text-right{
position: absolute;
top:35rem;
right:35rem
}
<div class="container" >
<img src="/image1.jpg" alt="">
<div class="text_left">
<h2>HEADING 1</h2>
</div>
</div>
<div class="container" >
<img src="/image2.jpg" alt="">
<div class="text_right">
<h2>HEADING 2</h2>
</div>
</div>
I am trying all sorts of stuff to make this work - overflows etc - but can't seem to get the second display block div to sit under the first.
EDIT: It seems that if you put position:absolute element/s inside a position:relative element - that may have height due to that element being an image - the absolute element/s removes this height. So you need to add it back in as height: X.
But why??
Is this due legacy mark up - using absolutes in ways not designed for?
Why would the browser not take into consideration the image height as default. And we could override this if needed.
Can anyone please enlighten me?
thanks
The reason you have lost height is because position:absolute; removes element from the flow, therefore your parent container won't be able to use it to work out its height. It's not legacy markup, it's part of the scope.
A quick excerpt from CSS-Tricks
The trade-off (and most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.
If for whatever reason you are required to have that specific element as position:absolute; your next best bet would be to adjust the parent container using JavaScript/jQuery, however that might be a bulky fix.
My suggestion would be to try and achieve your preferred layout without using the absolute positioning, and then if you get stuck, post another question here explaining your desired layout and current code trying to achieve it.
EDIT
That being said, if the mentioned JavaScript/jQuery solution does not sound to bulky to you, you could try the following:
$('.container').each(function(){
$(this).css({
'padding-top': $(this).find('img').height()+'px'
});
});
This will add padding-top to the container based on the image size. Alternative, you could add an empty div below the image and adjust its height based on the image size.
To make it work just make the img and test_* position to relative instead of absolute. Why ? Position absolute removes element from the flow, that means that because all your container's childrens are absolute, it is like your container has no content, that's why it collapse.
.container{
display: block;
position: relative;
}
.container img{
width: 100%;
position: relative;
top:0;
left:0;
}
.container .text_left{
position: absolute;
top:90%;
left:5%;
color: #fff;
}
.container .text_right{
position: absolute;
top:90%;
right:5%;
color: #fff;
}
<div class="container" >
<img src="https://placeimg.com/640/480/any" alt="">
<div class="text_left">
<h2>HEADING 1</h2>
</div>
</div>
<div class="container" >
<img src="https://placeimg.com/640/480/any" alt="">
<div class="text_right">
<h2>HEADING 2</h2>
</div>
</div>
Sorry about the specific question - I'm writing up this page for my portfolio http://ashereinhorn.com/portfolio/2014/hex-tile-world-script-page-unfinished/
however the column is so narrow that it results in some undesirable formatting for the dark, code segments.
How can I make these section expand further to the right (and left?) so that there is less line wrapping.
I'm writing it all in HTML so a solution with just that would be perfect. I'm not against solutions where you have to expand them or they open a floating element that displays the content either.
Thank you in advance.
Do you mean like this?
pre {
background-color: #272a2c;
color: #8f969c;
padding: 30px 15px; // reduces the padding for right and left
display: block;
left: 0;
position: absolute;
width: 1200px;
}
.single-project .entry-content {
position: relative;
}
You cannot break out of your website container unless you actually close it. This is a hack to make it work, but it's not ideal for a multitude of reasons. Using absolute positioning is usually not recommended.
In your case, you would have to close the "wrapper modular clearfix" div, and start another div that has a larger width.
<div class="wrapper modular clearfix">
//Article text
</div>
<div class="wrapper code-example">
//Code insert
</div>
I am currently learning polymer and encountered the following problem:
I'd like to have a split layout where the left side is a list of items and the right side can display additional information about the selected item.
I tried to achieve this with the following (simplified) code:
<body fullbleed vertical layout>
<style type="text/css">
.card_container {
margin: 16px;
position: relative;
}
.details_container {
/* position: fixed;
*/ }
.white-bg {
background-color: white;
margin: 8px;
max-width: 650px;
}
.white-bg.details {
margin: 24px 24px;
}
</style>
<div layout horizontal center-justified>
<div id="card_container" class="card_container" layout vertical>
<div class="white-bg">
<h1>Title</h1>
</div>
<div class="white-bg">
<h1>Title</h1>
</div>
<div class="white-bg">
<h1>Title</h1>
</div>
<div class="white-bg">
<h1>Title</h1>
</div>
</div>
<div class="details_container" layout vertical flex>
<div class="white-bg details" flex relative>
<p>Some sample text...</p>
</div>
</div>
</div>
</body>
The layout looks quite nice, until I assign position: fixed to the details_container div.
I created a JSBin that demonstrates the problem: http://jsbin.com/ziqayufojeco/2/edit?html,output
Just uncomment the position: fixed; attribute.
Any ideas how to fix that?
I don't actually know what the specifications say, but I'm not surprised that you cannot use flex in combination with position: fixed.
The flex attribute (which is shorthand for CSS flex properties) tells CSS how to position and size a element relative to it's sibling elements. OTOH, position: fixed tells CSS that you want the element to be very specifically positioned.
I can understand that you would like the calculated size to be the same regardless of position: fixed, but it doesn't work that way. I'd like to suggest an alternative, but I can't figure out what outcome you were after.
I dont know why postion: fixed is not working in polymer starter app element.
But to adding fixed element functinality you can use postion: sticky with display:flex
I'm just starting to learn html and css and I've been looking at various websites to practice.
This particular website (http://jsfiddle.net/Hexapod/CWB39/260/show/) had caught my attention but I'm having trouble figuring out how the elements here are working.
If you go to the website, there are "facts boxes" that were made using div elements. These div elements however, are grouped together by a another div element. This div element has an absolute position and an offset of 0px in all directions. Can anyone explain to me what the purpose of this is?
Here's what it looks like:
#container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
<div id="container">
<div id="factbox1" class="info">
<!-- some code -->
</div>
<div id="factbox2" class="info">
<!-- some code -->
</div>
</div>
Thanks in advance!
PS. If I'm doing something wrong with the formatting or anything, please inform me! This is my first time posting here.
This is in place to stretch the element to the full extremes of the closest parent with position set. In this case, to extend the full height and width of the browser viewport.
Its basically telling the element that its top should meet the top side of its parent, its bottom should stretch to the bottom of its parent and the same for its left and right sides.
An alternative would be to use the below CSS:
html, body, #container{
height:100%:
width:100%;
}
The difference being that by using position:absolute the option for layering content is provided.
You can use the inset shorthand these days (not supported by IE of course)
#container {
position: absolute;
background: #002D62;
inset: 0px;
color: #fff;
}
<div id="container">
<div id="factbox1" class="info">
Full with and height 😄
<!-- some code -->
</div>
<div id="factbox2" class="info">
<!-- some code -->
</div>
</div>
I've got a "Dialog" widget that pops up with a z-index of 100. When I create another popup (a floating div), it appears underneath the dialog widget, because I haven't explicitly set the z-index on the new popup.
The structure ends up looking something like
<div id="dialogbox" style="z-index: 100">
<div>
<div id="widgetThatCausesThePopup" />
</div>
</div>
<div id="popupHiddenBehindTheDialog" />
I'm using GWT to generate this HTML. There can be arbitrary levels of nesting between dialogbox and widgetThatCausesThePopup, and the actual z-index may be arbitrary as well.
How can I ensure that the new div will be shown in front of the dialogbox?
If your new dialog windows are inserted in the DOM after the previous ones:
You can set the z-index: 100 on all dialog windows. When elements with the same z-index are found, order in the DOM determines which is on top.
The natural CSS solution is to:
Make sure, that "dialogbox" gets a stacking context. This can be done by
setting z-index to something else than auto,
and additionally position to either relative, absolute or fixed.
Then add your popup as a child to "dialogbox". If it isn't yet, you can always move it in the DOM.
In that case, your popup doesn't need a z-index at all. This completely avoids the "z-index hell".
Example:
<!doctype html>
<html>
<head>
<style type="text/css">
#dialogbox {
width: 400px; height: 300px;
top: 0; left: 0;
background-color: red;
}
#popup {
width: 500px; height: 200px;
top: 0; left: 0;
background-color: green;
}
</style>
</head>
<body>
<div id="dialogbox" style="z-index: 100; position: absolute;">
<div>
<div id="widgetThatCausesThePopup" >
<button>Show popup</button>
</div>
</div>
<div id="popup" style="position: absolute;">
<!-- Empty divs cause really weird problems.
Always make sure, that your divs aren't empty! -->
</div>
</div>
</body>
</html>
The stacking context even allows you to use z-indexes relative to the context, if you need them (note, that the child order doesn't matter, and the z-indexes don't have to be larger than 100):
<div id="dialogbox" style="z-index: 100; position: absolute;">
<div id="popup" style="position: absolute; z-index: 2;">
<!-- Empty divs cause really weird problems.
Always make sure, that your divs aren't empty! -->
</div>
<div>
<div id="widgetThatCausesThePopup" style="position: absolute; z-index: 1;">
<button>Show popup</button>
</div>
</div>
</div>
Get the computed z-index of the parent (see In GWT how to know all the styles applied to a given element (by id or class name)) and increment it for each child.