Develop Reference

How would I create a div container with three divs in a row where the divs on both sides expand away from the center when an event is triggered?

I want to create a div that has three nested divs touching each other in a row. I want the div at the center of this container to have a constant width. While I want the left div's width to expand to the left(i.e. not pushing the other two divs in the container to the right) on hover and stay expanded on click. I want the same thing to happen to right div's width except it expands to the right. All the nested divs would have content in them some of the content not completely visible until the div expands.
This would be the general idea:
When Neither is Hovered -->
enter image description here
When One Is Hovered -->
enter image description here
When They Are Both Clicked -->
enter image description here
The problem is I haven't been able to figure out a way to do this or find out if there is a tutorial or something that would be helpful in accomplishing this. I have tried googling how to create this, and in all honesty was not to sure exactly what to search up but nothing has really helped me get both divs expanding the way I want. I would appreciate any help in finding a tutorial or any implementation that might work.
So far I have been able to get this far in terms of coding it in HTML and CSS, but have been stuck for a while with no attempt being closer than this. I would need this to be on top of other elements on a page in my webpage hence the z-index, and positioning is so that I could move it to my desired place on the webpage. I am able to get the right div to expand how I want easily as that is the default behavior but when I try to get the left div and right div to both expand I have been stuck. I have gotten the left div to expand at one point but that led to the right div not working. So right now this is the closest I have gotten both expand properly but the left div is under the center div instead of beside it.
I added a bit of a yellow background in the images to give an idea of positioning
Result on Webpage No Hover -->
enter image description here
Result on Webpage On Hover Of Left Div-->
enter image description here
Result on Webpage On Hover Of Right Div-->
enter image description here
HTML-->
<div class="sliding-window">
<div class="left-wing">
</div>
<div class="middle-box">
<h3>Content</h3>
</div>
<div class="right-wing">
</div>
</div>
CSS-->
.sliding-window{
display: flex;
flex-direction: row;
/* justify-content: center; */
z-index: 25;
position: absolute;
top: 30%;
left: 35%;
width: 850px;
}
.middle-box{
left: 250px;
border: 1px red solid;
text-align: center;
height: 300px;
width: 250px;
border-radius: 10%;
background-color: grey;
}
.left-wing{
border: 1px violet solid;
height: 250px;
/* float: left; */
position: relative;
float: left;
left:200px;
margin-top: 25px;
margin-bottom: 25px;
width: 50px;
background-color: grey;
}
.right-wing{
left:450px;
border: 1px green solid;
height: 250px;
margin-top: 25px;
margin-bottom: 25px;
width: 50px;
background-color: grey;
}
.right-wing:hover{
width: 200px;
}
.left-wing:hover{
width: 200px;
/* margin-left: -200px; */
}

How to stop browser resizing 1px wide image to 0px

I'm trying to insert an vertical image 1 pixel wide into my webpage but depending on the browser, zoom level or position of other elements on the page the image is often resized to be 0 pixels and dissapears. How can I stop this? Am I doing this wrong?
My html image (green space is just 1 pixel of green.
<IMG class="dividerImage dday3" SRC="/SafeSiteLive/images/safesite_documents/icons/greenspace.gif">
My css
.dividerImage {
float: left;
margin-top: 50px;
height: 50vh;
width: 1px;
}
Some green vertical images not displaying
Different zoom level more of the images display

I should have been using an empty div instead, works much better.
<div class="dividingDiv">
</div>
And the css.
.dividingDiv {
border-left: 1px solid green;
float: left;
height: 50vh;
margin-top: 50px;
width: 0;
}

How do i make a div to have the same image size in that div? but still have a consistent size for all images across the website?

So, I have the following right
#footer {
clear: both;
font-size: .84em;
border-top: 1px solid #ddd;
padding: 20px 0 0;
text-align: right;
}
I would like a way to have all images under this div a certain size.
However my CSS code does have this
img {
border-style: none;
border-color: inherit;
border-width: 0;
height: 54px;
width: 57px;
}
This happens automatically when i use Visual Studios Split View editor to resize an image. It's annoying you see, because it changes all the image sizes on my footer div as well, (starting to think it changes all img sizes across the whole page) where i have social networking buttons that end up massive! when i adjust the size of the image in the body of the page.
I want to keep my social media buttons small, and my body images a size set by me, say 255px by 225px.
Hope im making some kind of sense.
Also, in case you need it, this is my html
<div id="footer">
<p>© Copyright 2014 Music Club − Design: Jade Powell</p>
<img src="/images/facebook128.png" alt="Facebook" />
<img src="/images/twitter128.png" alt="Twitter" />
<img src="/images/google128.png" alt="Google" />
</div>

