|
CSS - Interesting Column Height Issue
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. Similar TutorialsHowdy. Disclaimer: I've been working on a redesign of my homepage, and I decided to go 100% CSS. I'm still learning CSS, so if this has a braindead easy solution, just laugh and point it out to me. The problem: Here is the design I have for my website (forgive the ascii art): Code: +------------------------------------------------------+ | Header | +--------------+---------------------------------------+ | Stuff Bar | Content : :Google | | | : : Ad | | Navigation | : : | | | : : | | Firefox | : : | | Info Box | : +.......| | | : | | Affiliates | : | | | : | +--------------+---------------------------------------+ | Footer | +------------------------------------------------------+ The Content has been artificially "width"ed to be no more than 400px wide. The Google Ad should float all the way to the right on a separate layer to keep out of the way on large monitors. Now, what I want to do is also float every IMAGE from the content all the way to the right on large monitors: Code: +------------------------------------------------------+ | Header | +--------------+---------------------------------------+ | Stuff Bar | Content : :Google | | | : : Ad | | Navigation | : : | | | : : | | Firefox | : : | | Info Box | : +.......| | | : | | Affiliates | : | | | : ------------------------ | | | : +---------------------+ | | | : | IMAGE from Content | | | | : +---------------------+ | | | : ------------------------ | | | : | | | : | +--------------+---------------------------------------+ | Footer | +------------------------------------------------------+ I havn't a clue how to do that correctly. I want the Content to wrap around the image callout. I'd appreciate the pointer. Hello 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; } Hi all, I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise. This is an abridged version of the site's code for example: Code: <style type="text/css">
<!--
#main1 {
padding: 0px;
margin: 0px;
}
#left {
width:260px;
margin:0;
padding:0;
float: left;
}
#left-top {
background-image: url(../images/panel-top-left.gif);
background-repeat: no-repeat;
background-position: center top;
height: 16px;
margin: 0px;
padding: 0px;
}
#left-middle {
background-image: url(../images/panel-middle-left.gif);
background-repeat: repeat-y;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 2px;
}
#left-bottom {
background-image: url(../images/panel-bottom-left.gif);
background-position: center;
height: 18px;
}
#logo {
background-image: url(../images/swalingslogo.gif);
background-position: center top;
width: 260px;
height: 120px;
background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
padding-left: 0;
margin-bottom:10px;
width: 217px;
}
#navlist li
{
list-style: none;
margin-bottom:4px;
padding: 0;
font-size:1.2em;
line-height:1.8em;
width:217px;
height:32px;
background-image:url(../images/nav2.gif);
background-repeat:no-repeat;
margin-top: 0;
margin-right: 0;
margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
display:block;
text-decoration: none;
color:#039;
width:207px;
height:32px;
font-weight:bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
#navlist li a:hover {
text-decoration: none;
color:#FF6600;
}
/* Testimonials */
div#fscroller {
width:200px;
height:200px;
background-image:url(../images/bg-testimonials.gif);
background-repeat:no-repeat;
margin-left:8px;
}
div#fscroller p {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
/* Middle Column */
#middle {
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
text-align: justify;
margin-left: 260px;
}
#middle #top-left {
background-image: url(../images/panel-top-rightleft.gif);
height: 16px;
font-size: 2px;
background-repeat: no-repeat;
}
#middle #top-right {
float: right;
margin-top: -16px;
background-image: url(../images/panel-top-rightright.gif);
height: 16px;
width: 20px;
font-size: 2px;
}
#middle a {
color: #003399;
}
#middle a:hover {
text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
background-image: url(../images/title-unitedkingdom.gif);
background-repeat: no-repeat;
height: 26px;
width: 201px;
margin-bottom: 6px;
}
#middle h2#antigua {
background-image: url(../images/title-antigua.gif);
background-repeat: no-repeat;
height: 26px;
width: 128px;
margin-top: 16px;
margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
float: left;
}
div.minisite span {
display: none;
}
div.minisite a {
background-position: top;
background-repeat: no-repeat;
height: 168px;
width: 190px;
display: block;
}
div.minisite a:hover {
background-position: bottom;
}
a#minisite-swimminglessons {
background-image: url(../images/swimming-lessons-uk.jpg);
}
.clear {
clear:both;
}
.hidden {
display: none;
}
.notopgap {
margin-top: 0;
}
.nobottomgap {
margin-bottom: 0;
}
.inside {
background: #EFEFEF;
padding-left: 10px;
padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
<div id="left-top"></div>
<div id="left-middle">
<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->
<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>
<div class="clear"></div>
<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="clear"></div>
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
</div>
<!-- End Middle Column -->
</div>
I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links. This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this. I can't add in links properly, so I hope this is acceptable under the rules -- The site in question is: www.swalings .com/swalings/index4.asp and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg Hopefully that's enough information to go on, please let me know if there's something I missed out. Thanks a lot! Rob 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 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 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;
}
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! 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 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. 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? 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? 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 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. 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 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! 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! 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 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 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 |
|||||||