Please look at following
Fiddle1
Fiddle2
HTML:
<div class="container">
<div class="content">
<div class="space">
</div>
<div class="item">
DIV1
</div>
</div>
</div>
CSS:
.container {
position:relative;
height: 100%;
width:100%;
}
.content {
height:100%;
border:1px solid red;
}
.space {
margin-top:80px;
border:1px solid blue;
}
.item {
position: absolute;
top:80px;
left:50px;
font-size:20px;
font-weight:bold;
color: #999999;
text-align: center;
}
The only difference is the border statement in content class but output is different.
Can you please explain what is happening?
It's margin collapsing. The border, when present, prevents the top margin of the .space from collapsing. Without the border, it collapses with the top margin of all its ancestors including body (which is the 'base' for the position of .item), causing them to move 80px down.
.item is getting position absolute with top as 80px relative to .cointainer DIV. Element with position as absolute will position itself with reference to its parent whose position is defined as relative or to BODY element. In your case top most parent element .container is having positon: relative so for element .item top: 80px will be calculated from top of .container and since .item is positioned as absolute it will contained only withing its parent with position: relative or body element, so in your case its a top most element .container
Related
Hi i just started trying to teach myself HTML/CSS a few days ago. I really dont like asking for answers id rather figure it out myself. But now i need some help so i can find peace and FINALLY move on. Im trying to make a horizontal menu with one drop down button and links in it.
.container {border:1px solid black;
text-align:left;
border-radius:10px;
overflow:hidden;}
.container a {padding:15px;
display:inline-block;
font-size:30px;
text-decoration:none;
background-color:grey;
color:white;}
.aboutcontainer {display:inline-block;}
.about {position:absolute;
display:none;
width:100%;}
.about a {display:block;
text-align:left;
font-size:20px;
padding:15px 5px;}
.aboutcontainer:hover .about {display:block;}
.container a:hover, .aboutcontainer:hover .button {background-color:red;}
.about a:hover {background-color:lightgrey;}
<div class="container">
<a href="#">Home</a
><a href="#">Media</a
><a href="#">Store</a
><div class="aboutcontainer">
<a class="button" href="#">About</a>
<div class="about">
About2
About3
</div>
</div>
</div>
I cant figure out how to make the dropdown menu automatically the same width as the drop down button. I figured that perhaps the drop down menu (.about) which has a width:100% would stretch as far as the div its contained in (.aboutcontainer) which is displayed as inline-block whose width would be determined by the "About" text-link inside of it. But the drop down menu, when displayed, goes the full length of the screen. So it seems to be the case that actual content inside an inline:block element will not define the width of that element. And although the border of an inline:block element wraps around its content automatically, its just an illusion and its actual width is really the full length of the screen, if no fixed widths have been defined in any of the parent divs (hope im using the right terminology). So is there a way to do this without any fixed widths assigned? If not then thats ok. Ill finally have my answer and know what im trying to do is impossible and stop wasting time on it.
Yes, an inline-block element will size to fit it's content.
Why isn't it working in your situation? You have .about positioned absolute.
When you position an element absolutely, you are taking it out of the HTML structure, meaning:
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.
MDN Docs
This means the element is pulled out of the structure, and no longer influences the surrounding elements, or its parent.
An example of this:
.parent {
background: blue;
}
.child {
background: red;
position: absolute;
top: 20px;
}
Below is the parent element, with a blue background.
<div class="parent">
<div class="child">Bye bye parent</div>
</div>
If you run the snippet above, you don't see the parent or it's blue background at all, because the child element has been positioned out of it, and relative to the viewport.
Now back to your problem. How can we make the absolute positioned element be positioned relative to its parent, instead of the viewport?
The answer is extremely simple: position:relative; on the parent:
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
Relative positioning means that the absolute child elements will be positioned relative to the parent. While absolute will still pull the element out of the HTML structure, and it still won't influence the surrounding elements or its parent, the absolute element will now be influenced by its parent. So, in your case, setting width to 100% will be 100% of .aboutcontainers width, instead of 100% of the viewports width:
.container {
border: 1px solid black;
text-align: left;
border-radius: 10px;
}
.container a {
padding: 15px;
display: inline-block;
font-size: 30px;
text-decoration: none;
background-color: grey;
color: white;
}
.container>a:first-of-type {
border-radius: 10px 0 0 10px;
}
.aboutcontainer {
display: inline-block;
position: relative;
}
.about {
position: absolute;
display: none;
width: 100%;
}
.about a {
display: block;
text-align: left;
font-size: 20px;
padding: 15px 5px;
}
.aboutcontainer:hover .about {
display: block;
}
.container a:hover,
.aboutcontainer:hover .button {
background-color: red;
}
.about a:hover {
background-color: lightgrey;
}
<div class="container">
<a href="#">Home</a
><a href="#">Media</a
><a href="#">Store</a
><div class="aboutcontainer">
<a class="button" href="#">About</a>
<div class="about">
About2
About3
</div>
</div>
</div>
You'll notice in the snippet above, we had to remove overflow:hidden from .container. That is because now that the element is positioned absolutely within its parent element, it gets hidden when it overflows from .container. You had applied overflow:hidden so the end elements wouldn't stick out over the border-radius, so I simply added a border-radius to the first element.
Here, I removed overflow: hidden from .container and added position: relative to .aboutcontainer.
.container {
border: 1px solid black;
text-align: left;
border-radius: 10px;
}
.container a {
padding: 15px;
display: inline-block;
font-size: 30px;
text-decoration: none;
background-color: grey;
color: white;
}
.aboutcontainer {
display: inline-block;
position: relative;
}
.about {
position: absolute;
display: none;
width: 100%;
}
.about a {
display: block;
text-align: left;
font-size: 20px;
padding: 15px 5px;
}
.aboutcontainer:hover .about {
display: block;
}
.container a:hover,
.aboutcontainer:hover .button {
background-color: red;
}
.about a:hover {
background-color: lightgrey;
}
<div class="container">
<a href="#">Home</a
><a href="#">Media</a
><a href="#">Store</a
><div class="aboutcontainer">
<a class="button" href="#">About</a>
<div class="about">
About2
About3
</div>
</div>
</div>
I'm trying to create a page with a fixed div above the main div. The main div should be below the fixed div but instead it overlaps the fixed div.
Adding margin-top positions the main div below the fixed div but, it also clips the same amount off of the bottom of the page.
What am I doing wrong?
Live Demo
body {
background-color: #00FFFF;
}
.fixed {
width: 100%;
position: fixed;
background-color: #C0C0C0;
}
.main {
background-color: #FFFFFF;
}
.expand {
height: 800px;
}
<div class="fixed">
fixed div line 1<br />
fixed div line 2<br />
fixed div line 3<br />
</div>
<div class="main">
<div class="expand"></div> <!-- For demo purposes only -->
</div>
To achieve the effect that you're looking for, you can use a combination of display: table on a parent and display: table-row on each of the direct descendants.
Set height: 100% on html, body, .wrap, .main, .inner.
Wrap the current "parents" in a div with class .wrap
Set display: table and width: 100% on .wrap.
Set display: table-row on .fixed, .main
Wrap the text content of .main in a div with class .inner
Set overflow: auto on .inner
This way, no matter what the size of the top div is, the .main will always be underneath .fixed.
display: table is supported by IE > 7 and all other modern browsers.
html, body, .wrap, .main, .inner {
height: 100%;
margin: 0;
}
.wrap {
box-sizing: border-box; /* Include border width in sizing */
border: 8px solid #00FFFF; /* Use a border instead of relying on margins */
display: table;
width: 100%;
}
.fixed, .main {
display: table-row;
}
.inner {
overflow: auto;
}
.expand { height: 800px; }
.fixed { background-color: #C0C0C0; }
<div class="wrap">
<div class="fixed">
fixed div line 1<br />
fixed div line 2<br />
fixed div line 3<br />
</div>
<div class="main">
<div class="inner">
<div class="expand"></div> <!-- For demo purposes only -->
</div>
</div>
</div>
You just need to add margin-top to the main div that is equal to the height of the fixed div. For example, if you have a 24px tall fixed div:
#fixed-div {
position: fixed;
height: 24px;
}
#main-div {
margin-top: 24px;
}
Try adding "position: relative" on the top div.
<div style="width: 100%; opacity: .6; position: fixed; margin-left: auto; margin-right: auto; background-color: #C0C0C0; position: relative;">
fixed div line 1<br />
fixed div line 2<br />
fixed div line 3<br />
</div>
You need a top margin on you main div with a value greater then your fixed divs height So if your fixed div is 60px high Make a margin-top:62px for the main div also you could get rid of margin-left and right and do all margins like this margin:60px auto; if the 60px is no good for you on the bottom of the main div you could do margin:60px auto 0px auto;
Hope this helps
--Joshua Joseph Bissot
Have good answer, curtsey of Joshua K.
I'll define a class named no-js (can be any class name) which sets position of 'fixed' div to relative. That will put the "fixed" div above the main div - though not actually fixed in place. Then with JavaScript I set the div to position: fixed and set the margin-top of the main div to the height of the "fixed" plus a fudge factor of say 5 or 6 px.
That way if JavaScript is enabled, the "fixed" div will actually be fixed and the margin-top of the main div will move it down to show the entire div.
If JavaScript is not enabled, the "fixed" div will still be visible, and above the main div, but it will scroll with the page.
Can I mark an answer as best answer? If so, how?
Stop the presses;
I could just set the position of the "fixed" div to relative (in a CSS class or using stye= on the element) and use JavaScript to change it to fixed and set the margin-top of the main div accordingly. That, I think, removes the need for another class named no-js or such.
I have created another page incorporating the changes needed to accomplish the task. It is at http://thetesting.site/fixeddiv/fixedheader-fixed.html
I got a problem in which my DIV which is position:relative doesn't acknowledge his position:absolute children. Therefore it causes a problem which the next position:relative div is showing at the incorrect spot.
CSS:
#header{
margin: 0 auto;
position:relative;
width:740px;
outline:2px solid black
}
#header #logo{
position:absolute;
width:218px;
height:69px;
background-image:url('../images/Logo.png');
top:15px;
left:30px;
text-indent: -999px;
overflow:hidden !important;
}
#header #logo a{
width:218px;
height: 69px;
}
#header h1{
color:#437297;
font-size:26px;
font-weight: normal;
position:absolute;
top:25px;
right:15px;
letter-spacing: 0.5px;
}
/* content */
#content{
position: :relative;
margin: 0 auto;
width:1024px;
outline: 1px solid red;
min-height:10px;
}
HTML:
<div id="header">
<div id="logo">some text</div>
<h1>My Page</h1>
</div>
<div id="content">
</div>
To demonstrate the problem:
http://jsfiddle.net/qBbYR/
The problem is, the BLACK outlined DIV is the Header DIV which should be at the top of the page, and the RED outlined DIV is the CONTENT DIV which should be right after the HEADER DIV.
As you can see, the header DIV ignores it's children because they are positioned absolute, and that causes design problems.
What can I do to solve this problem?
Absolute positioning takes elements out of normal flow. If you want them to influence the height of their containers, don't position them.
Use padding, margin, floats and display inline-block instead.
Well, positioned tags are kind of autistic. If you need a container to adjust to its children's dimensions, you have two choices:
Explicitly set container dimensions; or
Make children not-positioned (better IMO).
Two divs are side by side, one is floating left with a width of 25%, the other just has a width of 75%. But when padding is applied on the right hand div, the padding doesn't work properly.
Here is a JSfiddle example:
http://jsfiddle.net/88upt/
<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>
CSS
#top {
float: left;
background-color: green;
width: 25%;
height: 100%;
}
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
}
#bottom {
background-color: red;
min-height: 70%;
}
Can someone explain to me why this is happening?
Thanks
Floating something is kind of like making it's position absolute. It will hover on top of it's neighboring containers. Add a margin-left equal to the width of the floated element to make the container the correct width.
http://jsfiddle.net/88upt/4/
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
margin-left:25%
}
EDIT Elaborating a bit more.
The floated element pushes the content of the sibling elements over. It will not push the left side of the content's element over. The padding is there it's just hidden by the floating element.
Add overflow = "auto" in the #middle.
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
overflow: auto;
}
In this way, you don't need to know the width of floating element.
Width doesn't factor in padding.
Source: http://www.w3schools.com/css/css_boxmodel.asp
The width only applies to content, not padding, border, or margin.
You can find more information here.
I have an outer div
position: relative;
overflow: hidden;
min-heigth: 450px;
containing a div
position: absolute;
top: 10px;
right: 10px;
The inner div is bigger than the min-heigth of the outer div and I see that the outer div is not scaling to the content of the inner div. Capping off the bottom content of the inner div.
How can I define the outer (or inner) div to scale vertically to the content (of the inner div)
Thanks
#trascher; It's possible but you have add extra markup because when you give a child div an absolute position then it's parent div is not consider it's height.
Check this http://jsfiddle.net/sandeep/6UksD/1/
CSS:
#outer
{
position: relative;
min-height: 450px;
background:red;
margin:10px 0 0 10px;
width:200px;
overflow: hidden;
}
#inner
{
position:relative;
background:black;
height:600px;
width:100px;
margin:10px 0 0 10px;
float:left;
}
#abinner
{
position:absolute;
background:yellow;
height:100%;
width:100%;
}
HTML:
<div id="outer">
<div id="inner">
<div id="abinner"></div>
</div>
</div>
First remove the min-heighton your outer div, and then instead of absolutely positioning the inner one, put a 10px padding on the outer one.
#outerDiv {
position:relative;
overflow:hidden;
padding:10px;
}
#innerDiv {
/*Stuff*/
}
Do provide us with an example though, it's hard to see the context...
Here's the stuff
<div id="outer">
<div id="inner"></div>
</div>
#outer
{
width:300px;
height:auto;
}
#inner
{
width:200px;
height:300px;
}
I think this is thing you want:http://jsfiddle.net/anish/ZjQTt/
set inner content height according to your wish.the outer div expanded automatically.
Absolute positioning doesn't increase the height of it's parent element.
You either set the height of the outer div manually
You make the inner div to have margin top/left of 10px
You increase the height of the outer div using javascript.