I do not understand whats wrong with my code. I mean, section element has the height, display value of my DIV element is definitly block and i really dont know how it works and how to combine these two elements differently positioned. Please give me your solutions and advices to learn something new today.
div {
position: relative;
margin: 0 30%;
}
div section {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100px;
background-color: yellow;
}
hr {
height: 2px;
background-color: blue;
}
<div>
<section></section>
</div>
<hr>
You want your hr on the bottom of the first div, right ?
However, this is not working because the parent div have an default height: auto property.
This mean that the parent div will have the height of his children.
When you set a position: absolute on a child, you are breaking this system.
The parent will no longer take care of his child.
So, if you want to make it works, you have two solutions:
- set a custom height (height: 100px) on the parent div (not good)
- remove the absolute position on the child section (default :position: relative)
div {
position: relative;
margin: 0 30%;
}
div section {
height: 100px;
background-color: yellow;
}
hr {
height: 2px;
background-color: blue;
}
<div>
<section></section>
</div>
<hr>
Your element has height set to AUTO. If you want to change your div height you need to write this in css.
div {
position: relative;
margin: 0 30%;
height: 200px;
background-color: red;
}
I think This is because your div has no height itself that's why it is not visible and it is increasing according to its child element which is section and is in absoulute position. I am not sure what you are up to but If you want to show the section inside the div along with the div's height the you must include the css for your div .
I provided an assumption solution for you hope it helps you
div {
position: relative;
margin: 0 30%;
background-color: green;
height: 150px;
}
section {
position: absolute;
top: 50px;
right: 0;
left: 0;
height: 50px;
background-color: yellow;
}
div hr {
height: 10px;
background-color: red;
}
<html>
<head>
</head>
<body>
<div>
<p>your div</p>
<hr>
<section>your section</section>
</div>
</body>
</html>
Related
I have a div with unknown width and height, this div is one of the children of a bigger div.
#myDiv {
/* Blah blah blah */
}
#inner {
position: absolute;
width: 100%;
height: 100%;
}
<div id="myDiv">
<div id="inner"></div>
</div>
But the problem is that the #inner div doesn't fit properly, it's way bigger than its parent #myDiv while its width and height are set to 100%.
What am I doing wrong?
By making any element position: absolute; means: place me to the first parent that is position: relative; which is not always equal to its parent element.
And if there are other children you need to remember that one of them will be places "under" the element posiotionated absolutely.
Accepted answer didn't solve it for me. Parent element was already position: relative;.
This is what worked for me:
In the child element, instead of using height:100% use top:0; bottom:0; to fill up height, and left:0; right:0; to fill width up.
.child {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
One reason an absolutely-positioned child element can stick out from its relatively-positioned parent is if the parent has padding.
Take the following example:
.parent {
position: relative;
padding: 50px;
width: 250px;
height: 50px;
margin: auto;
background-color: blue;
}
.child {
position: absolute;
width: 100%;
height: 100%;
background-color: #ff000099;
}
<div class="parent">
<div class="child"></div>
</div>
As you can see, the actual width and height of the child is the same as the parent, however since the parent has padding-top and padding-left, the child's content is placed after the parent's padding. This makes the child stick out at the bottom and the right.
There are different ways to handle this, depending on the desired outcome.
If you want the child to perfectly cover the parent, either use bets's solution and set the top, right, bottom and left attributes on the child instead of the width and height, or just keep the width and height at 100% and set top and left to 0, like this:
.parent {
position: relative;
padding: 50px;
width: 250px;
height: 50px;
margin: auto;
background-color: blue;
}
.child {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #ff000044;
}
<div class="parent">
I am parent content
<div class="child">I am child content</div>
</div>
If you want the child to occupy all the space within the padding on the parent, you can use calc() to remove the parent's padding from the child div:
.parent {
position: relative;
padding: 50px;
width: 250px;
height: 50px;
margin: auto;
background-color: blue;
}
.child {
position: absolute;
width: calc(100% - 100px);
height: calc(100% - 100px);
background-color: #ff000099;
}
<div class="parent">
<div class="child"></div>
</div>
(Just remember to remove both the left and right padding from the child's width and the top and bottom from its height. That's why I am multiplying the padding by 2.)
Combining these, if you want the child to start after the top and left padding, but not stick out the right or bottom, only subtract the top and left paddings from the height and width of the child:
.parent {
position: relative;
padding: 50px;
width: 250px;
height: 50px;
margin: auto;
background-color: blue;
}
.child {
position: absolute;
width: calc(100% - 50px);
height: calc(100% - 50px);
background-color: #ff000099;
}
<div class="parent">
<div class="child"></div>
</div>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 4 years ago.
I have a parent div and two child divs. The second child div is variable height, but is absolutely positioned at the bottom of the parent div.
I want the first div to have a dynamic height based on the second div. I thought margin-bottom: 10px would specify the height of the first div to go up until 10px of the second div, but apparently this is not true.
Is there any workaround to get what I want?
HTML:
<div class="parent">
<div class="first">
Hello
</div>
<div class="second" >
</div>
</div>
CSS:
.parent {
height: 500px;
min-width: 500px;
position: relative;
background-color: red;
}
.first {
background-color: green;
margin-bottom: 10px;
}
.second {
height: 100px;
background-color: grey;
bottom: 0px;
box-sizing: border-box;
position: absolute;
width: 100%;
}
JSFiddle:
https://jsfiddle.net/4tjqsron/2/
The margin-bottom is only telling the browser "don't let anything come within 10px of the bottom of me," as you found out.
I think this may be an excellent opportunity to use the calc() css function!
Try this:
.first {
background-color: green;
height: calc(100% - 110px);
}
This should leave a 10px space between your first and second child element.
Basically it is telling the browser that the first element is to take up 100% of its parent minus 110px.
Please see this for more info on the calc() function.
https://www.w3schools.com/cssref/func_calc.asp
I hope this helps!
EDIT: It just occurred to me that this only works if your height is set elsewhere. You may need to adjust your use of the 100% argument depending on your current parent height settings. Even if this is the case, the calc() function should still prove useful.
I am not get your point very clearly, here is my solution that div.second will always align on the bottom of div.parent vertically:
.parent {
height: 500px;
min-width: 500px;
position: relative;
background-color: red;
}
.first {
background-color: green;
margin-bottom: 10px;
}
.second {
/* height: 100px;
background-color: grey;
bottom: 0px;
box-sizing: border-box;
position: absolute;
width: 100%; */
max-height: 100%;
position: absolute;
top: auto;
bottom: 0;
}
<div class="parent">
<div class="first">
Hello
</div>
<div class="second" >No matter how many content in this div, it will always lie on the bottom of the parent div</div>
</div>
Examining this HTML:
<div class="wrapper">
<div class="content">
</div>
</div>
<div class="footer">
<hr />
<p>some text</p>
</div>
and CSS:
.footer {
position: absolute;
height: 100px;
width: 100%;
bottom: 0;
background-color: black;
}
.wrapper {
padding-bottom: 100px;
background-color: blue;
height: 100%;
}
.content {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
}
html, body {
width: 100%;
height: 100%;
}
You can see that footer have position absolute and stay at the bottom of the page. wrapper will cover the remaining space and contain a content inside it. I want to vertical-align content without breaking the current layout. Do you have any suggestion?
Here is JSFiddle link. (Note: jsfiddle doesn't work as expected, there always a space beneath footer, this behavior doesn't occur when run the HTML file in browser).
Note: I don't want to use fixed height for wrapper, I want it covers all the remaining space, so please don't suggest me to use line-height
I tried the example here but it doesn't seem to work
NOTE I want the layout easy to modify (like add a header or content at the top) without breaking it therefore I want to avoid using absolute position on wrapper and content
NOTE 2 Sorry for not to clarify, actually, content doesn't have fixed size, its size depend on the content inside it, so the solution using negative margin doesn't work as I mentioned above
Here is one approach using the following CSS:
.footer {
position: absolute;
height: 100px;
width: 100%;
bottom: 0;
background-color: black;
}
.wrapper {
background-color: blue;
position: absolute;
top: 0;
bottom: 100px;
left: 0;
right: 0;
}
.content {
width: 200px;
height: 100px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
Use absolute positioning and then negative margins, since your content has well-defined
dimensions, this is relatively straightforward.
See demo at: http://jsfiddle.net/audetwebdesign/DgUV2/
For .wrapper, use the top, bottom, left and right offsets to stretch the div to the
full width and height, taking into account the 100px for the footer.
For .content, set top and left to 50%, the center point of the .wrapper and then adjust
for the center of the .content div using negative margins.
Remember to zero out the margin for the body or else you might see 10px whitespace
depending on your browser.
Add this to your .content
position: relative;
top: 50%;
transform: translateY(-50%);
Just 3 lines of code to vertical align
I was able to get it to work using Method 1 from the example you linked
I added the following:
.content {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
/* THE BELOW WAS ADDED */
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
html, body {
width: 100%;
height: 100%;
/* BELOW ADDED TO REMOVE EXTRA SPACE AROUND EDGES */
margin: 0;
}
jsFiddle of working example
I am trying to put simple divs and arrange them, but my child div disappearing from parent div even though I am using parent div with relative and child div with absolute positioning. I want connect_us_01 and registeration divs insideheader_block1. I am working towards responsive webdesign. Many thanks.
JSFiddle
<div id="header">
<div id="header_block1">
<div id ="registeration">reg</div>
<div id ="connect_us_01">social media</div>
</div>
<div id="header_block2">
<div id="crown_logo">logo</div>
<div id="nav">navigation</div>
<div class="contact_No_01">020324234233</div>
</div>
</div>
css
#header {
position: relative;
width: 100%;
background-color: #ff6a00;
}
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
background-color: pink;
}
#header_block2 {
margin: 0 auto;
width: 90%;
position: relative;
background-color: aqua;
}
/*----social media & connect us block*/
#connect_us_01 {
position: absolute;
width: 300px;
height: 50px;
right: 0;
background-color: blue;
}
#registeration {
position: absolute;
left: 1px;
width: 200px;
height: 50px;
background-color: brown;
}
Elements with position: absolute are taken out of the content flow, meaning they have no inherent height. Since the children have no height, the parent gets no height either, rendering the children invisible. You could resolve it by giving the parent a static height (as in, for instance, height: 100px), but that's not very practical and not responsive at all.
What you're looking for isn't position: absolute; it's float: left and float: right. Apply those properties to the children and give the parent overflow: hidden (or whatever method of clearing floats works best with your layout) and it'll work just fine.
To show block you refering to just add to #header_block1 a height parameter also.
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
height: 50px;
background-color: pink;
}
I have a main div contains two divs (one for heading and other for content). the main div is placed at the bottom of the html page with absolute positioning. When I hide content div, it sill takes up space in the bottom of the page.
I need to show only the header div to do a jquery toggle..
<div class="tll">
<div class="tllH">
</div>
<div class="tllC">
</div>
</div>
<style>
.tll{
background: yellow;
height: 100px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.tllH{
background: green;
height: 20px;
width: 100%;
}
.tllC{
background: magenta;
height: 80px;
width: 100%;
display: none;
}
</style>
For .tll, you set a height of 100px.
.tllH is only 20px and coincidentally .tllC is 80px.
This is because the height of main container is fixed,The solution is present in this fiddle.
Setting .tll{height: auto} fixed the issue!