Please help me one way to make the parent div cover all the div inside it. These ones inside have position attributes? Please edit to my fiddle of my bellow comment.
Thanks.
You have to add "padding bottom" to contain the absolute child div.
.parent {
position: relative;
padding-bottom: 50px;
}
Padding bottom will contain the amount of "top: 50px;" you set for the .child-2 div. Since the child-2 has absolute value, you will have to change the padding-bottom value with the same value of the .child-2 top value. Sorry for my English.
Check this working fiddle: http://jsfiddle.net/3xw6r6hf/10/
Try this
.parent div{
code here
}
the added space and div selects all divs inside the parent container.
If I am understanding you correctly that is. Please let me know and ill help you accordingly.
EDIT: your issue is that you are using absolute positioning on your child2. Its in a relatively positioned parent so it won't mix well.
Related
I'm trying to span a child div the full width of the page from within a fixed width container parent div. I've found a few posts on how to do this but nothing seems to work for me. This overflow in particular seems to make it work with position: absolute; and left:0; right: 0; however, my div disappears when i use absolute positioning. The div does span the full width when using position: fixed; but I dont want fixed positioning :(
I've tried numerous things now and I'm pulling my hair out with this seemingly easy task. Please see my link below where I am using fixed position on my lightgray div for the sake of the example - if you change to absolute position you will see the div disappears.
Here is my test link - http://www.daybreakutah.com/test-3/
All and any help is much appreciated!
I have multiple Div's that I am using as buttons. If I set the postition to relative I can use float left to put them all on one row next to eachother. They also appear at the top of the parent div. I want the buttons to appear at the bottom of the parent div. Is it possible to give an element two position values as in
position: relative;
float: left;
and also
position: absolute;
bottom: 0;
I have a feeling this is a logic error of some kind and I am not sure how to do this logic.
just put them into wrapper
<style>div.buttons{position:absolute;bottom:0;}</style>
<div class="buttons">...</div>
if float is problem, use display:inline-block; for positioning add position:relative to the parent div, and use position:absolute to child divs.
Please note with display inline-block you need to extra hack for IE7 *display:inline (if you are still supporting it), and if you see white space btw buttons, refer
For example: http://jsfiddle.net/MYvYy/182/
I have a lot of 'inner_box' elements inside of 'outer_box'. Inner_box elements a absolute.
I would like to adjust the outer_box height so that all inner_box elements fit in the outer_box.
I know it can be done with js. But I don't really like adjusting style with scripts.
So I was wondering if it is possible to be done using CSS?
I have some workaround for this problem, it may not fit your situation but consider looking at it.
First of all we need to duplicate all absolute positioned div which you want to make the parent extend to its height.
So your HTML will look like this.
<div class="outer_box">
<div class="inner_box">1</div>
<div class="inner_box ghost">1</div>
</div>
Then we need to add the "ghost div" CSS like so:
.inner_box.ghost{
visibility: hidden;
width: 100%;
top: 0;
left: 0;
position: relative;
}
It's not possible with CSS alone.
Layout flow:
An element with position:absolute is outside of the layout flow of the rest of the page. As far as the relative parent is concerned, the absolute child occupies no space in the layout.
This is very useful if you need to have a pop-up or a nav menu nested inside a container, because it won't affect the layout of the container. That's the sort of use case that position:absolute is well-suited for.
Fixed height:
If you need absolute content to behave as if it's a part of the layout flow, use fixed height. Give the relative parent and the absolute child a fixed height, and avoid placing any variable-height child elements before the absolute child. If variable-height content does precede it, use a relative placeholder div with a fixed height at the location where the absolute child needs to appear.
If position:absolute has to be used and fixed height is not an option, use JavaScript.
I only can provide you with Javscript fix for this using jQuery lib.
let me know if you use it or not,
$('.outer_box').height($('.inner_box').outerHeight());
This line will fix the outer_box height
I have tried the Fixed height method, but on small screens it is overlapping. So I have solved this problem by setting overlay background layer to seperate division and content to another division.
<div style="position:relative; background-color: blue; background-image:url('banner.png'); background-size:cover; background-position: center top;">
<div style="position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background-color:#00000099;"></div>
<div style="position:relative;z-index:2;"><h1 style="color:#fff;">Hello</h1></div>
</div>
I have uploaded the code on Codepen: https://codepen.io/shahbaz8x/pen/GRjEBze
I fixed it by changing the position property of div.inner_box into
position:relative
if this is not what you'r looking for, or this didn't fix it, then you will have to use Javascript.
I tried positioning a div element using margin-bottom. For some reason the margin-bottom doesn't appear to affect the position of the element. I tried searching for an answer, though all answers had something to do with position:absolute, and I still couldn't get it to work.
However, I did manage to position it using a negative margin-top, but I'm still curious to know what causes it not to work.
Heres the fiddle showing the HTML/CSS.
(what I'm talking about is the image. The margin-bottom is set to 100px.)
Try to put the position absolute property in the DIV with the class "productImage". Like this, for example:
.productImage {
display: block;
float: left;
position: absolute;
left: 450px;
top: 60px;
}
Using this i've manipulated the image sucessfully. I hope it can help you.
A margin on the bottom would only work if the element was positioned via bottom somehow. Right now, it's positioned based on its top and that is being set by the H1. If you don't want the H1 to be a block, set it to display:inline-block. You could also set the width to be that of the paragraph.
As you noted, this is why a negative margin-top works.
Use one of the following:
Negative (or simply smaller) margin-top
position: relative and a negative top
Further explanation:
margin-bottom, in normal document flow, will only affect the position of elements that come after it, due to the fact that normal block-level elements will expand their height with the height of their children. Thus, the position of your element is determined by the elements before it, as well as its own margin-top.
Consider adding display: block.
I have to create a div that should look like
<div id=1>
<img></img>
<div id=2></div>
</div>
the div with id 2 should appear at bottom-right corner of image, and the size of image is not fixed what should be the css applied to div with id=2
div with id =1 has no position defined so uses default and same is with image and i cannot change these
only div with id=2 is editable to me. Please suggest something
If you need to position the second DIV on top of the first DIV, then the best solution would be to position the first DIV with position:relative; and then use absolute positioning on the second DIV. The first DIV would have to have a fixed width or to be floated to limit it's width to that of the image.
If you have no way to control the first div, you are in a bit of a tight spot. You still need to make sure that the first div has the same width as the image, either by setting width explicitly or by using a float. You could then position the second DIV with negative margin and using position:relative in conjunction with z-index to make it flow on top of the image. But that would mean you'd have to know the height of the second DIV to make up for that exact amount using negative margin. It would work, but the solution wont be as robust as the first.
If you just need to have the text below the image it's a bit easier, just using plain old floats. I've coded up a very basicc version of all the three scenarios here: http://jsfiddle.net/laustdeleuran/7CnSh/
I hope it's useful.
If you cannot edit the CSS for div #1, you're sort of screwed.
If you could just add {position:relative} to that div, you'd be in business. Absolute positioning will target the first parent with 'Relative' positioning. Since the default of div 1 is 'Static'...Positioning won't work.
'Float' might work, div 2 would technically need to come before div 1 - thus causing div 1 to inherit the float of div 2; however, that would also stack your image atop div 2 rather than below it. ... So Float is out as well.
IF you can add CSS to div 1 and div 1 img, then an easy fix is this:
* { margin:0; padding:0 }
#one {position:relative; text-align:right;}
#two {position:absolute; bottom:0; right:0}
Good luck...
I think you are looking for float style.
Using numeric ids is a bad idea, so let's say you've called your divs div1 and div2.
As you can't style #div1 or the image, the only thing you might try is setting a negative margin on #div2. Try either one of:
#div1 { display: inline-block; width: 100px; margin-left: -100px }
Or, simply:
#div1 { margin-top: -100px }
Where the 100px values are just arbitrary and you'll need to decide on appropriate values depending on what you're putting in #div2
First, some valid HTML. But I guess that wasn't your real HTML?
<div id="div1">
<img [..] />
<div id="div2"></div>
</div>
You could this with position: absolute and negative margins.
#div1 { display: table; position: relative; }
#div2 {
position: absolute;
width: 50px;
height: 50px;
margin-top: -50px;
right: 0;
}
display: table should make the first div match the width of the image. position: relative so the second div will position itself relative to first div.
This might work (not sure of relative+table). But I haven't tested it. If it does't work, I suggest that you work with JS to position the second div, it's very easy.
try this:
<div id="d1">
<img src="https://encrypted.google.com/images/logos/ssl_logo_lg.gif"></img>
<div style="margin-left:225px;margin-top:-25px;z-index:1000;position: relative;" id="d2">Your Text</div>
</div>
you can play with the margin-left and margin-top