CSS split full screen horizontally with pixel and percent

hi all,

i have a strange problem when trying to set up a horizontal menubar:

i would like to split the whole screen from left to right into 9
pieces. the first one has a fixed width of 186px. the remaining 8
should all have the same width, depending on the screen resolution.

how can i get this to work in both IE and mozilla? i already have a
solution that works fine in mozilla, but does not in IE.

is this possible by using a table? i am currently trying to solve this
with DIVs. the problem seems to be that menubar hasn't got a width
(which is well handled by mozilla, but not by IE).

so, the menubar should start at 186px from left and then should have 8
sections all with the same width, which should fill the screen to the
very right, not caring about screen resolution.


***** HTML CODE ****

<div id="menubar">
<div id="leftframe"></div>
<div id="leftframe2"></div>
<div id="leftframe3"></div>
<div id="leftframe4"></div>
<div id="leftframe5"></div>
<div id="leftframe6"></div>
<div id="leftframe7"></div>
<div id="leftframe8"></div>
</div>


***** CSS CODE ****
#menubar
{
position: absolute;
top: 0;
left: 186px;
right: 0;
height: 30px;
z-index: 1;
background-color: #FBAE5C;
}


#leftframe
{
position: absolute;
top: 0px;
left: 0px;
width: 12.5%;
height: 100%;
z-index: 2;
background-color: #FBAE5C;
color: #F7941D;
text-align: left;
vertical-align: middle;
}

#leftframe2
{
position: absolute;
top: 0px;
left: 12.5%;
width: 12.5%;
height: 100%;
z-index: 2;
background-color: #F7941D;
text-align: left;
vertical-align: middle;
}

#leftframe3
{
position: absolute;
top: 0px;
left: 25%;
width: 12.5%;
height: 100%;
z-index: 2;
background-color: #C2BE75;
color: #AAA003;
text-align: left;
vertical-align: middle;
}

#leftframe4
{
position: absolute;
top: 0px;
left: 37.5%;
margin: 0px;
padding: 0px;
width: 12.5%;
height: 100%;
z-index: 2;
background-color: #AAA003;
text-align: left;
vertical-align: middle;
}

#leftframe5
{
position: absolute;
top: 0px;
left: 50%;
margin: 0px;
padding: 0px;
width: 12.5%;
height: 100%;
z-index: 2;
background-color: #8ACCCA;
text-align: left;
vertical-align: middle;
}


#leftframe6
{
position: absolute;
top: 0px;
left: 62.5%;
margin: 0px;
padding: 0px;
width: 12.5%;
height: 100%;
z-index: 2;
background-color: #40B9E8;
text-align: left;
vertical-align: middle;
}

#leftframe7
{
position: absolute;
top: 0px;
left: 75%;
margin: 0px;
padding: 0px;
width: 12.5%;
height: 100%;
z-index: 2;
background-color: #F69AC1;
color: #E66BA4;
text-align: left;
vertical-align: middle;
}

#leftframe8
{
position: absolute;
top: 0px;
left: 87.5%;
margin: 0px;
padding: 0px;
width: 12.5%;
height: 100%;
z-index: 2;
background-color: #E66BA4;
color: #F69AC1;
text-align: left;
vertical-align: middle;
}


any help is appreciated!
mark

re: CSS split full screen horizontally with pixel and percent

