I know there are several similar questions answered here, but I can not seem to get this working.
I have two parent divs - one is like a frame with a border and padding, the second is a solid black background, and the third is where a transparent image will actually be placed. I need the two parent divs to expand their height based on the image's height.
I have this working for the div with the black background, but I can't get the parent div with the border to expand it's size:
Here is the fiddle: http://jsfiddle.net/vpdj4kst/
#builder_container {
width: 100%;
/*overflow: auto;*/
position: relative;
padding: 8px;
border: 1px solid #ccc;
margin-bottom: 15px;
display: inline-block;
clear: both;
}
#builder_contents {
background: #000;
width: 100%;
height: 100%;
position: relative;
display: block;
}
.builder_img {
width: 100%;
height: auto;
position: absolute;
}
<div id="builder_container">
<div id="builder_contents">
<img class="builder_img" src="image.png" />
</div>
</div>
This is because you have set the image to position: absolute; which will take it out of the flow causing the parent elements to act as if it wasn't there.
Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements.
Position (https://developer.mozilla.org/en-US/docs/Web/CSS/position)
Remove position: absolute; from .builder_img and the parent containers will react to its height.
#builder_container {
width: 100%;
/*overflow: auto;*/
position: relative;
padding: 8px;
border: 1px solid #ccc;
margin-bottom: 15px;
display: inline-block;
clear: both;
}
#builder_contents {
background: #000;
width: 100%;
height: 100%;
position: relative;
display: block;
}
.builder_img {
width: 100%;
height: auto;
}
<div id="builder_container">
<div id="builder_contents">
<img class="builder_img" src="http://coolspotters.com/files/photos/1036167/adidas-st-girls-straw-hat-profile.png" />
</div>
</div>
Related
There are lots of card to be showed and I need to show menu when I hover one of the cards.
I use position: absolute; for menu and use position: relative; for the card, but why the scrollbar appeared when I hover on the card ？
<!DOCTYPE html>
<html>
<head>
<style>
.box {
height: 240px;
width: 200px;
overflow: auto;
border: 1px dashed red;
}
.card {
height: 120px;
width: 120px;
border: 1px solid blue;
position: relative;
}
.menu {
display: none;
height: 400px;
width: 200px;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(orange, pink);
}
.card:hover .menu {
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="card">
<div class="menu"></div>
</div>
</div>
</body>
</html>
The scrollbar has nothing to do with your positioning, it is a result of overflow: auto; on your .box element.
overflow: auto; will show a scrolling bar if a child element overflows its parent container where overflow: auto; is set.
Seeing as the .box parent-element has a fixed size value height: 240px; while its child element .menu has height: 400px;, it will cause a scrollbar to appear because there is an overflow of 160px.
While #Yong is correct with document flow in his answer with the position: absolute; property, seeing as you have fixed height and width on all your elements, position: absolute; doesn't actually do anything in this exact reproducible example.
If I understand your problem correctly, a simple solution to your problem if you want to keep the fixed width and height on your .box element, you can simply disable the scrollbar by applying display: none; to the .box pseudo-element ::-webkit-scrollbar.
(NOTE: As of February 28th, 2022 this is still not supported in Firefox).
Read more about browser support at https://caniuse.com/?search=%3A%3A-webkit-scrollbar
Example with no positioning properties & -::webkit-scrollbar
.box {
height: 240px;
width: 200px;
border: 1px dashed red;
overflow: auto;
}
.box::-webkit-scrollbar{
display: none;
}
.card {
height: 120px;
width: 120px;
border: 1px solid blue;
/*position: relative;*/
}
.menu {
display: none;
height: 400px;
width: 200px;
/*position: absolute;
top: 0;
left: 0;*/
background: linear-gradient(orange, pink);
}
.card:hover .menu {
display: block;
}
<!DOCTYPE html>
<html>
<body>
<div class="box">
<div class="card">
<div class="menu"></div>
</div>
</div>
</body>
</html>
If you want to remove overflow altogether, you can apply overflow: hidden; to .box.
Keep in mind the fixed height of 400px on the .menu element will not apply as the fixed height of 240px on the .box element will hide the remaining 160px. I hope this solves your problem, but a little more detail would help!
absolute
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to its closest positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block. -MDN
.menu is positioned absolute therefore it is positioned relative to .card which is the closes positioned ancestor to it.
relative
The element is positioned according to the normal flow of the
document, ... -MDN
And because .card is positioned relative it would still take space and position according to the normal flow of the document. Therefore, it would still be taken into consideration whether the .box or its parent would overflow or not.
with set position: absolute; for .menu and position: relative; for .card you able to change the position of .menu with top bottom left right properties relative to its first positioned (not static) ancestor element( .card position ).
but in your question, the absolute or relative position is not the cause of the scrollbar appear . The reason is the owerflow property .
the default value for owerflow is visible that create no owerflowing . And you created the scrollbar by setting it auto because the size of menu is larger than card.
.box {
height: 240px;
width: 200px;
/* overflow: auto; */
border: 1px dashed red;
}
.card {
height: 120px;
width: 120px;
border: 1px solid blue;
position: relative;
}
.menu {
display: none;
height: 400px;
width: 200px;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(orange, pink);
}
.card:hover .menu {
display: block;
}
<div class="box">
<div class="card">
<div class="menu"></div>
</div>
</div>
Recently I have come across a problem for which I am not finding any appropriate solution.
Below is the image which gives an idea of what i am trying to achieve:
The div shown by the arrow is the mark of the problem which i am finding a solution for.
The problem is I want the div to be extended to full screen.
This div is inside a parent div who has a fixed width due to which i am not able to extend my image to full screen.
Have tried giving overflow to parent but isn't working.
I have tried below solution which is working to a certain extent but need a reliable solution.
width: 100%;
left: 0;
position: absolute;
margin-left: calc(-31.5vw);
align-content: center;
Could someone please provide some solution to this?
html, body
{width: 100%; height: 100%; overflow: hidden;}
#parent{
display: block;
background-color: yellow;
border: 1px solid red;
position: fixed;
width: 200px;
height:100%;
}
#child1{
background-color: red;
display: block;
border: 1px solid yellow;
position: absolute;
width: 100vw;
margin-left: calc(200px - 100%);
//top:0px
}
<div id="parent">parent with position: fixed
<div id="child1">child wrapper (uncomment top to fit the parent wrapper)</div>
</div>
use Viewport Sizes so it will cover the whole page (vw and vh)
#first {
width: 100px;
height: 100px;
background:gray;
position: fixed;
top: 0;
left: 0;
}
#second{
width: 100vw;
height: 100vh;
background:blue;
position:absolute;
}
<div id="first">
<div id="second">
something
</div>
</div>
The below code snippet should work, if I understand your question correctly. Setting the width of the child div to 100vw makes the div 100% of the width of the viewport (window).
Also note that in order to get the child to start at the left of the viewport and not the left of the parent, I gave the child a position of absolute and a left of 0. Because the parent is not positioned, it starts the left of the child at the left of the viewport (the closest positioned ancestor).
#parentDiv {
width: 250px;
height: 250px;
margin: 0 auto;
background-color: orange;
border: 2px solid red;
}
#childDiv {
/* 100vw is 100% of the viewport width. */
width: 100vw;
height: 50px;
background-color: lightblue;
box-sizing: border-box;
border: 2px solid green;
position: absolute;
left: 0;
}
p {
text-align: center;
}
<html>
<body>
<div id="parentDiv">
<p>Parent</p>
<div id="childDiv"><p>Child</p></div>
</div>
</body>
</html>
I want to get my footer to look like this Image. 4 columns inside a triangle shape.
However for some reason it appears that all four columns get stacked on-top of each other, which I confirmed by slight changing the top margin. When I comment out the #right_triangle, I get 4 columns, as you would expect. I believe its the border on the actual triangle that's doing it, but I cant figure out a way to do it or get around it.
Below is the code I'm using.
#right_triangle {
width: 0;
height: 0;
border-bottom: 300px solid #009933;
border-right: 2000px solid transparent;
}
#footer_column1 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column2 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column3 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column4 {
margin-top: 200px;
width: 25%;
float: left;
}
<div id="footer">
<div id="right_triangle">
<div id="footer_column1">Hello</div>
<div id="footer_column2">Hello</div>
<div id="footer_column3">Hello</div>
<div id="footer_column4">Hello</div>
</div>
</div>
Reason:
The problem as you've correctly guessed is with the #right_triangle but it is not because of border. It is because of width: 0 on this element and width: 25% on child #footer_column* elements. May be you overlooked it (or maybe you haven't understood the concept fully) but a percentage width on a child element would use the parent's set width as reference for calculation. Thus the width of all child elements are nothing but 0px. Since they are floated, the second and subsequent elements are offset from their previous sibling only by the width of the previous element(s) and they don't have any margin on the right also. So, effectively they are all placed at 0px on the left (on top of each other).
Again since they are floated they stay in same line unless their width exceeds a line's width. Here the width is also not more than a line's width (which is the parent's width). If you set even width: 1px to any of the first three elements, you'd notice that the others get pushed to the next line.
Solution:
Given how you need the screen's width to be split evenly across the 4 columns (from the image) and without changing your overall approach, you could make use of any one of the following solutions:
Give all the #footer_column* elements, a width in viewport units instead of in percentages, set display: inline-block instead of float: left and add white-space:nowrap to the parent. All these will make them get displayed on the same line without changing your markup.
#right_triangle {
width: 0;
height: 0;
white-space: nowrap;
border-bottom: 300px solid #009933;
border-right: 2000px solid transparent;
}
#footer_column1 {
margin-top: 200px;
width: 25vw;
display: inline-block;
}
#footer_column2 {
margin-top: 200px;
width: 25vw;
display: inline-block;
}
#footer_column3 {
margin-top: 200px;
width: 25vw;
display: inline-block;
}
#footer_column4 {
margin-top: 200px;
width: 25vw;
display: inline-block;
}
<div id="footer">
<div id="right_triangle">
<div id="footer_column1">Hello</div>
<div id="footer_column2">Hello</div>
<div id="footer_column3">Hello</div>
<div id="footer_column4">Hello</div>
</div>
</div>
Make all the 4 footer column elements as children of footer element instead of #right_triangle. Since the footer is a block element, it gets 100% of the screen width by default and so it would be split evenly across the 4 children. Note that you would have to absolutely position the #right_triangle and use z-index: -1 on it for this method.
#footer {
position: relative;
}
#right_triangle {
position: absolute;
width: 0;
height: 0;
border-bottom: 300px solid #009933;
border-right: 2000px solid transparent;
z-index: -1;
}
#footer_column1 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column2 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column3 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column4 {
margin-top: 200px;
width: 25%;
float: left;
}
<div id="footer">
<div id="right_triangle"></div>
<div id="footer_column1">Hello</div>
<div id="footer_column2">Hello</div>
<div id="footer_column3">Hello</div>
<div id="footer_column4">Hello</div>
</div>
Notes:
Using CSS transform for achieving the triangle in this question would be tough because it will require specific angle calculations for both skew and rotate (depending on which one is used) and hence not recommended.
Gradients could have been a good option for this one but unfortunately they get rough and jagged edges at very high dimensions and hence not recommended.
If you can change your overall approach, I'd recommend using SVG to create the triangle. It is not that SVG offers any great advantage for this particular shape but it is generally more useful to start learning and using SVG for shapes as it helps in creating a lot of complex ones with ease. Below is a snippet using SVG.
#footer {
position: relative;
}
#right_triangle {
position: absolute;
width: 2000px;
height: 300px;
z-index: -1;
}
#right_triangle path {
fill: green;
}
#footer_column1 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column2 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column3 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column4 {
margin-top: 200px;
width: 25%;
float: left;
}
<div id="footer">
<svg id="right_triangle" viewBox='0 0 2000 300'>
<path d='M0,0 2000,300 0,300z' />
</svg>
<div id="footer_column1">Hello</div>
<div id="footer_column2">Hello</div>
<div id="footer_column3">Hello</div>
<div id="footer_column4">Hello</div>
</div>
JSFiddle here.
This is an SSCCE demonstrating a div with display:table with three child divs having a display:table-cell. The problem is that the .blog-post-slide overlaps the .previous-slide-arrow, rather than being adjacent to it.
The question is why, and how should I solve this problem.
.post-main-area {
display: table;
width: 100%;
}
.post-main-area .previous-slide-arrow,
.post-main-area .next-slide-arrow {
border: 5px solid green;
/*check*/
width: 5%;
display: table-cell;
position: relative;
vertical-align: middle;
left: 20px;
}
.post-main-area .next-slide-arrow {
left: auto;
right: 20px;
}
.post-slide {
border: 5px solid wheat;
/*check*/
width: 90%;
position: relative;
}
<div class="post-main-area">
<a class="previous-slide-arrow" href="#"><</a>
<div class="post-slide">.
<!--<div class="left-part">.</div>
<div class="right-part">.</div>-->
</div>
<a class="next-slide-arrow" href="#">></a>
</div>
Because you shift the first cell 20px to the right:
position: relative;
left: 20px;
Then, as explained in Relative positioning, it overlaps the following cell.
Once a box has been laid out according to the normal flow or floated,
it may be shifted relative to this position. This is called relative
positioning. Offsetting a box (B1) in this way has no effect on the
box (B2) that follows: B2 is given a position as if B1 were not offset
and B2 is not re-positioned after B1's offset is applied. This implies
that relative positioning may cause boxes to overlap.
Instead, I would add some margin to the table:
width: calc(100% - 40px);
margin: 0 20px;
.post-main-area {
display: table;
width: calc(100% - 40px);
margin: 0 20px;
}
.post-main-area .previous-slide-arrow,
.post-main-area .next-slide-arrow {
border: 5px solid green;
width: 5%;
display: table-cell;
vertical-align: middle;
}
.post-slide {
border: 5px solid wheat;
}
<div class="post-main-area">
<a class="previous-slide-arrow" href="#"><</a>
<div class="post-slide">.</div>
<a class="next-slide-arrow" href="#">></a>
</div>
I wouldn't manually move the buttons and stuff, try adding display:table-cell; to .post-slide {} and getting rid of all of the left: and right: attributes like so;
.post-main-area {
display: table;
width: 100%;
}
.post-main-area .previous-slide-arrow,
.post-main-area .next-slide-arrow {
border: 5px solid green;
/*check*/
width: 5%;
display: table-cell;
position: relative;
vertical-align: middle;
}
.post-slide {
border: 5px solid wheat;
display: table-cell;
/*check*/
width: 90%;
position: relative;
}
This allows the computer to position everything like a table, and due to the widths and the order you write the elements in the html document, it should work.
Very basic question here, but it has been puzzling me for hours:
How do I make a relatively positioned div span its absolutely positioned content?
http://jsfiddle.net/X6ay2/10/
HTML
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer {
display: inline-block;
position: relative;
background: blue;
height: 100px;
padding: 20px;
}
.inner {
position: absolute;
width: 50px;
height: 50px;
background: red;
}
You can't directly really, as absolute positioned elements are out of the document flow and so don't really 'belong' to their parents anymore. A kind of workaround though is to set the absolute positioned div to 100% width and left:0, which will force it to extend to the width of the parent.
.outer {
display: inline-block;
position: relative;
background: blue;
height: 100px;
padding: 20px;
}
.inner {
position: absolute;
width: 100%;
left: 0;
height: 50px;
background: red;
}
http://jsfiddle.net/X6ay2/14/
A caveat to this is if the inner div has padding, it will extend beyond 100%. To stop this, make the inner div use the border-box box-sizing property.
.inner {
padding: 10px;
box-sizing: border-box;
-moz-box-sizing:border-box;
}
http://jsfiddle.net/X6ay2/15/
set width of the outer to suit your needs. The example has
width:50px
http://jsfiddle.net/X6ay2/12/