|
CSS - Css Column Height Problems
Hi guys,
I am struggling a bit with getting the background of one of my css-created columns to be the height I want it to be. If you have a look at http://www.addictivemedia.com.au/clients/REW/ you will see (depending on your browser) that the left column behaves not the way I want it to: - in IE 6 it creates an additional scrollbar (because it adds the height of the banner at the top to the 100% height I gave to the column) - in all other browsers it is not as long as the column on the right The effect I want to achieve is of course for both columns to have the same height and (if possible) to always push the footer to the bottom of the browser window. I have tried the pushing to the bottom many times and out of previous posts I gather that it probably won't happen for all browsers. But I cannot figure out why the left column doesn't extend as far as the right one. Thanks for your help! Similar TutorialsHello Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between. If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11 I would like the end result to work in the above browsers as well as IE7 if possible I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Columns</title>
<style type="text/css">
*, html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#maincontainer {
position: relative;
height: 100%;
background: #eee;
}
#left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: #fbb;
height: 100%;
}
#mid {
position: relative;
margin: 0 200px 0 200px;
background: #efe;
height: 100%;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background: #bbf;
height: 100%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="left">
left start<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left end<br />
</div>
<div id="mid">
mid start<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid end<br />
</div>
<div id="right">
right start<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right end<br />
</div>
</div>
</body>
</html>
In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter Thanks in advance can i make my left column, the same height as my right column? or infact, if the left is taller than the right, the right extends to it and if the right is taller than the left the left extends to it? is this possible, cheers heres my css: left column, is #leftNav and the right column is #contentMain PHP Code: #content { margin:0px auto; padding: 0; width: 760px; } #contentMain { padding: 0; margin: 0; float: right; width: 632px; } #leftNav { color: #000; float: left; margin: 0; padding: 0; width: 128px; } I have a css layout in which I cannot get the height of my columns to extend correctly. If I declare a height, then that fixex the height temporarly until I enter more text then the column will overlap the footer. I have tried using the clear left and clear right for both columns but that doesn't work either. Would anyone mind looking over my code too see what I'm doing wrong. Here is the code: Code:
<body>
<div id="topper">
<div>
<a href="">Header</a>
</div>
</div>
<div id="contentHolder">
<div id="wideBox">
<div id="mainBox">
<div id="frame" class="homeFrame">
<img src="i/home.jpg" alt="Park Hill Christian Church" />
</div>
<div id="nav">
<p><a href="">Menu 1</a> <a href="">Menu 2</a> <a href="">Education</a> <a href="">Menu 3</a> <a href="">Menu 4</a> <a href="">Menu 5</a> <a href="">Menu 6</a></p>
</div>
<div id="right">
Column Right
</div>
<div id="lineBacker">
<div id="content" class="homeContent">
<h1>Welcome!</h1>
<p>Body Content</p>
</div>
</div>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
Code: body {
position: relative;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #940609;
}
a {
text-decoration: none;
}
img {
border: 0;
}
/*
MAIN DIV STYLES
*/
#topper {
width: 100%;
background-color: #FFFFFF;
}
#topper div {
width: 705px;
margin: 0 auto 0 auto;
color: #940609;
text-align: right;
padding: 5px 0 5px 0;
}
#topper div a, #topper div a:visited {
color: #940609;
}
#contentHolder {
position: relative;
width: 100%;
}
#wideBox {
position: relative;
width: 100%;
border-top: 10px solid black;
background-color: #BD2A2F;
}
#mainBox {
position: relative;
width: 725px;
margin: 0 auto 0 auto;
border-left: 10px solid black;
border-right: 10px solid black;
background-color: #000;
}
#frame {
border-right: 10px solid black;
float: left;
background-color: #000000;
}
.homeFrame {
width: 188px;
}
#nav {
float: right;
width: 507px;
padding: 0px 10px 0px 10px;
border-bottom: 10px solid black;
background-color: #FFF;
clear:right;
}
#nav a, #nav a:visited {
color: #000;
padding: 3px;
font-size: 13px;
}
#nav a:hover {
color: #940609;
}
#right {
float: right;
width: 180px;
text-align: center;
padding: 5px;
background-color: #D6B569;
}
#right h3 {
color: white;
font-size: 20px;
margin-top: -2px;
}
#right a, a:visited, {
font-weight: bold;
color: black;
}
#right p{
font-size: 10px;
margin-bottom: -5px;
}
#lineBacker {
margin-left: 198px;
background-color: #D6B569;
}
#content {
background-color: #FFFFFF;
padding: 15px;
margin-right: 200px;
}
#content p, img{
float: right;
}
#footer {
width: 100%;
border-top: 10px solid black;
text-align: right;
background-color: #940609;
}
#footer p {
width: 700px;
margin: 5px auto 20px auto;
color: #FFFFFF;
}
#footer a, #footer a:visited {
color: #FFFFFF;
}
/*
INNER STYLES
*/
h1 {
color: #940609;
font-family: Times, Times New Roman, Garamond, serif;
font-weight: normal;
font-size: 28px;
}
I think problem lies within the #content id because if I set a height or min-height that will solve the problem temporarly. If anyone could look at this I would be very grateful. Thanks, Teamhonda81 I cannot figure out what's going on with my site. The white background box does not have the height of 100%. I was working but I changed something to get the columns to line up right for IE. Can anyone help.... beachweeklive.org Everyone complains about trying to get percentage column widths and fluid lengths in CSS but I've got problems with percentage height. My CSS and HTML are below. What I want to do is make sure the footer is always at the bottom of my page (with no scroll bars) and adjust the boxes in the right column to fill the height between the header and the footer using percentages. The main reason for this is I don't want a gap at the bottom of my rightside boxes and ths page will be viewed on unusual ratio screens with varying height. I may also possible need to use borders between my boxes and the content so could you also tell me if this is a problem. Thanks guys - Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Lilliput</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="lillicss.css"
</head>
<body>
<div id="container">
<div id="menu">Menu
</div>
<div id="header">Header
</div>
<div id="wrapper">
<div id="content">Main Content
</div>
</div>
<div id="calendar">Calendar
</div>
<div id="pagetools">Page Tools
</div>
<div id="alertbox">Alertbox
</div>
<div id="footer"><p>Page Footer</p>
</div>
</div>
</body>
</html>
Code: html,body {
margin:0;
padding:0
}
body {
font: 76% arial,sans-serif
}
p {
margin:0 10px 10px
}
a {
display:block;
color: #981793;
padding:10px
}
#header {
height:20px;
margin:0;
background: #CC0000;
}
#content p {
line-height:1.4
}
#footer p {
margin:0;
padding:5px 10px
}
#wrapper {
float:left;
width:100%;
margin-left:-200px;
}
#content {
margin-left:200px;
}
#calendar {
float:right;
width:200px;
background:#000099;
}
#pagetools {
float:right;
clear:right;
background:#0000FF;
width:200px;
}
#alertbox {
float:right;
clear:right;
background:#6600FF;
width:200px;
}
#footer {
clear:both;
width:100%;
background: #336699;
color: #FFF;
margin-bottom 0px
}
#container {
width: 100%;
height: 100%;
}
#menu {
height:20px;
margin:0;
background:#CC6633;
}
I have a brand new site going, and I am having a bit of trouble with the left hand column in IE. It all looks fine as long as the content doesn't take up more space than the height of the banner (I have a skyscraper ad there, nothing else). It's also ok in Firefox, Chrome, etc. But in Internet Explorer, the left hand column refuses to stretch down to the bottom if there is a lot of content, despite being set to 100% height, and I don't know how to fix it. I'm not sure what to do about this. I'm certain the code is... unconventional. But it works, aside from IE... I'd really like to explain this better, but I can't post links to show screenshots or anything. the site is comicnex(dot)us I mean, basically, there is a header comprised of 2 boxes, a large one with the header graphic and a twitter box, and a narrow one with a navigation buttons. a narrow column to the left, the content to the right, and a footer at the bottom. The problem arises when the content box gets too full, then the side bar doesn't stretch. *edit - I just discovered another problem in IE. again, I'd show screenshots of what is going on if I could. Basically, if you make the browser narrow, the left column moves to the right, and covers up content in the content area. Again, only in IE. I don't know how to explain it better than that, you'll just have to type in the URL and see it while using IE. Please look at this layout as provided by my graphic designer: http://hometown.tmhdesign.com/default.jpg Now look at my attempt to achieve the same http://hometown.tmhdesign.com I am a bit challenged at the right column and how to lay it out. She put a fixed height gradient background in the right div and then placed yet another div on top of that one. THe issue as you can see is if the content on the left exceeds the content on the right the design breaks up (so to speak). I'm really curious to get some feedback from the experts... I have three elements in the body of my page that I need to stretch between the top menu and the footer. This page looks perfect without borders on the elements, but with borders seperating the left, center, and right columns, you can tell the length of each column. It is quite annoying. This is what I mean: Borders As Seperators I need to have some sort of seperator (I'm open minded) to extended the whole height of the content container. Any Help or References? Hello all, Perhaps it is just because I've been working all day but I cannot remember how to do this. My site is http://www.geocities.com/lokisapocalypse/debug/index.html . I almost have it set up the way I want it but how do I get the three columns to all be the same height? Okay, I have a page on which I want a banner div with a links div underneath it, a left menu bar div, and a content div. I've put them all in a container div. However, on some pages the menu bar is longer than the content and on others the content is longer than the menu bar. I want the menu bar and the content bar to always be equal heights but adjust to the length of content. Here's the gist of the code: Code:
#container {
text-align: left;
background:#000064;
margin-left: auto;
margin-right: auto;
width: 650;
height:100%;
border: 1px solid #e0e0e0;
}
#banner {
background: #fff;
width: 650;
}
#piclinks {
background: rgb(00,00,64);
padding-top: 10px;
padding-bottom: 5px;
width: 650;
}
#links {
position: absolute;
padding-left: 5px;
padding-top: 10px;
padding-bottom: 10px;
border-right: 1px dotted #fff;
width: 140px;
font-family: verdana, arial, georgia, sans-serif;
color: #fff;
font-size: 8pt;
background: rgb(00,00,64);
}
#content {
position: relative;
float: right;
width: 500;
font-family: verdana, arial, georgia, sans-serif;
font-size: 8pt;
color: #fff;
padding: 5px;
}
I've looked at a few resources, including the 'PIE' site, but haven't been able to quite figure it out. Thanks This seems like it should be very easy to do but something is preventing it from working. I was following the guide at http://www.alistapart.com/articles/negativemargins but with my navigation column on the left. A summary of my layout right now is: <div id="wrapper"> <div id="container"> <div id="content"> </div> </div> <div id="navigation" <div id="navlist"> </div> </div> <div id="clearing"> </div> </div> my css: #container { float: right; margin-left: -16.8em; width: 100%; background-color: #2586d7; } #navigation { float: left; width: 14em; background: #90bade url(navimage.jpg) repeat-y: right; } #wrapper { background: #90bade url(navimage.jpg) repeat-y: right; } #navlist is a div containing a styled ul for navigation. #clearing { clear: both; height: 0; } So basically the navigation div is supposed to extend to the bottom as far as the container div goes. According to the guide at AListApart it should be working but is something else in my code interfereing? If everything above should work fine, I can post a link to the test file so you can see the rest of the code. Thanks for any help! Having coded using tables for the past 5 years, I'm coding my first site using pure CSS (hold back the laughter) ... I'm new to change. In any case ... I'm attempting to setup a homepage that has a fixed width and height. So far I've got a one-column header working fine. Beneath the one-column header I wish to have three columns with--dare I say it Web 2.0ish rounded corner cells--However the caveat is that these three cells need to all be a fixed height to go along with the page design. After two days of research, coffee, banging my head against my desk, I haven't been able to figure this one out. I am using an image at the top of each cell and an image at the bottom of each cell, but cannot get the cells to maintain a specific height. Any help would be appreciated: CSS: Code: /*<agl.folder "general">*/
body {
color: #000;
font 76%/1.5em "Lucida Grande", Verdana, Geneva, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.footer { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
.footer a:link { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
.footer a:visited { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
.footer a:hover { color: #8da7fb; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
.user_links a:link { color: #7f7f7f; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.user_links a:visited { color: #7f7f7f; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.user_links a:hover { color: #8da7fb; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.text { color: #000; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.text a:link { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.text a:visited { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
.text a:hover { color: #8da7fb; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
a:link { color: #7f7f7f; text-decoration: none; }
a:visited { color: #7f7f7f; }
a:hover { color: #8da7fb; text-decoration: none; }
/*</agl.folder>*/
#frame {
width: 965px;
margin: 0 auto;
}
#header {
background-color: #fff;
max-width: 965px;
margin-top: 10px;
}
#content {
position: relative;
max-width: 965px;
height: 200px;
}
#footer {
background-color: #fff;
position: absolute;
top: 265px;
width: 965px;
}
/*<agl.folder "box">*/
#portfolio {
position: absolute;
left: 0px;
top: 0px;
width: 475px;
height: 200px;
}
.portbox {
background-color: #ffffff;
border: solid 1px #b6b6b6;
padding: 4px;
}
.portbox:before {
content: url(../images/homepage/portfolio.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
.portbox:after{
content: url(../images/homepage/portfolio_bottom.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
/*</agl.folder>*/
/*<agl.folder "methodologies">*/
#methodology { position: absolute; left: 482px; top: 0; width: 237px; height: 200px; }
.methbox { background-color: #ffffff; max-height: 200px; border: solid 1px #b6b6b6; padding: 4px; }
.methbox:before {
content: url(../images/homepage/methodology.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
.methbox:after{ height: 200px; content: url(../images/homepage/meth_bottom.png); display: table-row; margin: -5px; }
/*</agl.folder>*/
/*<agl.folder "design">*/
#design {
position: absolute;
left: 726px;
top: 0px;
width: 235px;
height: 125px;
}
.designbox {
background-color: #ffffff;
border: 1px solid #b6b6b6;
padding: 4px;
}
.designbox:before {
content: url(../images/homepage/design.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
.designbox:after{
content: url(../images/homepage/design_bottom.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
/*</agl.folder>*/
/*<agl.folder "solutions">*/
#solutions {
position: absolute;
left: 726px;
top: 135px;
width: 235px;
height: 125px;
}
.solutionsbox {
background-color: #ffffff;
border: 1px solid #b6b6b6;
padding: 4px;
}
.solutionsbox:before {
content: url(../images/homepage/solutions.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
.solutionsbox:after{
content: url(../images/homepage/design_bottom.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
/*</agl.folder>*/
h2 { font-size: 1.5em; font-weight: bold; }
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Test CSS</title> <link href="css/home_layout.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="frame"> <div id="header"> <p align="right"><span class="user_links"><a href="(EmptyReference!)">Login</a> | <a href="(EmptyReference!)">Register</a> | <a href="(EmptyReference!)">Contact</a></span></p> <img src="images/tabs.jpg" alt="" height="43" width="965" border="0" vspace="3" livesrc="images/tabs.psd" /><img src="images/homepage/flash_header.jpg" alt="" height="275" width="965" border="0" vspace="5"/><br /> </div> <div id="content"> <div id="portfolio"> <div class="portbox"> <p align="center"><img src="images/homepage/screenshots.jpg" usemap="#screenshotsc1fd8d76" livesrc="images/homepage/screenshots.psd" alt="" height="137" width="426" / border="0"><map name="screenshotsc1fd8d76"><area shape="rect" coords="290,9,418,129" href="http://www.pilatesmovementnyc.com" alt="Fitness Center Pilates New York City" target="_blank" /><area shape="rect" coords="146,9,281,129" href="http://www.emmestyle.com" alt="Emme Super Model" target="_blank" /><area title="Healthy Living NYC" shape="rect" coords="3,11,130,132" href="http://www.healthylivingnyc.com" alt="Healty Lliving NYC" target="_blank" /></map></p> </div> </div> <div id="methodology"> <div class="methbox"> <p><img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step is</span><br /> <img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step is</span><br /> <img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step i</span>s<br /> <img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step is</span></p> </div> </div> <div id="design"> <div class="designbox"> <p></p> </div> </div> <div id="solutions"> <div class="solutionsbox"> <p></p> </div> </div> <div id="footer"> <div class="footer"> <a href="(EmptyReference!)">Home</a> | <a href="(EmptyReference!)">Portfolio</a> | <a href="(EmptyReference!)">Web</a> | <a href="(EmptyReference!)">Marketing</a> | <a href="(EmptyReference!)">Advertising</a> | <a href="(EmptyReference!)">Identity</a> | <a href="(EmptyReference!)">Hosting</a> | <a href="(EmptyReference!)">Profile</a><br> <a href="(EmptyReference!)">Design</a> | <a href="(EmptyReference!)">Technology</a> | <a href="(EmptyReference!)">Business Solutions</a><br> <a href="(EmptyReference!)">Contact Us</a> | L<a href="(EmptyReference!)">ogin to Your Account</a><br> Copyright 2007 Website Development Enterprises, LLc </div> </div> </div> </div> </body> </html> I saw an idea that I liked a whole lot for displaying pictures and that kind of thing. I didn't want to really hank the guys code, but tried to make my own version of it. The problem I have is yet again with Internet Explorer doing really stupid things with the pics I drop in my div's. It keeps adding a padding to it and it's beginning to aggravate me. Here is the code I had: body { height: 100%; margin: 0; padding: 0; background: #4F6A84; text-align: center; } #super_container { position: absolute; top: 70px; left: 0; width: 100%; height: 438px; background: #424242; padding: 0; margin: 0 auto; text-align: center; } #super_container { height: 438px; } #sub_container { width:775px; voice-family: "\"}\""; voice-family: inherit; width: 765px; /*border-right: 1px solid #7D1E2C; border-left: 1px solid #7D1E2C;*/ height: 438px; background: transparent; margin: 0 auto; } #sub_container { width: 765px;} #right{ float: right; width: 150px; height: 438px; background: #c5c5c5; } #left { float: left; width: 400px; height: 438px; margin: 0px; padding: 0px; background: blue; overflow:visisble; background-image:url(new_test/test1.jpg); background-repeat:no-repeat; background-position:top left; } #left img { padding: 0px; margin: 0px; border: 5px solid #fff;} #center { margin-left: 401px; margin-right:151px; padding:0px 0px 0px 0px; border-top:1px solid green; } and the html <body> <div id="super_container"><!--start of super container--> <div id="sub_container"><!--start sub_container--> <div id="right"> </div> <div id="left"> </div> <div id="center"> test </div> </div><!--end sub_container--> </div><!---end of super conatiner--> </body> the problem becomes evident when I put an image in the htnl of the left element. It either looks likeit rises just above the top of the super-container, or it is flush with the top and leaves a margin underneath it. As always, any help or design/tips as to what I am doing wrong would be great. I am just experimenting with new things, trying to see what I can or cannot do. The idea would be to have a home page with picture and right column with info. Then on the sub-pages have nav and subnav on the middle and right columns and pics on the left. Just a dry run, trying to see where i am. Thanks for the help in advance! jon I seem to be having a bit of a problem with a layout I am attempting...here is the problem... First of all, this is a 4 column layout with an absolutely positioned header. The 4 columns use floats for positioning as I am trying to keep a natural code flow. The 4 columns are intended to expand and contract with the page's width, and the heights should be 100%. The content of the page flows below the fold of the page on nearly every page. My problem is with the 100% height. In Firefox the footer that I am using to clear the floats is not clearing them, but rather resting below the floats. Does anyone have a good reference for using floats with 100% height that flow below the fold of the page? If someone wants to take a look at an example, you should message me as I can't post the development site publicly. Hi I need these 3 columns http://dmumford.bizhat.com/equalheights.htm to be of equal height regardless of what column has the most text in. Could somone please help me with this, I have looked at Paul OB's 2 col example but I am at a puzzle how to do it with my requirements!! Your help is much appreciated! Hi Folks, Newbie here, first post. I need to figure out a way for the left border on the right column, its a DIV floated to the right (contains an image of a brain which has a certain irony!) to expand all the way down the page when you set the text to "largest" with your browser. Example: http://www.cre8webdesign.co.uk/services.html Can anyone help? Thanks Darren. Hi, I have a border around the content of my page which is limited in width but not height. Some of the pages have more content then others so the height adjusts. I also have a left column and a black background with and image in this column but I have 2 problems 1. In IE I can't seem to get this black column(div) to extend to the full height of the column so that it reaches the border. 2. In Firefox this left column extends all the way down the page and the border doesn't surround the text it sort of collapses The column is left floated and in a div and the content is right floated and in a div as well which is all surrounded by a div with a border. I would appreciate any help that you might offer. Thanks Hi, noob here, I am making a site that will have a GUI skin. Greetings header, one column content body, navigation footer. My layout idea is fairly basic. Fixed width-fluid height. One column with a <div> block element with "overflow: auto" so my lengthy text content can be scrolled within the skin. What I need to figure out is how to allow the skin's graphics, with its block element body to vertically expand or contract, depending upon the user's resolution. I have considered using % values, but I don't know how to apply them to the skin's graphics properly. jbonham say you have a page with 2 main columns inside a container. the right column is a sidebar. both are supplied content dynamically. i'd like the container (inclusive) to be the height of the content column (as determined by its children), and the sidebar should scroll (vertically) its content based on that size. there's a (non-functional) example attached. if you run it you can see the container takes the height of the sidebar - it (the bordered container) should end at the bottom of the content div, and the sidebar should scroll. it's laid out using floating divs, but tables would be fine; javascript is not (per client). any ideas would be welcome. tyia. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.container {
border : 1px solid #F90; /* just to show container height */
}
.content {
float : left;
width : 400px;
height : 100%;
}
.sidebar {
float : left;
width : 400px;
height : 100%;
}
.scroller {
overflow : scroll;
height : 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
</div>
<div class="sidebar">
<div>Sidebar</div>
<div class="scroller">
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
</div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
I need a combination of this: http://bonrouge.com/3c-hf-fixed.php and this: http://bonrouge.com/3c-hf-fluid.php I need the middle column to be a fixed width and the outer two to be fluid. I also need to maintain the 100% with header and footer at top and bottom respectively. Any ideas how to do this? Thanks. |
|||||||