We Keep Coding

Adjusting height of two divs based on it's parent's height

jsfiddle link: http://jsfiddle.net/7087s2dm/2/
I have two divs, #one and #two, inside div #parent.
Here, #one has it's height equal to 50% width of the screen. However, #two has it's height based on it's content.
I need to make the div#two's height increases to match that of div#one, even as width of page changes, If the width of page becomes small enough that div#one's height becomes smaller than div#two height, then the height of div#two should be limited to the content itself.
html:
<div id = "parent">
<div id="one">
<img src ="https://gp6.googleusercontent.com/-P53UB3pztC8/AAAAAAAAAAI/AAAAAAAAAAA/edcApVyNYJc/s48-c-k-no/photo.jpg" />
</div>
<div id="two">
<span>Hello</span><br />
<span>Hello</span><br />
<span>Hello</span><br />
<span>Hello</span><br />
</div>
CSS:
#parent{
background-color:yellow;
max-width:500px;
height:300px;
}
#one{
float:left;
background-color:red;
width:50%;
}
#one img{
width:50%;
margin:25%;
}
#two{
padding:2%;
float:right;
background-color:red;
width:50%;
margin-bottom:0;
box-sizing:border-box;
}
#two span{
margin:10px;
}
What is the best way to do this? Can it be done with simple css? Or do i need to use JS?

If you want to make it in simple css use display:table
JS Fiddle
CSS
#parent{
background-color:yellow;
width:500px;
display:table;
}
#one{
background-color:red;
width:50%;
display: table-cell;
}
#one img{
width:50%;
}
#two{
background-color:red;
width:50%; display: table-cell;
margin-bottom:0;
vertical-align:top;
}
#two span{
margin:10px;
}

Two fixed width divs, and another div with dynamic size between

The title says everything. I want something like this:
The left box should be positioned in the left, the right one in the right. They both should have fixed widths, e.g. 200px. The middle div should take the size between. Its width is not set, but it takes the width that's remaining.
Thanks.

Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 60px;
background:red;
float:left; }
.rightsidebar
{
background:blue;
height: 608px;
width: 163px;
float:right;
}
.content
{
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}

Here is the DEMO http://jsfiddle.net/yeyene/GYzVS/
Working great on onReady and onResize too.
JS
$(document).ready(function(){
resizeMid();
$(window).resize(function() {
resizeMid();
});
});
function resizeMid(){
var mid_width = $('#main').width() - ($('#left').width()+$('#right').width());
$('#middle').css({'width':mid_width});
}
HTML
<div id="main">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
CSS
html, body{
margin:0;
padding:0;
}
#main {
float:left;
width:100%;
margin:0;
padding:0;
}
#left {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}
#middle {
float:left;
width:100%;
height:300px;
margin:0;
background:blue;
}
#right {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}

You can try this one FIDDLE just html and css, without javascript
<div class="container">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>
CSS
div {
height:500px;
position:absolute;
border:0px;
padding:0px;
margin:0px;
}
.c1, .c3 {
width: 200px;
background-color:red;
}
.c1, {
left:0px;
}
.c3 {
right:0px;
}
.c2 {
margin-left:10px;
margin-right:10px;
background-color:blue;
left:200px;
right:200px;
}
.container {
width:99%;
}

[updated]
use a table, it will adjust it's own width. float style was the first that came to my mind but it doesn't adjust the element's width to fill in the gap.
html:
<table>
<tr>
<td style="width:10%;"><div id="d1"></div></td>
<td><div id="d2"></div></td>
<td style="width:10%;"><div id="d3"></div></td>
</tr>
</table>
css:
#d1,#d3{
background-color:red;
width:100%;
height:300px;
}
#d2{
background-color:blue;
width:100%;
height:300px;
}
table{
width:100%;
height:100%;
}
DEMO
update:
if you don't want to use tables or excessive js calculations use this:
#d1,#d3{
float:left;
background-color:red;
width:10%;
height:300px;
}
#d2{
float:left;
background-color:blue;
width:80%;
height:300px;
}
DEMO