<wiewel@gmail.com> wrote in message
news:1134043216.519536.189990@o13g2000cwo.googlegr oups.com...[color=blue]
> hi all,
>
> i have a strange problem when trying to set up a horizontal menubar:
>
> i would like to split the whole screen from left to right into 9
> pieces. the first one has a fixed width of 186px. the remaining 8
> should all have the same width, depending on the screen resolution.
>
> how can i get this to work in both IE and mozilla? i already have a
> solution that works fine in mozilla, but does not in IE.
>
> is this possible by using a table? i am currently trying to solve this
> with DIVs. the problem seems to be that menubar hasn't got a width
> (which is well handled by mozilla, but not by IE).
>
> so, the menubar should start at 186px from left and then should have 8
> sections all with the same width, which should fill the screen to the
> very right, not caring about screen resolution.
>
>
> ***** HTML CODE ****
>
> <div id="menubar">
> <div id="leftframe"></div>
> <div id="leftframe2"></div>
> <div id="leftframe3"></div>
> <div id="leftframe4"></div>
> <div id="leftframe5"></div>
> <div id="leftframe6"></div>
> <div id="leftframe7"></div>
> <div id="leftframe8"></div>
> </div>
>
>
> ***** CSS CODE ****
> #menubar
> {
> position: absolute;
> top: 0;
> left: 186px;
> right: 0;
> height: 30px;
> z-index: 1;
> background-color: #FBAE5C;
> }
>
>
> #leftframe
> {
> position: absolute;
> top: 0px;
> left: 0px;
> width: 12.5%;
> height: 100%;
> z-index: 2;
> background-color: #FBAE5C;
> color: #F7941D;
> text-align: left;
> vertical-align: middle;
> }
>
> #leftframe2
> {
> position: absolute;
> top: 0px;
> left: 12.5%;
> width: 12.5%;
> height: 100%;
> z-index: 2;
> background-color: #F7941D;
> text-align: left;
> vertical-align: middle;
> }
>
> #leftframe3
> {
> position: absolute;
> top: 0px;
> left: 25%;
> width: 12.5%;
> height: 100%;
> z-index: 2;
> background-color: #C2BE75;
> color: #AAA003;
> text-align: left;
> vertical-align: middle;
> }
>
> #leftframe4
> {
> position: absolute;
> top: 0px;
> left: 37.5%;
> margin: 0px;
> padding: 0px;
> width: 12.5%;
> height: 100%;
> z-index: 2;
> background-color: #AAA003;
> text-align: left;
> vertical-align: middle;
> }
>
> #leftframe5
> {
> position: absolute;
> top: 0px;
> left: 50%;
> margin: 0px;
> padding: 0px;
> width: 12.5%;
> height: 100%;
> z-index: 2;
> background-color: #8ACCCA;
> text-align: left;
> vertical-align: middle;
> }
>
>
> #leftframe6
> {
> position: absolute;
> top: 0px;
> left: 62.5%;
> margin: 0px;
> padding: 0px;
> width: 12.5%;
> height: 100%;
> z-index: 2;
> background-color: #40B9E8;
> text-align: left;
> vertical-align: middle;
> }
>
> #leftframe7
> {
> position: absolute;
> top: 0px;
> left: 75%;
> margin: 0px;
> padding: 0px;
> width: 12.5%;
> height: 100%;
> z-index: 2;
> background-color: #F69AC1;
> color: #E66BA4;
> text-align: left;
> vertical-align: middle;
> }
>
> #leftframe8
> {
> position: absolute;
> top: 0px;
> left: 87.5%;
> margin: 0px;
> padding: 0px;
> width: 12.5%;
> height: 100%;
> z-index: 2;
> background-color: #E66BA4;
> color: #F69AC1;
> text-align: left;
> vertical-align: middle;
> }
>
>
> any help is appreciated!
> mark[/color]

Suggest you give menubar a width of 100%. All div's will then be visible in
IE6.

re: CSS split full screen horizontally with pixel and percent

thanks for you reply, but that doesn't solve the problem. i need to
give a width of 186px to the first DIV. all other DIVs need to be of
the same width from 186px to the very right of the browser window.

re: CSS split full screen horizontally with pixel and percent

sorry, forgot to mention: when i give menubar a width of 100%, i need
to scroll to the very right as the window is then 186px to large.

menubar is a child of the body. body is defined as:

body
{
position: absolute;
margin: 0;
padding: 0;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}

re: CSS split full screen horizontally with pixel and percent

"Mark Wiewel" <wiewel@gmail.com> wrote in message
news:1134052887.251783.154520@g47g2000cwa.googlegr oups.com...[color=blue]
> thanks for you reply, but that doesn't solve the problem. i need to
> give a width of 186px to the first DIV. all other DIVs need to be of
> the same width from 186px to the very right of the browser window.[/color]

Your code indicates that menubar is 186px from the left but has no width.
The width of all other divs is 12.5% (percent of what?). I must be
misunderstanding you. Do you want menubar to be 186px from the left and all
other divs (except menubar) to be 186px wide? That would be a total width of
1488px for 8 divs. If so then horizontal scrolling will surely be required
to view all 8 divs. I'm confused.

re: CSS split full screen horizontally with pixel and percent

sorry for the confusion, but my english isn't that well:

i would like to have:

column1: width 186px;
column2: width 12.5 % OF THE REST
column3: width 12.5 % OF THE REST
....
....
column9: width 12.5 % OF THE REST

OF THE REST means screenwidth - 186px

does this help?

cheers, mark

re: CSS split full screen horizontally with pixel and percent

Try this in the html

<div class="fixedColumn" id="column1">
</div>
<div id="otherColumns>
<div class="anotherColumn" id="column2"></div>
...
<div class="anotherColumn" id="column9"></div>
</div>

then experiment a bit with the css to make it work.

--
Martin Eyles
martin.eyles@NOSPAM.bytronic.com

"Mark Wiewel" <wiewel@gmail.com> wrote in message
news:1134118446.432303.147650@g43g2000cwa.googlegr oups.com...[color=blue]
> sorry for the confusion, but my english isn't that well:
>
> i would like to have:
>
> column1: width 186px;
> column2: width 12.5 % OF THE REST
> column3: width 12.5 % OF THE REST
> ...
> ...
> column9: width 12.5 % OF THE REST
>
> OF THE REST means screenwidth - 186px
>
> does this help?
>
> cheers, mark
>[/color]