I've got an interesting little problem here I'm trying to adjust the cells of my site based on the dynamic size of the window and while I can easily enough set the master cell to scale the interior cells won't follow it if I simple set them at 100 or similar.
Here's my container
#container {
background-color: #063;
width: 980px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #F60100;
border-right-color: #F60100;
border-bottom-color: #000000;
border-left-color: #F60100;
/* [disabled]opacity: .75; */
border-bottom-width: 1px;
border-bottom-style: solid;
}
And that works fine but here's where it gets tricky I have a set of slices that serve as sort of book spines that frame the content cell, they are a set size with the body content filling the remainder of the space but so far I've had to set the container and body blocks with set numbers as simple percents won't work
#Option1, #Option2, #Option3, #Option4, #Option5 {
width: 73px;
float: left;
cursor: pointer;
}
#Option3 {
width: 70px;
}
#Option4 {
width: 90px;
}
#Option5 {
width: 72px;
}
These are the static spines so they never change, at least not at the moment as height is a static value in the future id like these to scale for the display but first I need to get just the horizontal scaling working
#Option1Div, #Option2Div, #Option3Div, #Option4Div, #Option5Div {
width: 594px;
float: left;
height: 592px;
background-color: #000;
opacity: .9;
color: #FFF;
overflow: auto;
padding: 4px;
margin: 0px;
}
And this is the body content that is hard coded to the container - the spine div sizes I'd like to make this scale with the container
And a sample of my HTML as requested, I use Javascript to change the content box widths from full to 0 which creates a effect of the shelf opening up to reveal the text but even with the default first frame open it it tries to full the full width and doesn't take into account the spines
<div id="container">
<div id="header">HEADER PICS</div>
<div id="content">
<div id="subsection1">LINKS SET 1</div>
<div id="subsection2">LINKS SET 2</div>
<div id="Option1"><img src="assets/Black_Spine.png" name="Option1" height="600" class="options" /></div><div id="Option1Div" class="option-divs">
ContentBox1
</div>
<div id="Option2"><img src="assets/Blue_Spine.png" name="Option2" height="600" class="options" /></div><div id="Option2Div" class="option-divs">
ContentBox2
</div>
<div id="Option3"><img src="assets/Pink_Spine.png" name="Option3" height="600" class="options" /></div><div id="Option3Div" class="option-divs">
ContentBox3
</div>
<div id="Option4"><img src="assets/Red_Spine.png" name="Option4" height="600" class="options" /></div><div id="Option4Div" class="option-divs">
ContentBox4
</div>
<div id="Option5"><img src="assets/Yellow_Spine.png" name="Option5" height="600" class="options" /></div><div id="Option5Div" class="option-divs">
ContentBox5
</div>
<div class="breaker"></div>
</div>
<div id="footer">
FOOTER LINKS
</div>
</div>
Alright so I think I have this figured out, I was able to use jQuery to fetch the width, tweak it as need be and pass it into the CSS. The main containers will resize as needed while resizing and on first load the content cell will grow to fit the size of the window space however I can't get the content cells to fill to fit on resize. Since the user could be in one of the secondary cells I thought it best to do a if check to see if the content cell already had a width higher then 0, if it did just adjust it to match the new values but it doesn't seem to want to work
$(window).resize(function () {
var pageWidth = $(window).width();
pageWidth = pageWidth-90;
var contentWidth = pageWidth-$( '#Option1' ).width();
contentWidth = contentWidth-$( '#Option2' ).width();
contentWidth = contentWidth-$( '#Option3' ).width();
contentWidth = contentWidth-$( '#Option4' ).width();
contentWidth = contentWidth-$( '#Option5' ).width();
contentWidth = contentWidth-10;
$('#container').css("width", pageWidth+"px");
if ($('#Option1Div').css('width').replace(/[^-d.]/g, '') > 0){
$('#Option1Div').css("width", contentWidth+"px");
} else if ($('#Option2Div').css('width').replace(/[^-d.]/g, '') > 0){
$('#Option2Div').css("width", contentWidth+"px");
} else if ($('#Option3Div').css('width').replace(/[^-d.]/g, '') > 0){
$('#Option3Div').css("width", contentWidth+"px");
} else if ($('#Option4Div').css('width').replace(/[^-d.]/g, '') > 0){
$('#Option4Div').css("width", contentWidth+"px");
} else if ($('#Option5Div').css('width').replace(/[^-d.]/g, '') > 0){
$('#Option5Div').css("width", contentWidth+"px");
};
for reference here is the page load which works fine so its just the if else block
var pageWidth = $(window).width();
pageWidth = pageWidth-90;
var contentWidth = pageWidth-$( '#Option1' ).width();
contentWidth = contentWidth-$( '#Option2' ).width();
contentWidth = contentWidth-$( '#Option3' ).width();
contentWidth = contentWidth-$( '#Option4' ).width();
contentWidth = contentWidth-$( '#Option5' ).width();
contentWidth = contentWidth-10;
$('#container').css("width", pageWidth+"px");
$('#Option1Div').css("width", contentWidth+"px");
$('#Option2Div, #Option3Div, #Option4Div, #Option5Div').css("width", "0px");
Can't you just make them width:100%
or whatever percent you needed them to be? This is essentially what bootstrap and foundation do for fluid grids. You have rows and columns and everything is based on a percentage of its parent container. I'd give that a shot, and I think you'll be happy with the result. For example if you had:
<div id="parentContainer">
<div id="childContainer">
</div>
</div>
Then your css would look something like this:
#parentContainer {
width:auto;
height:auto;
}
#childContainer {
width:100%;
}
Given this, childContainer will always reflect the size of parentContainer. So if you dynamically change parent, child is set to 100% of whatever parent is set to. You can set this to whatever % value you need. You can do the same thing if you need to dynamically adjust heights.
For the above example I made height and width auto, but it can be whatever value you set to it. Here's a link to the Foundation Grid I mentioned: http://foundation.zurb.com/grid.html Here's a link to the Bootstrap Grid I mentioned: http://getbootstrap.com/css/