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

<wiewel (AT) gmail (DOT) com> wrote

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

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

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.

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;
}

"Mark Wiewel" <wiewel (AT) gmail (DOT) com> wrote

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.

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.

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

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 (AT) NOSPAM (DOT) bytronic.com

"Mark Wiewel" <wiewel (AT) gmail (DOT) com> wrote

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