I would personally avoid using JS and do this using CSS.
You can add a #container wrapper and then define the width to whatever you want and then use % for the left right and the middle div's
Sample CSS below:
<div id="container">
<div id="left-column"> </div>
<div id="middle-column"> <p>Content goes in here and dynamically stretches</p></div>
<div id="right-column"> </div>
</div>
#container{
float:left;
width:1000px;
*background-color:blue;
}
#left-column, #middle-column, #right-column{
height:500px;
float:left;
}
#left-column, #right-column {
width:20%;
background-color:red;
}
#middle-column {
background-color:green;
width:60%;
}

I'm late to the party, still here goes.
This can be done using flexbox.
HTML
<div class="flex">
<div class="fixed-div"></div>
<div class="dynamic-div"></div>
<div class="fixed-div"></div>
</div>
CSS
.flex {
display:flex;
}
.fixed-div {
width:30px;
background-color:blue;
height:200px;
}
.dynamic-div {
width:100%;
background-color:red;
height:200px;
margin: 0px 10px;
}
You can checkout the implementation here.

slide show in div in specific size

I have div and i add some images to it to slide show but part of image appear not all image,i change the width and height for image but still probleme what is the reasone this is snippt from my code:
<link href="./CSS/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="./js/js-image-slider.js" type="text/javascript"></script>
<div id="slider" width=100px height=100px>
<img src="./images/Health Care 2.jpg" alt="Health" width: 100px;
height: 100px; />
<img src="./images/war.jpg" alt="War" width: 100px;
height: 100px;/>
<img src="./images/food.jpg" alt="Food" width: 100px;
height: 100px; />
<img src="./images/education-it-hardware-579.jpg" alt="Education" width: 100px;
height: 100px;/>
<img src="./images/sport.jpg" alt="Sport" width: 100px;
height: 100px; />
<img src="/images/technology.jpg" alt="Technology" width: 100px;
height: 100px;/>
</div>
this css:
/* http://www.menucool.com */
#sliderFrame {position:relative;width:700px;margin: 0 auto;} /*remove the "margin:0 auto;" if you want to align the whole slider to the left side*/
#ribbon {width:111px;height:111px;position:absolute;top:-4px;left:120px;background:url(ribbon.png) no-repeat;z-index:7;}
#slider {
width: 250px;
height: 170px;/* Make it the same size as your images */
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position:absolute;
border:none;
display:none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
z-index:3;
overflow:hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color:black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
padding:10px 0;/*Adding a padding-left or padding-right here will make the caption area wider than its background. Sometimes you may need to define its width again here to keep it the same width as its background area (div.mc-caption-bg).*/
text-align:center;
}
div.mc-caption a {
color:#FB0;
}
div.mc-caption a:hover {
color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top:460px; left:180px; /* Its position is relative to the #slider */
width:150px;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
width:11px; height:11px;
background:transparent url(bullet.png) no-repeat 0 0;
float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
margin-right:11px;/* distance between each bullet*/
_position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
/* --------- Others ------- */
#slider
{
transform: translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
}

You're syntax is wrong.
It's either:
width="100px" height="100px"
or
style="width:100px; height:100px;"

Initially you have to remove both (width and height) as "menucool" scripts smart enough to normalize images, now in the css// he provided you that
/* Make it the same size as your images */ ,,
because if you follow the js you will find that all the animation calculations depends on the width and height ,,
so try to use images with 100px * 100px without manual css and update #slider css
#slider {
width: 100px;
height: 100px;/* Make it the same size as your images */
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
look this is the orginal html you used
<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">
<img src="jsImgSlider/images/image-slider-1.jpg" alt="Welcome to Menucool Image Slider" />
<img src="jsImgSlider/images/image-slider-2.jpg" alt="" />
<img src="jsImgSlider/images/image-slider-4.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="jsImgSlider/images/image-slider-5.jpg" alt="#htmlcaption" />
</div>
</div>

Image resizing issue in Slides

The problem is, in one of my pages I have a slide, where my images are 1920x1080 while the slide is just set to 1350 as width. My images are not getting centered, you just see about 1/3 of the picture's top left-middle-ish. The slide also doesn't reach out to the ends (<---->) of the screen, there's this tiny space there. Any solutions?
Picture: http://tinypic.com/view.php?pic=29crp7a&s=6
Code
Html:
<div id="container">
<div id="banner">
<ul class="bjqs">
<li><img src="images/lamborghini/av_lp700-4_roadster_ov3_v2_1920x1080.jpg" title="This is my slideshow!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_home_1920x1080.jpg" title="Apparently it works!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_spyder_home_1920x1080.jpg" title="By Andreas!"></li>
</ul>
</div>
</div>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/basic-jquery-slider.min.js"></script>
<script>
$(document).ready(function() {
$('#banner').bjqs({
'animation' : 'slide',
'width' : 1350,
});
});
</script>
Css:
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
/* demo styles */
body{
font-family: 'Carter One', sans-serif;
}
#container{
width:100%;
padding:20px 0;
margin:0 auto;
overflow:hidden;
}
#banner {
height:300px;
width:700px;
margin:0 auto;
position:relative;
background:#fff;
#fff solid;
}
ul.bjqs-controls li a{
display:block;
padding:5px 10px;
position:absolute;
background:#000000;
color:#fd0100;
text-decoration:none;
text-transform:uppercase;
}
a.bjqs-prev{
left:0;
}
a.bjqs-next{
right:0;
}
p.bjqs-caption{
background:rgba(0,0,0,0.7);
color:#fff;
text-align:center;
}
ol.bjqs-markers{
position:absolute;
bottom:-50px;
}
ol.bjqs-markers li{
float:left;
margin:0 3px;
}
ol.bjqs-markers li a{
display:block;
height:10px;
width:10px;
border:4px solid #fff;
overflow:hidden;
text-indent:-9999px;
background:#000;
border-radius:10px;
}
ol.bjqs-markers li.active-marker a{
background:#fd0100;
}

