Ran into a spot where I absolutely HAVE to use ap divs. The problem is: I can't find a way to clear my wrapper div. None of my tricks are working.
I wanna lose the height setting for wrapper div and still contain the ap divs.
Any ideas?
<pre>
<code>
#wrapper {
position:relative;
width:600px;
height:1200px; --- wanna dump this but can't find way to clear
margin-right: auto;
margin-left: auto;
background-color: #0CF;
z-index:100;
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1001;
left: 89px;
top: 329px;
background-color: #0C0;
}
#apDiv2 {
position:absolute;
width:100px;
height:50px;
z-index:1000;
left: 383px;
top: 36px;
background-color: #F39;
}
div id=wrapper
div id=apDiv1 closediv
div id=apDiv2 closediv
div-- close wrapper
Clearing is used for floats, not absolutely positioned elements. You cannot clear absolutely positioned elements.
You can't. You have to specifiy the height of the wrapper to contain the inner absolutely positioned elements. Absolutely positioned elements don't take up any space, therefore it's impossible for the wrapper to wrap around them.
And ap divs are wonderful when used in the right context. You shouldn't "yuck" them out of hand.
You can get highest child and append this highest height to parent by jQuery below
var t=0; // the height of the highest element (after the function runs)
var t_elem; // the highest element (after the function runs)
$("*",elem).each(function () {
$this = $(this);
if ( $this.outerHeight() > t ) {
t_elem=this;
t=$this.outerHeight();
alert(t);
}
});
Related
I have a div that is masked off in terms of its width. Inside, I have 2 divs of the same width floated, so 100% + 100%. This means that either the left is visible or the right is visible at any one time.
In fact, what I'm trying to achieve is almost exactly the same as this:
jquery slide div within a div
Just one difference though. The height of my parent isn't fixed, it's dependent on the child size. So when I apply position: absolute; to the parent, it all goes pear-shaped.
Any solutions to this? I can use flexbox if necessary as I don't support IE8/9.
CSS would be something like this
.outer-wrap {
overflow:hidden;
position:relative;
width:300px;
}
.middle-wrap {
overflow:hidden;
position:absolute; // this doesn't work because it has no fixed height
left:0;
width:600px;
}
.middle-wrap.open {
right:0;
}
.inner-wrap {
float:left;
width:300px;
}
HTML
<div class="outer-wrap">
<div class="middle-wrap">
<div class="inner-wrap"></div>
<div class="inner-wrap"></div>
</div>
</div>
Another edit: I created a codepen, it's here: http://codepen.io/anon/pen/oxwmex CLick on the two buttons on the far right, they switch between the states
As you noted, your solution doesn't work because .middle-wrap has no fixed height. Try it with the following settings (note: no floats, no absolute positions):
.outer-wrap {
overflow-x: hidden;
position: relative;
border: 1px solid red;
width: 300px;
margin: 0 auto;
}
.middle-wrap {
position: relative;
width: 600px;
left: 0px;
}
.inner-wrap {
display: inline-block;
width: 300px;
vertical-align: top;
}
This will display the left of the two .inner-wraps within the visible part of .outer-wrap. To make the right .inner-wrap visible apply something like
jQuery(".middle-wrap").css("left", "-300px")
to the element or event you use for switching between the two inner-wraps. Or if you want it animated:
jQuery(".middle-wrap").aminmate({left: "-300px"})
(Plus another method to switch back to left: 0px)
The heigth of all elements is automatically adjusted to the heigth of the higher of the two .inner-wrap elements.
P.S. (edit): Erase the style="height:100px;" settings from the inner-wraps in the HTML, just fill them with some content to see it working.
OK there is an image in a centered div, which is placed at the center of a page. Its width is 400px.
What I'm trying to achieve is:
to place another div - inside of that div with alignment right via CSS.
Due to various screen resolution, I wish to avoid commands "top:, right:".
How to achieve that?
<div class="non"><div class="info">Go top right</div><img src="images/top.jpg"></div>
CSS..
.non { width:400px; background-color:#d20000; }
.info { position:absolute;float:right; background-color:#efefef; }
Example here
Just do this, it should work:
.non { width:400px; background-color:#d20000; position: relative; }
.info { position:absolute; top: 0px; right: 0px; background-color:#efefef; }
I know you want to avoid using top and right, but if you do this, the .info class is positioned perfect top right corner of the .non class div, not the whole page :)
I'm afraid I don't really know how to do this save for float: position or right: 0. I managed to achieve what you want using two positions.. relative of the containing div, and absolute of the inner div:
.non {
width:400px;
background-color:#d20000;
position: relative;
}
.info {
position:absolute;
background-color:#efefef;
right: 0;
}
Other than that, as #HashemQolami has said, just remove the position: absolute from your code, and it works fine.
If I have a div#child that's positioned at left: 5000px, and my window is narrower than that, is it possible for my div#parent to be wide enough to contain its child?
A width: 100% is only as wide as the body, which doesn't contain the child. I don't know the width/position of the child. I'd prefer not to use JavaScript (but if I have to, how?).
Absolutely-positioned elements are no longer part of the layout. The parent has no idea how large the child is. Yes, you need to use JavaScript to adjust the width of the parent based on the size and position of the child.
parentWidth = childWith + childLeft
I think that you should use JavaScript/jQuery for your goal. Here is a sample solution in jQuery: http://jsfiddle.net/hU2TV/
CSS
#parent {
width: 100%;
background-color: red;
height: 100px;
}
#child {
position: absolute;
left: 700px;
background-color:blue;
width: 50px;
height: 50px;
}
JS
(function ($) {
var child = $('#child'), parent = $('#parent');
if (child.offset().left + child.width() > parent.width()) {
parent.width(child.offset().left + child.width());
}
}($));
HTML
<div id="parent"><div id="child"></div></div>
Best regards!
I'm confused here... Here's my site that I'm working on: http://s361608839.websitehome.co.uk/marbleenergy/
The div #main is sitting about 10px below #navigation and I've tried bringing it up 10px by adding:
#main {
margin-top: -10px;
}
Had no luck there unfortunately. I'm learning CSS here, what is it I need to do?
Thanks
using absolute positioning isn't so flexible since you're aligning your div's in hard pixel measure. This will probably cause some error on several browser
Use relative positioning instead, and use top attribute to lift that div up
this is the code
#main{ position: relative; top: -10px; }
Add the following to the #main div
#main {
position: relative;
top:-10px;
}
position: relative; Will position the element relative to where it normally sits and aligning -10px from where it would sit will bring it into the gap you have made in your menu div. Haven't checked your site but can't see any reason why this won't work. I prefer not to set my elements to position: absolute; as the above member answered as any content under the div will be pulled up under the absolutely positioned div.
As the other answer more clearly details, you need to make sure that positioning is absolute, in order for any 'px' CSS specification to make sense, if not, it defaults to relative (to nearest parent container) I believe.
USE
#main {
position relative;
margin-top:-10px;
}
See Demo: http://jsfiddle.net/rathoreahsan/fSDpJ/
I browse your website in your case you need to use the following css:
#main {
position absolute;
margin:-10px 0 0 12px;
}
OR
#main {
position relative;
margin:0 0 0 12px;
top: -10px;
}
See the complete code for this page this link, and in the end result.
My div # wrap (blue) contains the entire contents of the page, I have several divs inside it and one of them is the # leftcontent would like to stay with the height at the bottom of the page (even the # wrap div.
Basically, the red line (at bottom of page) should sit on the blue line (at bottom of page)
Add the following css rule:
div#wrap {
/* the other css rules for this selector */
position: relative;
}
And replace the css for div#powered with this:
div#powered {
font-size: 10px;
position: absolute;
bottom: 2px;
right: 2px;
}
Live test : http://jsfiddle.net/moeishaa/VB8L9/
Setting the containing element (in this case #wrap) to position:relative and then setting position:absolute; bottom:0; left:0 will work, but will require you to set a height element of some kind to your #wrap div.
It's because your div#powered has a clear:both on it. An alternate way to position that div would be to use positioning (make sure div#wrap has position:relative):
div#wrap
{
position:relative;
}
div#powered
{
position:absolute; right:0; bottom:0;
}
.clear, div.address /* removed div#powered */
{
clear:both;
}
See example →