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).
Related
For example if I have a h1 element with the value "hello" with background-color: pink;, if the width of this element is shrunk to 10px it looks like this by default: https://i.stack.imgur.com/r4s4S.png .
I am wanting the pink part of the element (the background color) to be on the other side of the h1 element (closer to where "o" is, not "H").
What I have tried:
I have tried float: right on the h1 element but that moves the element off screen when the width is changed
and
I have tried giving h1's width a negative value (unsure why this didn't work).
My current HTML code:
<h1 style="background-color: pink; width: 10px;">hello</h1>
You can use ::after selector of h1 element for this.
h1{
display:inline-block;
position:relative;
}
h1::after{
position:absolute;
content:"";
top:0;
right:0;
width:10px;
height:100%;
background:pink;
z-index:-1;
}
<h1>hello</h1>
You can use a box-shadow for this:
h1 {
display: inline-block;
box-shadow: -10px 0 inset pink;
}
<h1>hello</h1>
I am puzzled by nested DIV's with Position set to absolute, perhaps someone could guide me :)
My goal is: 1 navbar with 2 div's for points and life, both containing text and 1 icon, i want to absolute position the div's so i can later manipulate them via jQuery.
my problem is, when i nest elements within my points and life div, they go all bananas for me, the overlap and top/right does not seem to have any effect, also the elements within the div's does not comply to my position:absolute, i've tried all sort of combinations with relative, absolute, display:block etc. but without any result.
i compiled a Fiddler to help visualize my problem:
Fiddler link
if i change the div's within points/life the icon seems to behave, but the h2 text is still giving me problems ?...
any idea/solution to my nested div chaos :D. .
<div class="gameWrapper">
<div class="navBar">
<div class="points">
<h2>points</h2>
<div class="imageClass"><div>
</div>
<div class="life">
<h2>life</h2>
<div class="imageClass"><div>
</div>
</div>
</div>
.gameWrapper{
position: absolute;
overflow:hidden;
width:100%;
height:100%;
background-color: #eee;
}
.gameWrapper .navBar{
position:relative;
overflow: hidden;
height:69px;
width:100%;
top:0;
left:0;
border: 1px solid #00f;
}
.gameWrapper .navBar .points,
.gameWrapper .navBar .life{
position: absolute;
overflow:hidden;
top:15px;
}
.gameWrapper .navBar .points .imageClass,
.gameWrapper .navBar .life .imageClass{
position: absolute;
top:0;
right:0;
width: 30px;
height:30px;
background: #fff url(http://drytech.dk/wp-content/uploads/2013/03/pdf-icon.png) no-repeat 0;
}
.gameWrapper .navBar h2{
position: absolute;
top:0px;
}
.gameWrapper .navBar .points{
right:140px;
width:150px;
height:30px;
border: 1px solid #0f0;
}
.gameWrapper .navBar .life{
right:50px;
width:80px;
height:30px;
border: 1px solid #f00;
}
I would start by closing your div tags for your imageClass elements.
Making the h2 tags inline would also help. You can either do this with display: inline; or changing them into a default inline element, like a span.
Here is the fiddle
Changing the h2 tags into span tags, like I did for the fiddle, removes some of the default styling. Something to consider if you choose that route.
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
I am working on a site where a 3rd party in-line HTML editor is being used (CKEditor). I have the editor control wrapped in a DIV that is relatively positioned and has a z-index that places is at the top of the visible stack. The problem is that on some pages there are images that are floating (float: right) on the right side. Some of the CKEditor styles are setting elements overflow property to hidden (overflow: hidden).
So although my containing DIV has a larger z-index than the floating image the CKEditor elements are not overflowing on top of the image. This creates the a result that looks as if the top right corner of the editor has been cut out.
Is there a way I can work around this without trying to edit CKEditor styles? Check out this example sinario:
http://jsfiddle.net/nmartin867/StHJA/
HTML
<body>
<div class="floating">
I'm floating!
</div>
<div class="container">
<div class="inner">
Why am I not overlapping?
</div>
</div>
CSS:
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:visible;*/ <--This would work
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
float:right;
}
You could do this but I am not sure if it applies to your situation.
.inner{
background-color:yellow;
position: absolute;
width:100%;
text-align: right;
}
Alternatively when you want to override third party styles but do not wish to edit them in the third party application you can recreate the same css class in your own stylesheet and force it to overwrite the third parties by using important! eg:
float: none !important;
Have you tried absolute positioning instead? Because you are floating a DIV that is not in the same container you want to overlap, it will position outside in the body itself. Also, you did not set the z-index for the floated DIV, so it will be layered behind because it is ahead of the other container in sequential order.
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:hidden;*/
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
/* float:right;*/
position:absolute;
top:0px;
right:0px;
z-index:2;
}
I am not sure if this is the effect you want to accomplish, but this will position the first container on the top.
This is how i configured the divs in HTML
<div id="wrapper"><div id="content"><div id="details-middle" class="box">
..........content.........
</div></div></div>
And this the css for the div's
#wrapper {
border-radius: 12px;
font-size:13px;
line-height:140%;
width:1008px;
margin:0 auto;
margin-top: 15px;
margin-bottom:15px;
}
#content {
margin-left:20px;
width:1008px;
}
#details-middle
{
float:left;
width:700px;
}
.box {border: 1px solid #CCC;
border-radius:12px;
margin-bottom:7px;
padding:10px 12px;
background-color: #FFF;
}
Everything is showing out of the div's ..
You are floating details-middle, which means non floated elements will not make room for it, unless they themselves are floated, or you clear the float.
My preferred solution is to give the parent overflow: hidden; which will force the parent to make room for its floated children:
#content
{
margin-left:20px;
width:1008px;
overflow: hidden; /* change here */
}
Not exactly sure what you're wanting, there isn't a lot of description in regards to your question, but you need:
$('#details-middle').text();
to gather just the text from that DIV.
If you're not wanting to display children elements of the DIV, then refer to this answer I gave recently - it might be your scenario too:
jQuery pull out text inside div but not in p tag