Any HTML5 / CSS Gurus out there?

[#1]

Hi,
I'm working on the UI of a web based project and I am in need of some assistance in the CSS / HTML5 dept. I have created a 'status bar' that contains 5 areas, 4 of the areas have a fixed width and in the fifth I want it to take up the remaining 'slack' depending on the width of the browser window. What I have doesn't quite cut it yet so if you are willing to help could you PM me and I'll point you to the source I already have.

[#2]

Have you had any replies yet?
Is your 5th area just empty space?
If so just float your areas (divs?) to the left inside a container set at 100%
If you must have content inside your 5th area --
Two divs inside a container div.
Your 4 content areas inside the first inner div.
Thus -
Status bar container div at 100%
First inner div is however wide you need it for your four areas. Put your four areas inside here. Careful with your widths. Add 'em up!
Second inner div, floating left, and relative, set to 100%. Should fill up the rest of the space inside the container div.
Depends, of course, what's in your fifth area...
-----
edit -
tested this and it works.
You need to float the first inner div, not the second.
If you need more drop me a line.

[#3]

Hi IanSn,
To answer your questions, No and No.
The fifth section, the largest scaling one, is used to display information. This section I'll call the info pane and is the first panel on the left, with the 4 other ones being the fixed width ones.
I actually already have a variation of what you have said you can see this here but as you'll see the panels are not in the order they're defined in within the HTML.
Please feel free to have a tweak, if you want to.

[#4]

Not sure what I''m supposed to be seeing here!
(Attached pic of what I'm getting at this end.)
So, is the info pane 'footer' in the html?
(Be nice to see the full html for the page.)
Not sure using 'span' is the right option here?
Why not try either making it a proper table with content in each cell, or use divs?

[#5]

You should be seeing this (see attachment).
All of the HTML needed is in the top left pane, the CSS is in the top right and the result in the bottom right.
Simply make the changes you think are best then click Update or Run

[#6]

Hmm, well, another puzzle then... Different browsers at this end are not resolving that.
I try wont editing on this page as I can't see what I've done!
Anyway, from your pic it seems to be working. Is this okay when the window is smaller?
As for being in the wrong order, you've got the first span floating left and the others floating right.
Float the all the span items left, except the last one (no float).
Then add another div underneath the spanned code, before closing the footer div.

Quote

<div class='clearer'> </div>

and the needed css for that -

Quote

.clearer { clear: both;}

to clear the floats.

[#7]

Hi Mook,
There are dangers in seeking to set up fixed widths on a variable width display or canvass.  If the available width is less than the sum of your fixed width elements then you are going to run into problems.
Setting each element's width to 20% (or 5 values which add up to 100%) might be a more viable approach.
CSS3 introduces mi/max-width which might be helpful - see http://www.w3schools.com/css/css_dimension.asp
Another approach (needs some cunning) can be to use the CSS calc function - see http://css-tricks.com/a-couple-of-use-cases-for-calc/

[#8]

That calc offering looks quite promising, I have tried the other suggestions but this looks like it might do the trick. I'll have a go at it tomorrow when I'm back at work.

[#9]

Blimey, that calc does look interesting.
I was assuming the total width of those 4 fixed elements would be small enough not to run into problems. Most mobile has higher resolution and anything with real size problems...
Wandering into the realms of 'responsive' design now, maybe think about 2 (or 3) stylesheets depending where your site may land - where min/max, etc., for screen will be needed.
But don't see a real need to worry about that for this particular element, assuming the rest of the page will not be a problem size-wise.
@Mook
Be interested to hear what your answer is in the end.
TBH, not sure which of those areas is meant to be the 5th variable one.
Looks ok on the pic (apart from being in the wrong order). Did you make some of them float right deliberately? In which case you've lost me!
Now going to go and play with calc!

[#10]

@Townman 
Implementing the calc() function has fixed this for me, I now have a correctly scaling status bar with the first panel auto scaling as the window is resized while the others remain fixed.
@dvorak Out of curiosity, why did you move this thread? When it is has no relation whatsoever to hosting or domains, and TBH was better suited under Help & Support > Other Queries

[#11]

There is no post in here from Jelv 
This is the forum which covers all things web.

[#12]

I am SO sorry Townman, I'll take myself outside and slap the backs of my legs for that one. Where jelv came from I do not know. So 

[#13]

Mook,
Do not worry sometimes we all look the same on here.
Just so glad that you found a solution.  I do not recal if the article I referred you to covered the non-standard browser implementations of
-WebKit-calc and -moz-calc ?
Many of the "Jonny-come-lately" browsers have got some of this CSS stuff totally screwed up, making cross platform compatibility very difficult.  The android (Galaxy) platforms are particularly bad, not being able to attain consistent rendition between a portrate and landscape view of the same page.

[#14]

To be honest, I only read up on how to drive it and to see if the browsers I needed were supported. But looking thorough the article again it would appear not.