should be
This will style all the images which are under #footer
#footer img {
border-style: none;
border-color: inherit;
border-width: 0;
height: 54px;
width: 57px;
}

How to Overlap a Parent Div's Background Image Over its Children

I want to overlay the background image of a parent div over the content of its children.
What I have in essence is simple:
<div> <!-- has BGImage -->
<div>
<div>
<iframe /> <!-- serves content that needs to be interacted with -->
</div>
</div>
</div>
The top parent div has a background image (a silhouette of an ipad) and the content in the iframe is a page serving JQuery Mobile content (it is a mobile preview). I can't have another parent div with absolute positioning using z-index because the content in the iframe must remain fully usable and click-able.
The reason I need this is that the inside edge of the tablet silhouette has a transparent inner border, I need this to soften the edges of the served iframe content.
I hope this is achievable, I put the JavaScript and JQuery tags in the question because I am not shy to using if they need to be, but as always, if I can complete this using CSS then I am all for that.
Mock up JS fiddle basically showing what I have: http://jsfiddle.net/fQ22A/1/
The following image is where I am wanting to go based on the JSFiddle above:

Not the way you wanted but your purpose is solved here. http://jsfiddle.net/fQ22A/5/
Full Screen: http://jsfiddle.net/fQ22A/5/embedded/result/
HTML:
<div id="finalCont2">
<div id="insidewrapper2">
<div id="outsidewrapper2">
<div class="fullheight2">
<iframe id="template_preview_iframe" src="http://www.w3schools.com" width="770" height="1024"></iframe>
</div>
</div>
</div>
</div>
CSS:
#insidewrapper2{
background-image:url("http://desktop.ly/images/devices/ipad_mini_black.png");
background-repeat: no-repeat;
display: block;
height: 1289px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
width: 870px;
}
#outsidewrapper2{
position: relative;
}
.fullheight2{
padding-top:133px;
}
#template_preview_iframe{
overflow:hidden;
display:block;
border:none;
margin:0 auto;
}

You can't do that.
...but you can get something close to what I guess your want using a box-shadow inner.
EDIT:
body{border:none;box-shadow: inset 0 0 10px #000;}
http://jsfiddle.net/rwA2f/1/

This could be something closer to what you are actually after:
Demo: http://jsfiddle.net/abhitalks/ZVEug/2/
Full Screen: http://jsfiddle.net/abhitalks/ZVEug/2/embedded/result/
You need to position the iframe inside your div using positioning. Here is a simple markup to give you the idea:
HTML:
<div class="outer">
<iframe src="..." />
</div>
CSS:
div.outer {
width: 320px;
height: 320px;
background: url('...') no-repeat top left;
background-size: 100%;
position: relative;
}
iframe {
border: none;
width: 250px;
height: 220px;
position: absolute;
top: 48px; left: 32px;
border-radius: 10px;
box-shadow: 0 0 30px #fff;
opacity: 0.6;
}
The trick is to use a combination of box-shadow with opacity to give the illusion of soft edges and also meets your requirement of the background peeping through at the same time the iframe contents are usable.
Please notice how the background's reflection (diagonal glass reflection) is visible through the iframe contents.

Adding foreground image to a Image

for a button if i need a background image i would use background like below
#statusButton span {
color: #445058;
font-size: 14px;
font-weight: bold;
text-shadow: 1px 1px #fff;
padding: 7px 29px 9px 10px;
background: url('../images/Arrow.png') no-repeat 53px 7px;
display: block;
}
similar to here http://www.soundendeavors.com/clients/index.html
now How do i add this type of image as a foreground for a image. when i use same background attr for image th regular image will overlap is what i need is something of foreground type of css.
an image over a image.

So you want to put another image on top of one, right? You can do it this way:
div{ /*You can use whatever element you prefer*/
width: 400px;
height: 400px;
background-image: url('link1.jpg'), url('link2.png'); /*URLs*/
background-position: left top, right bottom; /*position*/
background-repeat: no-repeat; /*repeat or not*/
}
Fast and easy. The first image in the list will show up on the very top.
Demo: http://jsfiddle.net/DerekL/Pdxpe/
The good thing about this method is that you still has one solid element, instead of wrappers floating around.

if i understand You right, You want to overlay another image over an image?
to overlay another image over an existing image You can work with position in CSS:
CSS:
#wrapper {
position: relative;
}
#img1 {
position: absolute;
top: 0;
left: 0;
z-index:0;
}
#img2 {
position: absolute;
top: 0;
left: 0;
z-index:100;
}
HTML:
<div id="wrapper">
<img src="img1.jpg" id="img1" />
<img src="img2.jpg" id="img2" />
</div>
now the image with the id #img1 is under the image #img2, because of the lower z-index value...