The solution is very simple actually.
You need to set a width to your images to 100% in your CSS.
.bjqs img {
width:100%;
}
Hope that helps, good luck

fadein div on android mobile

I'm trying to display a div with content over a 360° panorama with javascript.
It works perfect on IE, Firefox, Safari, Iphone, Ipad and android 3 (tablet) but doesn't work as it should on android mobile (2.3.3).
From my panorama I call a javascript function to fadein a div wich has an absolute position and display:none.
Here is the javascript
function ouvrirDiv(divnum){
$('#wrapper'+divnum).fadeIn("slow");}
function fermerDiv(divnum){
$('#wrapper'+divnum).fadeOut("slow");}
Here is my html
<div id="pano">
<noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script type="text/javascript">
// <![CDATA[
var swf = createswf("nantes.swf", "krpanoSWFObject", "100%", "100%");
swf.addVariable("xml", "nantes.xml");
swf.addParam("wmode","opaque");
swf.embed("pano");
// ]]>
</script>
</div>
<div id="wrapper1"><div id="scroller">
<div class="closetop">Fermer</div>
<div class="closebottom">Fermer</div>
<div id="tabContainer1">
<div class="tabs">
<ul>
<li id="tabHeader_1">Texte</li>
<li id="tabHeader_2">Photos</li>
<li id="tabHeader_3">Vidéos</li>
</ul>
</div>
<div class="tabscontent">
<div class="tabpage" id="tabpage_1">
Texte...
</div>
<div class="tabpage" id="tabpage_2">
Photos...
</div>
<div class="tabpage" id="tabpage_3">
Videos...
</div>
</div>
</div>
</div>
</div>
And the CSS
* {
margin:0;
padding:0;
}
#media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow: hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; -webkit-user-select:none; -webkit-text-size-adjust:none; }
#pano {
width:100%; height:100%; position:absolute; top:0px; left:0px;
}
#wrapper1 , #wrapper2 , #wrapper3 , #wrapper4 , #wrapper5 {
position:absolute;
top:0px; bottom:-60px; left:0px;
width:100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.8);
overflow:auto;
display:none;
}
#scroller {
position:relative !important;
margin:0 auto;
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
max-width: 600px;
background:transparent;
color: #fff;
margin-bottom: 60px;
text-align: justify;
}
Here is the behaviour on default android browser: the wrapper div is opened but stays behind the panorama.
On Opera mobile the panorama can't be scrolled until you call a wrapper div, but then the wrapper is over the pano (wich is correct) but you can't scroll it, you can scroll the panorama instead...
I have really no idea of the problem...
If someone has an idea, thanx very much !!!
MY TEST PAGE iS THERE : http://www.360images.fr/nantes/nantes.html

I have this problem, too. For me adding
.hide()
before to
$('divelement').fadein
works.