Develop Reference

Overlaying divs on responsive parent div with background image

What I'm trying to achieve is a div container that is responsive but the ability to overlay highlight fields that will stay in the same place based on the parent div. I want to be able to highlight certain areas of text or form fields but have the form be responsive. Here's a link to an example: http://www.codeply.com/go/nufYSSEMir
As you can see the highlight div is position: absolute; so obviously it's going to stay exactly where it's at. I've tried using percents as top and left values but it doesn't scale with the background image. I have a feeling that my two options are to either have the width as a static value and set the meta viewport to scale to the window size, or get crazy with some JS and maybe jQuery.
Thanks in advance for any and all suggestions.

As said by divix, you need to set position : relative to the parent div.
This will tell the browser that your highlight's position : absolute is absolute in reference to outerContainer.
Basically any position:absolute will look at the first parent that has a position set (whether it's relative, fixed, absolute etc) to calculate top|right|bottom|left offset. If you don't have any parent that has a position set, it will just take the body as a reference
Edit: In order the get the right responsivness try this :
body {
background-color:#ddd;
}
#outerContainer {
background: transparent url("http://scontent-ord1-1.xx.fbcdn.net/hphotos-xpl1/t31.0-8/s960x960/12605534_504076036438839_6108375615162000201_o.jpg") no-repeat scroll center top / 100% auto;
height: 960px;
margin: 0 auto;
max-width: 742px;
width: 100%;
position: relative;
}
#media only screen AND (max-width:742px){
#outerContainer {
height:0;
padding-top:129.5%;
}
}
#innerContainer {
background-color: rgba(0, 255, 0, 0.5);
border: 1px solid #000;
height: 8%;
left: 12%;
position: absolute;
top: 14%;
width: 30%;
}

Simply add position: relative; to the #outerContainer, it works for me.

How to make a fixed div/nav resize with the div it's inside of?

I'm pretty fresh to web development and cannot figure this one out. Appreciate any help!
On re-size the fixed div moves out of the container instead of re-sizing. The site I'm working on has the nav as the fixed section and is inside of the main container.
Any help is appreciated. Thanks!
<div class="container">
<div class="fixed"></div>
</div>
.container {
border: 1px solid;
max-width: 600px;
width: 100%;
min-height: 1600px;
}
.fixed {
max-width: 600px;
width: 100%;
height: 50px;
border: 1px solid green;
position: fixed;
}
http://jsfiddle.net/KqvQr/

When you specify position as fixed the Element, even thought it is inside a parent container, It won't behave as a child of a parent container. It won't adjust his width according to the parent width. But I can give you a solution where when user resize the page the fixed element also get resize yet it is a position fixed
.fixed {
height: 50px;
border: 1px solid green;
position: fixed;
right:0;
left:0;
}
Don't specify widths for the container. instead of that specify left and right values. so then when page is resizing css only check for the left and right margin values. by keeping those values it will adjust its inner width always.
Here is the working fiddle http://jsfiddle.net/KqvQr/5/

I don't think you can achieve what you want if you stick with that constraints. Your width and max-width will work as expected if you change your position to relative instead of fixed..
Check out this Fiddle

Centering Animated Divs

I have this jfiddle that I found that I modified a little bit to my liking. The problem is that I can not get the alignment correct. My goal is to have the five columns centered when they are all collapsed and have them centered when one is expanded.
http://jsfiddle.net/422MP/
#mainContainer
{
margin:0 auto;
width: 500px;
height: 100%;
overflow: hidden;
}
.sidebar
{
float: left;
height: 300px;
width: 20%;
/* left: 565px;*/
border: 2px red dashed;
/*position: relative;i*/
overflow: hidden;
margin:0 0px 0 10px;
}
** EDIT ** To be a little clearer, it seems that when one div is expanded it is centered. When they are all closed, they are aligned toward the left.
Thanks!

Demo here: http://jsfiddle.net/422MP/34/
It's a lot easier when you have fixed widths for your elements, which is what I did. But the javascript is much cleaner as well.
To center the elements, you simply get rid of the float: left style, which will wreak havoc with center alignment, and set the text-align of the container to center.

All of the sidebars are float: left and the javascript is actually making them width: 10% when they are closed, which means that they only end up occupying the left half of the container. The div containing all of the sidebars is actually centered. You probably want to alter the JS to leave them at 20% and widen the containing div when one opens.

Position CSS element based on height of a floating element

