So I'm not that great at programming sorry, but I use stack overflow and other sources to add site functionality and learn a little more each time. I'm using a Flexible Grid System to display my main content, specifically to re-arrange navigational buttons on the page.
This works great for me, but I've been using an ancient onMouseOver effect to display text when the user moves over an image button link and I'm not happy with the way it looks, and using flex creates issues with text legibility when the sizing gets small.
Ideally, I'd like to use a css overlay on my buttons so I can replace the image with text and format it to my liking. I've tried MANY different overlay solutions, but they all seem to use grid layouts and I can't get them to work with my flex layout for some reason.
Either the images get cropped, or the text can't completely cover the image due to layering issues, or (If I use the grid layout) I lose the flexible resizing capabilities that I really like on the site.
I'm hoping that this is a really simple fix. I'm assuming I need to add a container to my flex layout to place the content over the top of the image, but a hint to where to start would be really appreciated.
Here's a link to the buttons in the flex layout with no overlay:
https://megaauctions.net/megaflextest.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MEGA Main Flex Buttons</title>
<link rel="stylesheet" href="css/test-code-buttons-no-action-compact.css" type="text/css"/>
</head>
<body>
<div class="buttoncontainer">
<buttonhomea class="buttonhomea column grad-yellow">
<a href=#><img src="http://www.megaauctions.net/images/btn-auctions.gif" /></a>
</buttonhomea>
<buttonhomeb class="buttonhomeb column grad-babyblue">
<img src="http://www.megaauctions.net/images/btn-buying.gif" />
</buttonhomeb>
<buttonhomec class="buttonhomec column grad-salmon">
<img src="http://www.megaauctions.net/images/btn-selling.gif" />
</buttonhomec>
</div>
</body>
</html>
and the CSS...
.buttoncontainer {
margin: 0 auto;
top: 0px;
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: space-evenly;
text-align: center;
background: url('http://www.megaauctions.net/images/bkg-subs-deep.gif');
}
.column {
--columns: 12; /* number of columns in the grid system */
--width: var(--width-mobile, 0); /* width of the element */
padding: 0px;
margin: 9px 1px 2px 1px;
flex-basis: calc(var(--width) / var(--columns) * 94%);
}
/****** VIEWPORTS START ******/
#media (min-width: 350px) {
.column {
--width-mobile: var(--width-mobile);
--width: var(--width-mobile);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:157px;
}
}
#media (min-width: 512px) {
.column {
--width-tabletp: var(--width-tablet);
--width: var(--width-tabletp);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:157px;
}
}
#media (min-width: 650px) {
.column {
--width-tablet: var(--width-mobile);
--width: var(--width-tablet);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:300px;
}
}
#media (min-width: 900px) {
.column {
--width-desktop: var(--width-tablet);
--width: var(--width-desktop);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:315px;
}
}
/****** VIEWPORTS END ******/
.buttonhomea, .buttonhomeb, .buttonhomec {
--width-mobile: 12;
--width-tabletp: 4;
--width-tablet: 4;
--width-desktop: 4;
height: 100%;
}
.grad-yellow {
background-color:#f3d250;
background-image:linear-gradient(140deg,#f3d250,#EEA315);
}
.grad-babyblue {
background-color:#90CCF4;
background-image:linear-gradient(140deg,#90CCF4,#578FEE);
}
.grad-salmon {
background-color:#F78888;
background-image:linear-gradient(140deg,#F78888,#E7298C);
}
code in fiddle:
https://jsfiddle.net/mattcomps/gfb7k43h/
...and an overlay example of what I'm trying to achieve:
https://megaauctions.net/megaflextestbuttonaction.htm
<html>
<head>
<title>CSS Grid Cards</title>
<link rel="stylesheet" href="css/test-code-buttons-working-grid-compact.css" type="text/css"/>
</head>
<body>
<div class="container">
<section class="cards">
<a href="#" class="card grad-yellow">
<div class="card__overlay grad-yellow">
<div class="card__title">Auctions</div>
<div class="card__description">
Description goes here.
</div>
</div>
<div class="card__image" style="background-image:url('http://www.megaauctions.net/images/btn-auctions.gif')"></div>
<div class="card__content">
</div>
</a>
<a href="#" class="card grad-babyblue">
<div class="card__overlay grad-babyblue">
<div class="card__title">Buying</div>
<div class="card__description">
Description goes here.
</div>
</div>
<div class="card__image" style="background-image:url('http://www.megaauctions.net/images/btn-buying.gif')"></div>
<div class="card__content">
</div>
</a>
<a href="#" class="card grad-salmon">
<div class="card__overlay grad-salmon">
<div class="card__title">Selling</div>
<div class="card__description">
Description goes here.
</div>
</div>
<div class="card__image" style="background-image:url('http://www.megaauctions.net/images/btn-selling.gif')"></div>
<div class="card__content">
</div>
</a>
</section>
</div>
</body>
</html>
and the CSS...
.container{
background-image:url(http://www.megaauctions.net/images/bkg-subs-deep.gif)
}
.cards{
display:grid;
gap:1rem;
margin:0 auto;
padding:1rem;
}
#media (min-width:59em){
.cards{
grid-template-columns:repeat(2,1fr)
}
}
.card{
display:grid;
grid-template-columns:repeat(2,1fr);
grid-template-rows:300px 1fr auto;
color:#fff;
}
#media (min-width:31.25em){
.card{
grid-template-columns:160px (2,1fr);
grid-template-rows:1fr auto
}
}
#media (min-width:50em){
.card{
grid-template-columns:300px (2,1fr)
}
}
#media (min-width:59em){
.card{
grid-template-columns:160px(2,1fr)
}
}
.card__overlay{
min-height:300px;
display:none
}
#media (min-width:59em){
.card__overlay{
position:relative;
opacity:0;
display:grid;
justify-items:center;
align-items:center;
grid-column:1/4;
grid-row:1/3;
transition:opacity .3s ease-in-out}
}
.card:hover .card__overlay{
min-height:300px;
opacity:1
}
.card__content span{
display:inline-block;
border:2px solid #fff;
padding:1rem 3rem;
color:#fff;
}
.card__image{
grid-column:1/3;
grid-row:1/2;
min-height:157px;
background:no-repeat
}
#media (min-width:31.25em){
.card__image{
grid-column:1/4;
grid-row:1/3
}
}
.card__content{
grid-column:1/3;
grid-row:2/3;
padding:1.5rem}
#media (min-width:31.25em){
.card__content{
grid-column:2/4;
grid-row:1/2}
}
.grad-yellow {
background-color:#f3d250;
background-image:linear-gradient(140deg,#f3d250,#EEA315);
}
.grad-babyblue {
background-color:#90CCF4;
background-image:linear-gradient(140deg,#90CCF4,#578FEE);
}
.grad-salmon {
background-color:#F78888;
background-image:linear-gradient(140deg,#F78888,#E7298C);
}
code in fiddle:
https://jsfiddle.net/mattcomps/2eLzkwts/
Thanks!
Hope this answers your query
JSFIDDLE
what i have done is giving relative style to the parent buttonhomea .
then on hover showing the hidden div.
.card__overlay{
position: absolute;
width: 100%;
height: 100%;
top: 0;
opactity:0;
z-index:-1;
}
.buttonhomea{
position:relative;
}
.buttonhomea:hover .card__overlay{
opacity:1;
z-index:1;
}
and added html
<div class="card__overlay grad-yellow">
<div class="card__title">Auctions</div>
<div class="card__description">
Description goes here.
</div>
</div>
under each buttonhomea class
Related
I am creating a Node/Express staff directory. It's all working fine so far except one single image appears out of line and I cannot figure out why this one image is not behaving like the rest. The first image in the row is higher than the rest, even though all images are the same size, and all are placed on the page with the same class. This is what the page looks like:
As you can see, only the first image is falling out out alignment.
I've attached the relevant parts of the code in hopes that someone could see something I am obviously missing.
Thanks for the help!
This is my header.ejs file:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type = "text/css" href = "/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type = "text/css" href = "/css/styles.css">
</head>
<body>
This is the staff.ejs file:
<%include header %>
<div class = "container">
<header class = "jumbotron">
<h1>Staff Directory</h1>
</header>
<div class = "row row-grid">
<% staff.forEach(function(staff){ %>
<div class="col-sm-1">
<div class="thumbnail">
<div class = "imagewrap">
<!--<h4><%= staff.name %></h4>-->
<img src = "<%=staff.image%>">
<%=staff.initials%>
</div>
</div>
</div>
<% }); %>
</div>
</div>
<%include footer%>
And this is my css:
/* THE CSS TO OVERLAY BUTTON ON THE BOTTOM LEFT CORNER OF IMAGE */
.imagewrap {
display:inline-block;
position:relative;
}
.button2 {
position:absolute;
bottom:0;
right:0;
}
/* A BUNCH OF CSS TO MAKE A ROUND BUTTON*/
.round-button {
position:absolute;
width:20px;
height:20px;
line-height:20px;
border: 2px solid #f5f5f5;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #4679BD;
box-shadow: 0 0 3px gray;
font-size:10px;
font-weight:bold;
bottom:0;
right:0;
}
.round-button:hover {
background:#30588e;
}
img {
width:100%;
}
.row .display-flex {
display: flex;
flex-wrap: wrap;
}
.row .display-flex > [class*='col-'] {
display:flex;
flex-direction:column;
}
.row.row-grid [class*="col-"] + [class*="col-"] {
margin-top: 15px;
}
Fixed it - the problem was the row-grid class. I deleted the second [class*="col-"], and the first picture fell into place. Thanks!!
due to the CSS/Bootstrap Have you tried it on
'img-thumbnail' //Shapes the image to a thumbnail
'img-responsive' //Makes an image responsive (will scale nicely to the parent element)
as you can use it
<img src = "<%=staff.image%>" class="img-responsive">
I got little code from a website its about animate.css. The problem I am facing is that when page load it generate too many scroll. If I use bounceInRight or bounceInLeft if generate left or right scroll and when I use bounceInUp or bounceInDown it generate vertical scroll and when I minimize screen and then maximize that scroll automatically getting removed. Here is my CSS and HTML
<div id="logo">
<span id="a">
<span class="dd animated bounceInUp">A</span>
</span>
<span id="leading">
<span class="da animated bounceInUp">Leading</span>
</span>
<div>
<span id="mep">
<span class="zz animated bounceInUp">MEP</span>
</span>
<span id="integrated">
<span class="zn animated bounceInUp">INTEGRATED</span>
</span>
</div>
<div>
<span id="solution">
<span class="dr animated bounceInUp">Solutions</span>
</span>
<span id="provider">
<span class="de animated bounceInUp">Provider</span>
</span>
</div>
</div>
and CSS
<style>
#logo { color:#000; font-family: 'Montserrat', sans-serif; text-align:center; margin-top:150px; height:570px; }
#logo span { display:inline-block; }
#logo #a {margin-right: 10px; font-size:40px; }
#logo #leading {font-size:40px; }
#logo #mep {margin-right: 20px; font-size:80px;}
#logo #integrated { font-size:80px; }
#logo #solution {margin-right: 20px; font-size:50px;}
#logo #provider {font-size:50px;}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
#logo { color:#000; font-family: 'Montserrat', sans-serif; text-align:center; margin-top:150px;}
#logo span { display:inline-block; }
#logo #a {margin-right: 20px; font-size:15px; }
#logo #leading {font-size:15px; }
#logo #mep {font-size:30px;}
#logo #integrated { font-size:30px; }
#logo #solution {margin-right: 20px; font-size:20px;}
#logo #provider {font-size:20px;}
/* logo */
.dd { animation-delay:0.2s; -moz-animation-delay:0.2s; -webkit-animation-delay:0.2s; }
.da { animation-delay:0.8s; -moz-animation-delay:0.8s; -webkit-animation-delay:0.8s; }
.dn { animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
.dg { animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s; }
.de { animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; }
.dr { animation-delay:1.2s; -moz-animation-delay:1.2s; -webkit-animation-delay:1.2s; }
.zz { animation-delay:1.4s; -moz-animation-delay:1.4s; -webkit-animation-delay:1.4s; }
.zo { animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; }
.zn { animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
.ze { animation-delay:0.5s; -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
}
demo http://abskillz.com/bkg-new/ch.html
The thing that brings a lot of height is the 570px that you are giving to #logo. Do you really need it? The text blocks inside logo give their parent a natural height if you don't do anything like position: absolute.
Your problem should be fixed by adding overflow-y: hidden; to the #logo.
Example: http://codepen.io/brav0/pen/ENrKXR?editors=1100
I have a top nav that extends across the page
Within that top nav I have various elements
two that must align left
one that must align right
The nav is fluid the elements are fixed widths
Do not want the elements to wrap when the browser window is minimized
Needs to work in IE6 on up due to high Chinese audience.
See example here:
http://jsfiddle.net/4SUwg/
<div id="header">
<div id="headerContent">
<div class="search-list"> Search List </div>
<div class="social-buttons"> Social </div>
<div class="signin"> Login Drop Down </div>
</div>
</div>
I would like the div elements within the nav to not wrap. I searched around on stack and could find answers that come close but nothing that completely addressed the issue. My need to have the div element aligned right complicates matters. Must work in all browsers, especially IE's.
Thanks all for your help in advance!!!
Use SPAN .. It's INLINE and not BLOCK ??
<div id="header">
<div id="headerContent">
<span class="search-list"> Search List </span>
<span class="social-buttons"> Social </span>
<span class="signin"> Login Drop Down </span>
</div>
</div>
And your CSS, remove floats
<style>
body {
margin:0;
padding:0;
}
#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden;
}
#headerContent {
height: 32px;
border:1px dashed #fff;
}
.search-list {
width:150px;
background:#039;
}
.social-buttons {
width:150px;
background:#060;
}
.signin {
width:200px;
background:#F00;
}
You want a fluid layout but the most important rule of a fluid layout is not to set a definite width of elements but you have set the width.
The CSS have a <style> tag, which is not required, probably you put it by mistake.
I have set the width of divs inside headerContent in percentage value. The CSS is
body {
margin:0;
padding:0;
}
#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden;
}
#headerContent {
height: 32px;
border:1px dashed #fff;
}
.search-list {
width:28%;
float:left;
background:#039;
}
.social-buttons {
width:28%;
float:left;
background:#060;
}
.signin {
width:28%;
float:right;
background:#F00;
}
Just changed the width value and on my browser it looked fine, better than the before version. Here's a fiddle http://jsfiddle.net/DeepakKamat/s52Hn/8/
I found a solution that works in all browsers, specifically IE6 on up since that was a requirement for this project. If you have something better that accomplishes the same thing please post! My sincere thanks to everyone who answered/helped.
<div id="header2">
<table id="headerContent2">
<tr>
<td id="left" valign="top">
<div id="leftWrapper">
<div class="search-list2">Search List</div>
<div class="social-buttons2">Social Buttons</div>
</div>
</td>
<td id="middle"> </td>
<td id="right" valign="top">
<div class="signin2">Login Drop Down</div>
</td>
</tr>
</table>
</div>
<style>
#header2 {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
}
#headerContent2 {
width:100%;
}
#headerContent2 td {
height: 32px;
padding:0;
margin:0;
}
.search-list2 {
width:150px;
float:left;
background:#039;
}
.social-buttons2 {
width:200px;
float:left;
background:#060;
}
.signin2 {
background:#F00;
float:right;
width:400px;
}
#leftWrapper {
width:400px;
}
#middle {
width:100%;
}
</style>
See Demo of it working here. Copy the code and try it out in all the IE's since JSfiddle does not work in all IE's.
http://jsfiddle.net/GtXKE/
On my computer I have it perfectly looking, it is a 17"
I went to see my web under development on www.hrcprojectconsulting.com on another computer, an old screen of 1080 x 600 i think
and the right panel has dislocated itself from its position and taken the middle container
I conceived it as One main container that wraps, a left container, a center container and a right container. I positioned the main container centered with margin: 0 auto; and it all looked good. Then I had to had the banner, the blue stripe that you will see:
This is my blueprint for all pages:
<link rel="stylesheet" href= "<?php echo base_url() ?>css/style.css" />
<script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>
<div id = "contenedor_principal">
main wrapper
<div id = "left_container">
content for left panel
</div>
<div id="container-center"><!-- 1 -->
content for the center panel
</div> <!-- end of container center 1 -->
<div id = "right_container">
and for the right panel
</div>
</div>
and this is the header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />
<link rel="stylesheet" href= "<?php echo base_url() ?>css/webform.css" />
<script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>
</head>
<div id="header" class = "header"><h1 class="header">Real Estate Worldwide</h1>
<body>
And this is the CSS:
#contenedor_principal
{
background:orange;
width:1040px;
margin: 0 auto;
}
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#FFFFFF;
}
#container-center{
width:635px; /*** Set to = center col width ***/
height:500px;
font-size:8px;
display:inline;
position:absolute;
left:485px;
top:80px;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
#left_container{
width:200px; /*** Set to = center col width ***/
height:500px;
float:right;
margin-right:0px;
font-size:8px;
display:inline;
position:absolute;
left:275px;
top:80px;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
#right_container{
width:202px; /*** Set to = center col width ***/
margin-left:0px;
height:600px;
float:right;
font-size:8px;
display:inline;
position:absolute;
right:260px;
background:url('../assets/uploads/miweb/bg_body.png');
background-repeat:repeat-x;
top:80px;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
#header {
float:inherit;
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
font-size: 10px;
margin: 0 auto;
margin-top: 2px;
padding: 0;
width: 1050px;
height:75px;
h2 {color:#ffffff;}
}
Than can anyway be seen live on my web like I said. I am using 1660 x 900 and 17" but it should be viewable on any resolution and screen.
Any clue as to why it went all upside down?
thank you
The layout you are using is wrong. no need to use position: absolute for every div and then set the top and left.
Instead of that follow the below structure.
HTML
<html>
<head>
<title>Website</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<div id="left_content"></div>
<div id="middle_content"></div>
<div id="right_content"></div>
</div>
</div>
</body>
</html>
CSS
#container {
width:960px;
margin:0 auto;
}
#header {
background: blue;
height:50px;
margin-bottom:20px;
}
#left_content {
float: left;
width:150px;
background: red;
min-height: 600px;
margin-right:20px;
}
#middle_content {
float: left;
width:620px;
background: green;
min-height: 600px;
margin-right:20px;
}
#right_content {
float: right;
width:150px;
background: red;
min-height: 600px;
}
Live Demo
Hope this will help you.
Well, in your css, you clearly coded everything in order it comes correctly only on your screen.
In particular what is going wrong is your #right_container in which you say float:right and than right:260px.
A quick (but bad) solution to your css would be to put float:left instead of float:right and define the number of pixels from the left left:1190px (1190 is approximate)
A better solution would be learn properly css and play with it afterwards!
Background
I am working on a browser-based UI that needs to fill the entire screen without any scrolling. The basic layout is like this:
What I want to achieve
The title div should has a fixed height (2em) and the rest 4 divs/panels should devide the remaining space of the screen according to percentages I set.
What I've tried
The best solution I've found is " CSS - How to force elements to 100% of remaining/available space of parent element without extending beyond it? ", which involves using a container div with position:absolute. This works across all browsers, but requires some additional DIVs to be created. Also, panel 2 can sometimes be forced to start on the next line due to inaccuracies in percentage widths.
My previous solution was based on CSS3 Flexbox, but the model is flawed as it does not resize child elements that have a percentage height after stretching the container boxes (at least Chrome doesn't). (The newer flex-* attributes are only implemented in Chrome and the standard is still changing.)
I have also tried the calc() function; however, it's not yet implemented in Chrome. Also, it requires hard-coding the height of the title element in two places, which I've been trying to avoid.
Edit:
What am I looking for
Just to be clear, I am not asking for a perfect/pure-CSS solution (as none seems to exist). If anyone can suggest any jQuery plug-in or open-source framework that can do this, it would be good enough for me.
In addition, I don't require any backwards compatibility with browser releases before 2012. (As long as the solution uses technology that is implemented in some browser and is going to be implemented by Firefox and Chrome in the near future, it's good enough for me.)
A little something thrown together:
http://jsfiddle.net/gDTGn/2/
Here is a pure CSS version:
http://jsfiddle.net/t0nyh0/KHzsg/63/
The trick to this technique is using position:absolute and using top, bottom, and height to create a fixed header with expanding panels. It is also really important to use:
box-sizing: border-box;
-moz-box-sizing: border-box;
to make the height and width calculations consistent across browsers. Tested and works in IE9, Firefox, and Chrome.
Pure CSS solution: http://jsfiddle.net/ehqcx/7/embedded/result/
This assumes you set width that don't sum up than more than 100%, the small gap at the right side can usually be fixed by using the same background or the background of the page. An alternative is to introduce some Javascript that sets the width of the last panel correctly, but that should be some trivial jQuery code... $("#panels .small:last").width(browser width - other small panels);
Should work correctly for the height, think away the jsFiddle header which takes away some height...
Edit:
Meh, seems the #title is bugging me... http://fiddle.jshell.net/ehqcx/7/show/light/
ECMAScript is the way to go, leaving my answer in place because of the other simplicity... :(
HTML:
<div id="content">
<div id="title">Title!</div>
<div id="panels">
<div id="panel0" class="small">0</div>
<div id="panel1" class="small">1</div>
<div id="panel2" class="small">2</div>
<div id="panel3" class="wide">3</div>
</div>
</div>
CSS:
* { margin, padding: 0px; }
#content { background-color: black; }
#title { background-color: red; }
#panels { background-color: orange; }
#panel0 { background-color: purple; }
#panel1 { background-color: brown; }
#panel2 { background-color: orange; }
#panel3 { background-color: green; }
html, body, #content, #panels { max-height: 100%; height: 100%; max-width: 100%; width: 100%; }
#panels .small { float: left; }
#panels .wide { clear: both; }
#title { height : 2em; }
#panels .small { height: 75%; }
#panels .wide { height: 25%; }
#panel0, #panel1, #panel2 { width: 33.33%; }
It's possible using the new CSS3 flexbox model. It was basically designed to solve the problem you are facing.
Here is a simple example:
CSS:
*{margin:0 padding:0;}
html{height:100%;}
body{height:100%; display:box; box-orient:vertical;}
body > div {box-flex:1; border:1px solid black;}
.header {box-flex:0; height:4em;}
.content {
display: box;
box-orient: horizontal;
}
.content div {
box-flex: 1;
border:1px solid black;
}
HTML:
<html>
<body>
<div class="header">Title</div>
<div class="content">
<div>Panel 0</div>
<div>Panel 1</div>
<div>Panel 2</div>
</div>
<div>Panel 3</div>
</body>
</html>
It has good support in Chrome, Safari, and Firefox, with planned support in IE.
edit 2:
Tested it in
Chrome/Safari: some 1 or two pixel failure, because of percent calculations
FireFox: Perfect
IE9: Perfect
Opera: Can't have decimal places in percentage width values. This is bad
lte IE8: Does not support Array reduce function. One has to make one up (like from here: Array.reduce), Then it works at least in IE8
edit 1:
I added horizontal layout and window resize function
I've fiddled around a bit:
This is just a demonstration: To have a full fledged application you have to add the programming for the horizontal layout. But it's start
http://jsfiddle.net/HerrSerker/PmHtf/
Here is the code
HTML
<div class="full-stretch">
<div class="flex-layout flex-layout-vertical">
<div class="flex-layout-fixed" style="height:50px; text-align: center">
<div class="padding">Title</div>
</div>
<div class="flex-layout-consume flex-layout-consume-3" style="text-align: center">
<div class="flex-layout flex-layout-horizontal">
<div class="flex-layout-consume flex-layout-consume-1" style="text-align: center">
<div class="padding">Panel 0</div>
</div>
<div class="flex-layout-consume flex-layout-consume-1" style="text-align: center">
<div class="padding">Panel 1</div>
</div>
<div class="flex-layout-consume flex-layout-consume-1" style="text-align: center">
<div class="padding">Panel 2</div>
</div>
</div>
</div>
<div class="flex-layout-consume flex-layout-consume-1" style="text-align: center">
<div class="padding">Panel 3</div>
</div>
</div>
</div>
CSS
.full-stretch {
position: absolute;
top: 2px;
right:2px;
bottom:2px;
left: 2px;
}
.padding {
position: absolute;
top: 2px;
right:2px;
bottom:2px;
left: 2px;
border: 1px solid darkGray;
background: lightBlue;
border-radius: 10px;
}
.flex-layout {
position: absolute;
top: 0;
right:0;
bottom:0;
left: 0;
overflow: hidden;
}
.flex-layout-consume {
height: 100%;
float:left;
overflow: hidden;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.flex-layout-vertical > .flex-layout-consume {
width: 100%;
}
.flex-layout-fixed {
height: 100%;
float:left;
overflow: hidden;
position: relative;
}
.flex-layout-vertical > .flex-layout-fixed {
width: 100%;
}
jQuery
(function($) {
var flex = function() {
$('.flex-layout').each(function() {
var fixed = $(this).children('.flex-layout-fixed');
if ($(this).hasClass('flex-layout-horizontal')) { // horizontal
var fixed_widths = $(this)
.children('.flex-layout-fixed')
.get()
.reduce(function(total, elem) {
return (total + $(elem).outerWidth())
},0)
;
var remain_width = ($(this).outerWidth() - fixed_widths)/$(this).outerWidth() * 100; // percent
var consumers = $(this)
.children('.flex-layout-consume')
.get()
;
var count_consumers = consumers
.reduce(function(total, elem) {
var cm = parseInt($(elem).attr('class').match(/flex-layout-consume-(\d+)/)[1]);
$(elem).data('consume_multiplicator', cm);
return total + cm;
},0)
;
var consumers_tic = (remain_width/count_consumers)
$(consumers).each(function() {
$(this).width(Math.round((consumers_tic * $(this).data('consume_multiplicator'))*1000)/1000+'%')
})
} else if ($(this).hasClass('flex-layout-vertical')) { // vertical
var fixed_heights = $(this)
.children('.flex-layout-fixed')
.get()
.reduce(function(total, elem) {
return (total + $(elem).outerHeight())
},0)
;
var remain_height = ($(this).outerHeight() - fixed_heights)/$(this).outerHeight() * 100; // percent
var consumers = $(this)
.children('.flex-layout-consume')
.get()
;
var count_consumers = consumers
.reduce(function(total, elem) {
var cm = parseInt($(elem).attr('class').match(/flex-layout-consume-(\d+)/)[1]);
$(elem).data('consume_multiplicator', cm);
return total + cm;
},0)
;
var consumers_tic = (remain_height/count_consumers)
$(consumers).each(function() {
$(this).height(Math.round((consumers_tic * $(this).data('consume_multiplicator'))*1000)/1000+'%')
})
}
})
};
$(function() {
flex()
$(self).resize(flex)
})
}(jQuery))
I might be missing something in your question, but see if this is what you are looking for. Pure CSS solution that works in all browsers down to IE7.
http://jsfiddle.net/nyHgM/1/
This is my suggestion (pure css)... Tested on IE7+, Chrome & FF http://jsfiddle.net/victmo/hKGUe/
HTML
<div id='header'></div>
<div id='col0'></div>
<div id='col1'></div>
<div id='col2'></div>
<div id='footer'></div>
CSS
div{
position:absolute;
}
#header{
top:0px;
left:0px;
right:0px;
height:3em;
}
#footer{
bottom:0px;
left:0px;
right:0px;
height:2em;
}
#col0,
#col1,
#col2{
top:3em; /* header height */
bottom:2em; /* footer height */
width:33.33%;
}
#col0{ left:0%; width:30%; } /* left = 0 */
#col1{ left:30%; width:40%; } /* left = 0 + 30 */
#col2{ left:70%; width:30%; } /* left = 30 + 40 */
/* Colors */
#header{ background:#bbb; }
#col0{ background:#ccc; }
#col1{ background:#ddd; }
#col2{ background:#eee; }
#footer{ background:#aaa; }