Thu, 2007-03-08 00:37
Ok, so this is my first site I've made since leaving the comfortable world of tables that I was living in.
What I want is a 116px tall 100% width header
Under that I want a background that has a fade background on it. This image will be placed just under the header and will fade into a colour then the background colour of this section will match the bottom of the faded image, you see? This will make up the rest of the page (the part left over from the header).
Then in the middle of this faded background there will be a section that's about 60% wide. This should also fill the rest of the height of the page.
However the problem I'm having is the fact the parts that are meant to fill the rest of the page end up being a lot bigger (116 pixels I guess? as its set too 100% height and it sees 100% as the page height and adds that onto the 116 pixels that I've already used on the page, as opposed to the left over space).
So, yeah, here's my code.
html {
height: 100%;
}
body {
margin:0;
padding:0;
height: 100%;
width:100%;
background-color: #99CC66;
}
A:link {text-decoration: underline; color:#FFFFFF;}
A:visited {text-decoration: none}
A:active {text-decoration: none; color:#E8E3C6}
A:hover {text-decoration: none;}
#wrap {
height:100%;
width: 100%;
position: inherit;
}
#header {
width: 100%;
background-color: #706a60;
height: 108px;
text-align: left;
border-bottom-width: 8px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
}
#inner-wrap {
height: 100%;
width: 100%;
background-color: #a09788;
position:inherit;
}
#content {
height: 100%;
width: 65%;
border-right-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
background-color: #9933FF;
margin-right: auto;
margin-left: auto;
}
Untitled Document
header
Content for id "content" Goes Here
There might be a lot of stupid mistakes in this css as I really have tried everything, taking apart other sites code etc
Thanks for any help.
Thu, 2007-03-08 01:30
#1
I think you used the wrong
I think you used the wrong code tags as we're not seeing any html,
but a couple of comments:
width: 100% is rarely needed and will often cause problems if used without full understanding of the box model. A div, or any block level element for that matter, will take up all available width by default.
learn to use shorthand css. It's easier to code, and easier to read. For instance
border-bottom-width: 8px; border-bottom-style: solid; border-bottom-color: #FFFFFF;
could be:
border-bottom: 8px solid #FFF;
ClevaTreva has just written an article on 100% height and posted here.
You may not need all that 100% stuff to accomplish what you want. Can you post a pic?
Thu, 2007-03-08 02:35
#2
wolfcry911 wrote:I think you
wolfcry911 wrote:
I think you used the wrong code tags as we're not seeing any html,
but a couple of comments:
Yeah, I have no idea what happened there. I went in to edit to check it and I cant see anything wrong with it
wolfcry911 wrote:
learn to use shorthand css. It's easier to code, and easier to read. For instanceborder-bottom-width: 8px; border-bottom-style: solid; border-bottom-color: #FFFFFF;
could be:
border-bottom: 8px solid #FFF;
Ok, cool. I was reading about this earlier. The reason it was like that was because thats what dreamweaver put out. I would be coding in notepad like I usually do, but seeing as divs were new to me I thought I would go back to wysiwyg for a bit.
wolfcry911 wrote:
ClevaTreva has just written an article on 100% height and posted here.
You may not need all that 100% stuff to accomplish what you want.
That's awesome. I have been looking for something like that for a while, kinda lucky it just got posted tonight. Goes into a lot of detail.
Also, that article has pretty much solved my problem. I had resorted to using clear divs to push other divs around to get them from behind the header earlier but thought this was cheating and presumed there would be a better way to do it so I took it out. Guess I was wrong 
Thanks, anyway
Thu, 2007-03-08 14:46
#3
Use the <code></code> tags
Use the <code></code> tags instead, the BB code tags have problems with HTML.
Thu, 2007-03-08 16:37
#4
thepineapplehead wrote:Use
thepineapplehead wrote:
Use the <code></code> tags instead, the BB code tags have problems with HTML.
Yeah that's what I thought I did...Guess not.
The same way I did the css.
Tue, 2007-03-13 01:42
#5
ok, I'm back. I've really
ok, I'm back.
I've really tried using that 100% guide but I've had a lot of trouble adapting it to what I need (I didnt think I would)
Here is the mock layout I drew up before I started.
It consists of a header with a menu in it. Below that is 1 column, about 60% width of the page. To left and write of this column is a background image which fades from top to bottom.
The problem I'm having is having it fill the page, instead of filling way to much of the page and forcing me to scroll up and down. Can anyone help? :\
Tue, 2007-03-13 07:01
#6
Hi In order for the design
Hi
In order for the design in the article I wrote to fill the page width, some changes are needed.
This is the basic idea (no column side graphics):
html:
Your Page Title Here
@import url("style-no-border.css");
@import url("ie7style-no-border.css");
This is the
Main Content
This is the Left Sidebar
This is the Right Sidebar
This is Sub-Header #1 (with Fixed Height)
This is Sub-Header #2 (with Fixed Height)
css:
/*** Style for 3 Column Full Width Full Height Template ***/
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{
font-family: verdana, arial, helvetica, sans-serif;
font-size:100.1%; /*** Don't change this setting. Make all other
font-sizes in % (preferred) or ems ***/
color:#000000;
background:#F2F6F9; /*** Background colour of page ***/
min-width:770px; /*** Minimum Content Width ***/
}
input,select{
margin:0;
padding:0;
}
strong,b{
font-weight:bold;
}
p{
font-size:90%;
line-height:1.1em;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */
#fullheightcontainer{
position:relative;
width:100%; /*** Content Width ***/
display:table;
height:100%;
margin-bottom:-50px; /*** NEGATIVE TOTAL Height of Footer Rows ***/
background:#FFCCCC; /*** Background colour of left AND right columns ***/
}
#wrapper{
display:table-cell;
position:relative;
}
#outer{
position:relative;
margin-left:150px; /*** Left Column Width ***/
margin-right:150px;
background:#ADD8E6; /*** Background colour of center column. ***/
height:100%;
}
#float-wrap{
width:100%;
float:left;
display:inline;
}
#left{
float:left;
display:inline;
width:150px; /*** Left Column Width ***/
margin-left:-150px; /*** NEGATIVE Left Column Width ***/
position:relative;
}
#right{
float:left;
display:inline;
width:150px; /*** Right Column Width ***/
margin-right:-150px; /*** NEGATIVE Right Column Width ***/
position:relative;
}
#center{
position:relative; /* fix for IE */
width:100%;
float:right;
height:100%;
display:table;
}
#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:50px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#clearfooterleft{
height:50px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#clearfooterright{
height:50px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#footer{
z-index:1;
position:relative;
width:100%;
height:0px;
}
#subfooter1{
margin:0px;
background:#FFFFCC;
text-align:center;
height:50px;
overflow:hidden;
}
#header{
z-index:1;
position:absolute;
top:0px;
left:0px;
width:100%;
height:0px;
}
#header-inner{
min-width:770px; /*** Minimum Content Width ***/
height:0px;
}
#subheader1{
margin:0px;
background:#FFFFCC;
text-align:center;
height:65px;
overflow:hidden;
}
#subheader2{
margin:0px;
background:#FFE7AA;
text-align:center;
height:25px;
overflow:hidden;
}
#container-left{}
#container-right{}
#container-center{}
#centerfill,#leftfill,#rightfill{display:none}
ie7 css fix:
/*** Extra Style for IE7 3 Column Full Width 100% Height Template ***/
#fullheightcontainer{height:auto;min-height:100%}
#centerfill,#leftfill,#rightfill{
display:block;
position:absolute;
top:0px;
width:100%;
min-height:100%;
background:#ADD8E6;
}
#leftfill{
width:150px;
background:#FFCCCC;
}
#rightfill{
left:100%;
margin-left:-150px;
width:150px;
background:#FFCCCC;
}
Hope this helps
Tue, 2007-03-13 21:38
#7
ClevaTreva wrote: Hope this
ClevaTreva wrote:
Hope this helps
Indeed it did. Infact, its really awesome. Thanks.
It took some reworking but I, currently, have it set up the way I wanted. Thanks, ClevaTreva, for making my transition to div's less sucky than it could of been.
I'm sure I'll be back...and I mean that in a good way towards the site, not a bad way towards my skills.
Tue, 2007-03-13 21:48
#8
Post a link to let us know
Post a link to let us know how it's going 
Sat, 2007-09-29 16:07
#9
Ok, so I've finally started
Ok, so I've finally started work on this site again and everything was going fine until I fired up ie7.
My centre colom doesn't fill the whole page in ie7, like it does in other software. If I remove the special ie7 code you gave me then it works fine, how ever if I have a page where the content forces the page to scroll then I just have more issues.
I'm assuming I need to add "container-center" to the ie7 special code but I just don't know what attributes I have to give it. It works fine in ie 6 and firefox.
Link to page (ignore the other pages)
(I've left the ie7 special code in the source code for now just as I found it easier to edit, I plan on moving it to its own css file after)
HTML
ifportfolio :: home
/*** Extra Style for IE7 3 Column Full Width 100% Height Template ***/
#fullheightcontainer{height:auto;min-height:100%}
#centerfill,#leftfill,#rightfill,{
display:block;
position:absolute;
top:0px;
width:100%;
min-height:100%;
}
#leftfill{
width:17.5%;
}
#rightfill{
left:100%;
margin-left:-17.5%;
width:17.5%;
}
#container-center{
min-height:100%;
}
/*\*//*/
#tabs2 ul li a {
display: inline-block;
white-space: nowrap;
width: 1px;
}
#tab2 ul {
padding-bottom: 0;
margin-bottom: -1px;
}
/**/
html #tabs2 ul li a {
padding: 0;
}
News
Well hello and welcome
28 August 2007
Welcome to my portfolio. I hope to have this as a place to bring together all my "work" as well as works in progress. Stick around and feel free to come back when ever you like.
- Home
- Websites
- Other Work
- About
- Links
- Contact
Css
/*** Style for 3 Column Full Width Full Height Template ***/
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{
font-family: verdana, arial, helvetica, sans-serif;
font-size:100.1%; /*** Don't change this setting. Make all other
font-sizes in % (preferred) or ems ***/
color:#000000; /*** Background colour of page ***/
min-width:770px; /*** Minimum Content Width ***/
background-color: #a09787;
}
input,select{
margin:0;
padding:0;
}
strong,b{
font-weight:bold;
}
A:link {text-decoration: underline; color:#FFFFFF;}
A:visited {text-decoration: underline; color:#FFFFFF;}
A:active {text-decoration: none; color:#E8E3C6}
A:hover {text-decoration: none; color:#FFFFFF;}
p{
font-size:75%;
line-height:1.1em;
color: #FFFFFF;
font-family: Tahoma, sans-serif, Arial;
}
h1 {
font: 130% Tahoma, sans-serif, Arial;
color: #ffffff;
line-height:1.1em;
color: #FFFFFF;
}
h2 {
font: 100% Tahoma, sans-serif, Arial;
color: #99ff99;
line-height:1.1em;
color: #99ff99;
}
h3 {
font: 65% Tahoma, sans-serif, Arial;
color: #ffffff;
line-height:1.1em;
color: #FFFFFF;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */
#fullheightcontainer{
position:relative;
width:100%; /*** Content Width ***/
display:table;
height:100%;
margin-bottom:-15px; /*** NEGATIVE TOTAL Height of Footer Rows ***/
background-image: url(images/fadebg.gif);
background-repeat: repeat-x;
}
#wrapper{
display:table-cell;
position:relative;
}
#outer{
position:relative;
margin-left:17.5%; /*** Left Column Width ***/
margin-right:17.5%;
background:#827969; /*** Background colour of center column. ***/
height:100%;
border-left: 2px solid #FFF;
border-right: 2px solid #FFF;
}
#float-wrap{
width:100%;
float:left;
display:inline;
}
#left{
float:left;
display:inline;
width:17.5%; /*** Left Column Width ***/
margin-left:-17.5%; /*** NEGATIVE Left Column Width ***/
position:relative;
}
#right{
float:left;
display:inline;
width:17.5%; /*** Right Column Width ***/
margin-right:-17.5%; /*** NEGATIVE Right Column Width ***/
position:relative;
}
#center{
position:relative; /* fix for IE */
width:100%;
float:right;
height:100%;
display:table;
}
#clearheadercenter{
height:116px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearheaderleft{
height:116px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearheaderright{
height:116px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearfootercenter{
height:15px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#clearfooterleft{
height:15px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#clearfooterright{
height:15px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#footer{
z-index:1;
position:relative;
width:100%;
height:0px;
}
#subfooter1{
margin:0px;
text-align:center;
height:15px;
overflow:hidden;
}
#header{
z-index:1;
position:absolute;
top:0px;
left:0px;
width:100%;
height:0px;
}
#header-inner{
min-width:770px; /*** Minimum Content Width ***/
height:116px;
}
#subheader1{
margin:0px;
padding-left:5em;
background:#706a60;
height:76px;
overflow:hidden;
}
#subheader2{
margin:0px;
background:#706a60;
text-align:center;
height:32px;
overflow:hidden;
border-bottom: 8px solid #fff;
}
#contentbox {
background-image: url(images/diaglinebg.png);
background-repeat: repeat;
padding: 5px;
}
#container-left{}
#container-right{}
#container-center{
padding-left: 34px;
padding-right: 34px;
}
#centerfill,#leftfill,#rightfill{
display:none;
}
#form {
width: 80%;
padding: 4px;
position: relative;
right:auto;
float:left;
margin-bottom: 5px;
}
#formcell {
background: #706a60;
padding: 1px ;
border: 1px;
border-style:solid;
border-color:#FFFFFF;
color: #fff;
margin-bottom: 2px;
margin-top: 0px;
}
/*- Menu Tabs 2--------------------------- */
#tabs2 {
margin: 0.7em 0 0;
padding: 0.0em 0 0;
font-weight: bold;
font-size: 70%;
}
#tabs2 ul, #tabs2 ul li {
list-style: none;
margin: 0;
padding: 0;
}
#tabs2 ul {
padding: 6px 0 5px;
text-align: center;
}
#tabs2 ul li {
display: inline;
margin-right: -2px;
}
#tabs2 ul li a {
background:url("images/menu/tableft2.gif") no-repeat left top;
padding: 5px 0;
text-decoration:none;
}
#tabs2 ul li span {
background:url("images/menu/tabright2.gif") no-repeat right top;
padding:5px 10px 5px 5px;
margin: 4px 0 4px 4px;
color:#84776B;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs2 a span {float:none;}
/* End IE5-Mac hack */
#tabs2 a:hover span {
color:#74675B;
}
#tabs2 a:hover {
background-position:0% -42px;
}
#tabs2 a:hover span {
background-position:100% -42px;
}
Wed, 2007-10-17 16:41
#10
Hi I've been away for a few
Hi
I've been away for a few months, and don't have much free time right now. For those of you in England, if I say I teach at a Secondary School and tell you an Ofsted visit is imminent, you will understand the panic my life is right now.
In your html, you have this in the in page css:
#container-center{
min-height:100%;
}
If removed it is all OK.
Haven't got my brain in gear right now as to why this is so.
Hope this helps.
Wed, 2007-10-17 18:16
#11
ClevaTreva wrote:Hi
ClevaTreva wrote:
Hi
I've been away for a few months, and don't have much free time right now. For those of you in England, if I say I teach at a Secondary School and tell you an Ofsted visit is imminent, you will understand the panic my life is right now.
Ouch. No idea about Ofsted with us (although we've only been open 3ish years) but we've got an Open Evening on 9th of November, and 60 brand new Dell pcs to get up and running . . . . and I'm on holiday next week 
Wed, 2007-10-17 18:35
#12
Hi TPH I've got upwards of
Hi TPH
I've got upwards of 100 machines to manually install PhotoShop CS3 on (it won't install using an msi, coz I can't find a network msi for it).
I've got Year 7 parents evening tomorrow. And I got a 2 foot high stack of Year 11 coursework to mark, oh and my daughter is moving in over half term to stay with me permanently, so i have been sorting out the house and her new school. Nightmare.
Wed, 2007-10-17 20:18
#13
Teacher as well as
Teacher as well as technician? Ouch.
We've got an MSI for Photoshoop-da-whoop Elephants, although my predecessor was the one that made it.
What network do you run? Vanilla XP, RM CC3, Novell?
/off topic
Thu, 2007-10-18 19:16
#14
Not a techie, just they
Not a techie, just they don't have the time, and I need the software.
We run XP PRO and Windows 200X server (can't remember which) over an RM network (we don't often buy machines from them though!).
Sat, 2007-10-20 13:09
#15
We went with Dell for Phase
We went with Dell for Phase 2. The kids get brand new Core 2 Duo Optiplex 745s and 20.1" widescreen TFTs.
Life's not fair
Wed, 2007-12-05 23:39
#16
Hey, I forgot about this
Hey, I forgot about this thread and I deeply appreciate the help you've been giving me however...it's still not working.
In IE7, if the content doesn't fill the page, then the div doesn't fill the page. I've attached a screen shot to show what I mean
Mon, 2007-12-10 01:10
#17
Hi
Hi
Can you post a link to the current problem page and I'll look at it.
TPH ...
We just had the ofsted visit and got nearly (all but one aspect) maximum grades for all areas. PHEW! We are winding down for the holidays and I am whacked.
It was 3 years and one month since they last visited BTW.
Mon, 2007-12-10 21:12
#18
ClevaTreva wrote:Hi Can you
ClevaTreva wrote:
Hi
Can you post a link to the current problem page and I'll look at it.
TPH ...
We just had the ofsted visit and got nearly (all but one aspect) maximum grades for all areas. PHEW! We are winding down for the holidays and I am whacked.
It was 3 years and one month since they last visited BTW.
winding down? I've got a massive list of stuff that needs doing over Christmas congrats on the ofsted grades 
Mon, 2007-12-10 22:41
#19
Well There is always a lot
Well
There is always a lot to do, whether you do it or not is another matter
Tue, 2007-12-11 23:36
#20
Sorry, my ftp was playing
Sorry, my ftp was playing up. Only just got it working now.
Wed, 2007-12-12 20:38
#21
OK Got the page. I am so
OK
Got the page. I am so tired right now I could ........... zzzzzzzzzzzz.
Look at it tomorrow
Tue, 2007-12-18 18:26
#22
It's quite the doozy huh
It's quite the doozy huh
Mon, 2007-12-31 15:24
#23
Hi Well, the problem is
Hi
Well, the problem is your use of percentages for the column widths. You have used 17.5%, 65% and 17.5%, but then used borders to make the column.
The design I posted has a variable width center column and fixed width external columns. You must therefore fix those left and right columns and put the border on them.
Let me know what you want to do.
Trev
Wed, 2008-01-02 23:51
#24
Ok. I thought I knew what
Ok.
I thought I knew what you meant and attempted to fix it, however, it didn't.
Are you saying that the 2px border is causing the problem? Or are you saying that I cant use percentages for the outer column parts? My attempt at fixing either of these didn't seem to work :\
Thu, 2008-01-03 03:48
#25
Since your column widths add
Since your column widths add up to exactly 100%, any border makes them bigger than that, thus the scrollbars. Padding, margins, and borders all add more width to an element. If that element or combination of elements are already filling up 100% of the available width then adding a border of any size greater than 0 will make the total width more than 100% wide.
Thu, 2008-01-03 16:48
#26
Well that's what I thought,
Well that's what I thought, but removing the border didn't fix the problem.
(also you seem to have confused the problem. There is no scrollbar issue here. Its an issue of the page not filling the screen in ie7)
Fri, 2008-01-04 08:14
#27
It's all because IE7 can't
It's all because IE7 can't inherit the min-heights because it didn't implement the table property. IE 6 used height as min-height to get round this, but MS 'fixed' this 'bug'.
So I used three filler columns (at the start of the body html). Because I implemented these rather simply (not thinking someone would do as you have), your design broke. I will re-work the css so those columns are more sophisticated to fix it (I had a brainwave this morning on how to do it). I'll do it this weekend). I also found a way to avoid using the clear headers (etc) filler divs.
Trev
Tue, 2008-01-15 06:50
#28
Sorry for the delay - continuing work pressures :(
In your html, make sure the link to the general stylesheet is before the ie7 style.
This is the new ie7 style:
#fullheightcontainer{height:auto;min-height:100%}
#wrapperfill{
position:absolute;
top:0;
display:block;
height:100%;
}
In your html, replace this:
with this:
In your main css ...
Replace this:
#centerfill, #leftfill, #rightfill { display: none; }
with this:
#wrapperfill { display: none; }
Then you need to add div id's to the start of the css of these divs:
#wrapper,#wrapperfill { css here }
#outer,#outerfill { css here }
#float-wrap,#float-wrapfill { css here }
#left,#leftfill { css here }
#right,#rightfill { css here }
#center,#centerfill { css here }
I THINK that will do it. Let me know.
Trevor
Tue, 2008-01-15 19:53
#29
You're some sort of coding
You're some sort of coding genius. Thanks for the help. So far, it seems to work well. That was a nice into into css for me, huh
Again, thanks so much for the help Trevor.