2 replies [Last post]
kurt-hectic
Offline
newbie
Last seen: 14 years 31 weeks ago
Joined: 2007-11-22
Posts: 4
Points: 0

Hi,

I have a question regarding a 3 column CSS layout which I took from a posting in this forum.
http://csscreator.com/node/20471

The layout is has tree colums, a two headers and a footer. Please find the code below.
I'm trying to insert two content elements (bot-elem,top-elem) in form of divs into the right colum (container-right).
One of them should be at the bottom, whereas the rest should be inserted starting from top "as normal".
I have been trying to use absolute positionaing and bottom:0, and modifying the height of
the "right", but I never managed to let the "bot-elem" sit right over the footer. Actually
I'm afraid this is due to the same reason this layout was made in the first place, the problem
of making a div fill all the remaining space, but I'm not sure.

I have spent hours on this and I'm near depseration now.. I hope somebody can give me a hint!

Below is the original code, without

many thanks!
Kurt


Your Page Title Here


html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
margin: 0;
padding: 0;
border: 0;
border-collapse: separate;
border-spacing: 0;
}

html, body { height: 100%;}

body {min-width: 770px;} /*** Content Minmum Width, not used by IE5/6, or early versions of Safari ***/

input, select {
margin: 0;
padding: 0;
}

#fullheightcontainer {
position: relative; /*** Let's be nice to IE ***/
width: 100%; /*** Content Width ***/
display: table; /*** For non-IE browsers ***/
height: 100%;
margin-bottom: -30px; /*** NEGATIVE TOTAL Height of Footer Rows ***/
background: #FFCCCC; /*** Background colour of navigation column now ***/
}

#wrapper {
display: table-cell; /*** For non-IE browsers ***/
position: relative; /*** Let's be nice to IE ***/
}

#outer {
position: relative;
margin-left: 200px; /*** Left Column Width ***/
margin-right: 200px; /*** Right Column Width ***/
background: #ADD8E6; /*** Background colour of content column ***/
height: 100%;
}

#float-wrap {
width: 100%;
float: left;
display: inline;
}

#clearheadercenter {
height: 90px; /*** TOTAL Height of Header Rows ***/
overflow: hidden;
}

#clearheaderleft {
height: 90px; /*** TOTAL Height of Header Rows ***/
overflow: hidden;
}

#clearheaderright {
height: 90px; /*** TOTAL Height of Header Rows ***/
overflow: hidden;
}

#clearfootercenter {
height: 30px; /*** TOTAL Height of Footer Rows ***/
overflow: hidden;
}

#clearfooterleft {
height: 30px; /*** TOTAL Height of Footer Rows ***/
overflow: hidden;
}

#clearfooterright {
height: 30px; /*** TOTAL Height of Footer Rows ***/
overflow: hidden;
}

#center {
position: relative; /* fix for IE */
width: 100%;
float: right;
height: 100%;
display: table;
}

#left {
float: left;
display: inline;
width: 200px; /*** Left Column Width ***/
margin-left: -200px; /*** NEGATIVE Left Column Width ***/
position: relative;
}

#right {
float: left;
display: inline;
width: 200px; /*** Right Column Width ***/
margin-right: -200px; /*** NEGATIVE Right Column Width ***/
position: relative;
}

#footer {
z-index: 1;
position: relative;
width: 100%;
height: 0;
}

#subfooter1 {
margin: 0;
background: #FFFFCC;
text-align: center;
height: 30px;
overflow: hidden;
}

#header {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
}

#header-inner {
min-width: 770px; /*** Minimum Content Width ***/
height: 0;
}

#subheader1 {
margin: 0;
background: #FFFFCC;
text-align: center;
height: 30px;
overflow: hidden;
}

#subheader2 {
margin: 0;
background: #FFE7AA;
text-align: center;
height: 60px;
overflow: hidden;
}

#centerfill, #leftfill {display: none;}

#fullheightcontainer{ height: auto; min-height: 100%;}

#centerfill, #leftfill, #rightfill {
display: block;
position: absolute;
top: 0;
width: 100%;
min-height: 100%;
background: #ADD8E6;
}

#leftfill {
width: 200px;
background: #FFCCCC;
}

#rightfill {
left: 100%;
margin-left: -200px;
width: 200px;
background: #FFCCCC;
}











Not much going on here!








No links to see!











Triumph (not verified)
Anonymous's picture
Guru

I've got a better idea.

I've got a better idea. Rather than having us try to figure out your code, why not just mock up the site using photoshop or MS Paint? Then we can advise on the best approach.

kurt-hectic
Offline
newbie
Last seen: 14 years 31 weeks ago
Joined: 2007-11-22
Posts: 4
Points: 0

here comes the mock up

ok.. I did a mockup, please find it below. Actually it is a screenshot of the layout in the code above,
with two boxes (black and red) which represent the two elements in the right column. One (the black one)
should always be at the bottom (kind of a second footer) and the other (the red one) expand as more
content is added into it.

The code I posted above gives you the base layout you seen in the screenshot.. what I'd like to
know is, how I get the two boxes into the right column..

Many thanks for your help!
Kurt

AttachmentSize
capture2.png 32.76 KB