Alright, this one's tricky.
To begin, this fix can be in JS or CSS, doesn't matter as long as it works.
Here's the issue:
I have a site with a float:right sidebar, and the footer's position is based on the #content's height. However, when the #content is shorter than the sidebar, the footer overlaps the sidebar and doesn't look very good.
What I need:
a script that detects the HEIGHT of a certain element (in this case #sidebar) and modifies the min-height of the #content to match
OR
a script that detects the HEIGHT of the #sidebar and positions the footer accordingly.
For a live version of this, check http://wizardcm.com/portfolio
The reason for not using a fixed height for the #content (or for the position of the footer) is that Tweets are never the same length, and other pages have extra sidebar widgets that add to the height.

1.put your #sidebar before #content.
2.remove position:absolute from #sidebar.
3.remove float:left from #content.
4.remove overflow:hidden from #content.

What I need: a script that detects the HEIGHT of a certain element (in
this case #sidebar) and modifies the min-height of the #content to
match
Make sure you link jQuery in your head tag... example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Than place the following code within a <script> tag below it:
$(window).bind("resize", function(){
var $sideHeight = $("#sidebar").height();
$("#content").css({minHeight: $sideHeight + 'px'});
}).trigger("resize");

This is a problem with your css layout, you do not need a JavaScript solution. You have floats and absolute positioning on your sidebar which takes it out of page flow.
Your classes should be:
#content {
float: left;
margin: 0;
min-height: 300px;
overflow: hidden;
position: relative;
width: 770px;
}
#sidebar {
float: right;
font-size: 10pt;
margin: 10px 0 0;
padding: 0 0 10px;
right: 40px;
width: 300px;
}
#content .page, #content .post {
padding: 10px 15px !important;
}
And everything falls into place.

Floating menu bar using HTML/CSS?

wondered if any one knew of a way of creating a floating menu bar that sticks to a point on a page until the browser window gets far enough down the page and unsticks it and then the menu bar begins to scroll along with it. The effect I want is the exact same as this http://www.jtricks.com/javascript/navigation/floating.html javascript menu. However, I really want to do this with CSS. I am aware I can make the div Absolutely positioned and it will move down the page, I tried making one DIV relative positioned (parent div) and then another div inside this which was absolute positioned, but I could not get this to work. Does any one know how to make this work with CSS or does it need to be JS?
Thanks in advance.
Jon.

I believe using javascript is the only solution to get the effect you described. Here's a quick demo of a banner that starts in a absolute position and goes to fixed when the user scrolls.
<div style="height:1000px;width:500px;">
<div id="floatbar" style="background:gray;
width:200px;
height:40px;
position:absolute;
left:0;top:200px;">
</div>
</div>
$(window).scroll(function(){
if ($(window).scrollTop() >= 200)
{
$("#floatbar").css({position:'fixed',left:'0',top:'0'});
}
else
{
$("#floatbar").css({position:'absolute',left:'0',top:'200px'});
}
});

well if you do NOT need the animation, than just use
position: fixed;
in the css.
if you want it animated you need to use javascript.
for example in jquery:
$(window).scroll(function(){
$('#menu').css({
right: 0,
top: 0
})
})

Well you can't do it with absolute positioned div inside of a relative. Fixed position is basically an absolute positioned div, positioned relatively to the window. I'd say you definately need javascript here.

This should be rather easy with a fixed sidebar, and a floating content section. Try something like this...
#container {
width: 960px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#sidenav {
width: 300px;
position: fixed; /*--Fix the sidenav to stay in one spot--*/
float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}
#content {
float: right; /*--Keeps content to the right side--*/
width: 620px;
padding: 0 20px 20px;
}

This is old post but CSS has changed a lot since then, we can do a floating menu with plain CSS. See sample code below. Credit to https://www.quackit.com/css/codes/css_floating_menu.cfm
main {
margin-bottom: 200%;
}
.floating-menu {
font-family: sans-serif;
background: yellowgreen;
padding: 5px;;
width: 130px;
z-index: 100;
position: fixed;
right: 0px;/* You can change float left/right */
}
.floating-menu a,
.floating-menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}
<!DOCTYPE html>
<title>Example</title>
<main>
<p>Scroll down and watch the menu remain fixed in the same position, as though it was floating.</p>
<nav class="floating-menu">
<h3>Floating Menu</h3>
CSS
HTML
Database
</nav>
</main>

I believe it needs to be JS. I can imagine it can be rather simple with jQuery and I really cannot think of any way to achieve this only with CSS. I'll try to think about it, but I doubt I'll find a solution.