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 →
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.
I have a website with the following basic layout. Essentially, I have the NAV div and SIDEBAR div at fixed positions. This is because when a user scrolls down on my page, only the MIDDLE COLUMN div will move.
The problem I have is that when the window gets shrunk horizontally, the SIDEBAR moves to left and eventually overlaps my MIDDLE COLUMN.
I have the body set to a min-width but it only affects the SIDEBAR if it is position:absolute and not position:fixed
Is there a way to keep my same method of scrolling, but have the SIDEBAR div stop moving left after a certain pixel constraint?
Thanks!
EDIT MARKUP:
div.MASTER {
position: inherit;
width:100%;
height:auto;
}
div.NAV {
position:fixed;
top:0;
left:0;
width:200px;
}
div.CONTENT {
float: left;
position: relative;
width:100%;
}
div.MIDDLECOLUMN {
float:left;
width:100%;
height:100%;
text-align:center;
}
div.SIDEBAR {
position:fixed;
top: 0;
right: 0;
width:200px;
}
Ah I see the issue. You need to assign a min width on the main container. Set the min-width to the width of the element right before it breaks.
Add a margin-left equal to the width of the nav bar to the content div.
You can use the scroll function in jquery:
$(document).ready(function()
{
var $left= $('#yourdiv').offset().left + 20; //+20 is optional
$(window).scroll(function()
{
if ($(window).scrollLeft()>$left)
{
$('#yourdiv').addClass('floater');
$('#yourdiv').removeClass('floated')
}
else
{
$('#yourdiv').removeClass('floater');
$('#yourdiv').addClass('floated')
}
});
});
where floater class is with posit absolute and floated is with position fixed.
EDIT 1:
Maybe you can use all percentage width even in the NAV bar like:
.nav{width:20%; position:fixed;}
.master{width:60%; position:absolute;margin-left:21%; }
I'm really working hard on this thing but I can't figure out how to create this through CSS.
Basically on this website here I'm trying to add images to go outside of the main-content background as you can see on this image below. Where it says "Lattest Lessons" (sorry for the typo) or where it says Receive our newsletter.
Does anybody have a club? I'm lost!
Here is some code:
.main-content {
position:relative;
z-index:100;
padding:1em 0 8.5em 0;
background:#fff;
}
.main-content p {
color:#555;
}
.site-wrap {
position:relative;
min-height:100%;
}
What I would recommend doing is creating a div in the background that looks like this:
HTML:
<div id="backgrounddiv">
</div>
So the HTML is really easy. Don't put anything in those divs. Now for the CSS:
CSS:
#backgrounddiv {
length:100%; //spans length of page
width:100%; //spans width of page
z-index:1; //makes sure background is behind all the other objects
background-color: #000; //black background
position: absolute; //isn't affected or doesn't get affected by other elements
}
What you're likely looking for is positioning the element correctly. This can either be relative or absolute positioning based on your needs. In either case, ensure that the PARENT container is a positioned element (in your example it is: relative)
See this fiddle:
http://jsfiddle.net/callseng/UUxqG/
The paragraph with class 'move-left' is housed inside of the main-content element, it is relatively positioned and then pushed to the left by 25px.
position:relative;
left: -25px;
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.
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);
}
});