|
CSS - How To Make Div Colums To Liquid Height
I'm not so CSS savvy, can anyone help me with the specific changes needed here that will force the 3 columns to load height at 100% or full column height?
Also is it possible to have multiple content boxes loading one above the other in the left and right columns instead of one long content box? jarsandmixes.com/liquid.php body { background-color: #FFF7EF; } div { text-align:center; } div#wrapper { background-color: transparent; border:0px solid black; margin:0px auto; text-align:left; position:relative; width:100%; height:100%; min-height:100%; } div#border { background-image: url(images/bkg2.gif); background-repeat: repeat; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; width:100%; height:10px; } div#page { background-color: #DEC6B5; border:1px dashed black; position:relative; clear:both; float:left; width:100%; height:100%; min-height:100%; padding-bottom: 10px; overflow:hidden; } div#header { background-image: url(images/.gif); background-repeat: no-repeat; border:1px dashed black; margin:0px; padding:0px; width:100%; height:80px; } div#menu { clear: both; background-color: #CA7B93; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; width:100%; height:30px; } div#left1 { background-image: url(images/bkg2.gif); background-repeat: repeat; border:1px solid black; float:left; margin:5px; width:20%; height:auto; } div#left2 { background-color: #FFF7EF; background-image: url(images/bkg3.gif); background-repeat: repeat; border:1px solid black; margin:0px 5px 0px 5px; padding:4px; right:20px; width:90%; height:auto; } div#content1 { background-image: url(images/bkg2.gif); background-repeat: repeat; border:1px solid black; margin:5px auto; width:54%; height:auto; } div#content2 { background-color: #DEC6B5; background-image: url(images/bkg3.gif); border:1px solid black; margin:0px 5px 0px 5px; padding:4px; width:96%; height:auto; } div#divider { background-image: url(images/.gif); background-repeat: no-repeat; margin:10px auto; width:439px; height:60px } div#right1 { background-image: url(images/bkg2.gif); background-repeat: repeat; float:right; border:1px solid black; margin:5px; right:10px; width:20%; height:auto; } div#right2 { background-color: #FFF7EF; background-image: url(images/bkg3.gif); background-repeat: repeat; border:1px solid black; margin:0px 5px 0px 5px; padding:4px; right:20px; width:90%; height:auto; } div#footer { clear: both; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; width:100%; height:30px; } Similar TutorialsHi, Basically, this is one of my site pages: http://www.zombiemod.com/rm/nina2/about.html I want the white box in the middle to auto expand its height so it fills the vertical height of the page. Ive tried setting its height to 100% but that doesnt seem to work. This is my CSS for the white space: Code: #frame {
position: relative;
padding: 2px 15px 20px;
/* background-color: #000;*/
color: #000000;
height: 410px;
}
Can anyone help me with this? Im not great with this stuff, so I just want the easiest way possible, whether it is javascript or css. Hey guys, how are you? So, I got two questions. Right now, on my main pages I have a fixed height, and wondering the best way to change it to a liquid one, so no matter how long the page is, I get a white background that's consistent with my 'main' <div>. And the second one, is how do I get a second background image on the body? I'm probably going to use almost almost a mirror type gradient of the top gradient, but not sure how to add it. You can view the two problems here http://thecheckoutplace.com/ home page). Thanks for your time, cheers. So... I've got a page I'm working on where I can't seem to get to floats to clear without compromising the layout of the divs that are floating. http://www1.romenews-tribune.com/multimedia2/ http://www1.romenews-tribune.com/multimedia2/style.css If I try the clear:after class fix, it doesn't work. If I try the overflow: hidden fix, it looks fine until the page is resized - and the overflowing content is hidden. What I want is for the right and left div is to stretch to the bottom of the page regardless of the page height, and clear to the div they are floating in. Any suggestions? Let me know if I need to provide better examples or more info, as I'm stumped on this one and feel like I've been doing this for far too long. I like the way this liquid banner degrades as the browser is narrowed. Is this the preferred way to accomplish this effect? I like the way the overflow: hidden attribute causes objects to basically disappear rather than force the banner div to be taller as content shifts. If you could please pick this apart I would appreciate it before I update 500 product pages with it. For testing purposes I have simply styled the html tags directly. When I get it right I'll make it external. Code: <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"></meta> </meta> </head> <body bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" style="overflow: auto"> <div style="border: 1px solid gray; text-align: center; height: 72px; background: white url(site_images/share_logo_header_middle.gif) repeat-x; overflow: hidden"> <div style="float: left; margin-top: 0px"><img src="site_images/share_logo_header_left.gif" alt=""></img></div> <div style="float: right; margin-top: 0px"><img src="site_images/share_logo_header_right.gif" alt=""></img></div><h1 style = "font: 1em/1.2 Verdana, Arial, Helvetica, sans-serif; color: navy; font-size: 1em; margin-top: 0px; line-height: 40px">The finest Specialty Chemical Products Since 1971</h1> </div> <div>Content is king </div> </body> </html> See the page here. As I'm writing this thread I see that I need to clean up a few unneeded declarations in the css - please disregard. Thanks for looking, Rob Hi Guys, I have a layout which is currently setup to be liquid. Aka it spreads out depending on how big the browser window is. I'm trying to get it to be a set width. I can't quite get it figured out. Here is the link to the current layout (made to be generic). It's a layout I got from a CCS class. http://65.175.116.253/design/demo.html The css is here http://65.175.116.253/design/css.css The entire package can be downloaded here http://65.175.116.253/design/design.rar Now, to explain how I want it to look, I took my browser and made it just wide enough to show how wide I want the layout to be, and took a screenshot. But I can't get my css to make the whole layout that wide.. I'm scracthing my head here because it's probably really easy. http://65.175.116.253/design/demo.jpg Let's not worry about the exact width, but I want to define in the css the pixel width, so that can be changed whenever. Here is the CSS Code: /*--- Generic Styles ---*/
body
{
background: #e3edc2; color: #333;
font: .8em, Arial, verdana, sans-serif;
margin: 0;
padding:0px;
}
#main {width:840px; margin:18px auto 0 auto; _text-align:left;}
a
{
color: #686397;
}
a img
{
border: 0px none;
}
p
{
margin: 0 0 1em;
}
.smallboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .7em;
font-weight: bold;
}
.mediumtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
}
.mediumboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
font-weight: bold;
}
.largetext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: 1.5em;
}
/*--- Header Styles ---*/
#header
{
margin-bottom: 1.75em;
padding-top: 1px;
background: #abd240;
}
#navbar
{
margin: 0;
padding: 0.5em 3em;
background: #686397;
color: #fff;
}
#navbar li
{
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
border-right: 1px solid #99c;
font-weight: bold;
}
#navbar li.last
{
border: 0px none;
}
#navbar a
{
color: #d4ec84;
text-decoration: none;
}
#today
{
text-align: right;
margin-top: -1.66em; padding: 0 2em 0 0;
color: #fff;
line-height: 1;
}
/*--- Content Styles ---*/
#content
{
float: left;
padding: 0 20em 4em 3em;
}
#content h1
{
background: #fff; color: #686397;
font-size: 1.5em;
margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
}
#content h1 b
{
color: #b0d742;
}
#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #b0d742;
font-size: 1.5em;
}
/*--- Content Styles ---*/
table.basic
{
border: 0px;
width: 100%;
border-collapse: collapse;
}
table.basicborder
{
border: 2px solid #b0d742;
width: 505px;
border-collapse: collapse;
}
table.mainsearch
{
border: 2px solid #b0d742;
width: 415px;
border-collapse: collapse;
}
/*--- Sidebar Styles ---*/
#sidebar
{
float: right;
width: 17em;
margin: 0 1em 4em -18em; /* this creates a mathematical layout width of -1 */
}
#sidebar div h3{
background: #9b96ca;
}
#sidebar form_div
{
margin: 0; padding: 0.8em;
}
#sidebar div{
background: #3a3c2d; color: #fff;
padding: 0 1em 1em;
margin-top: 0.75em;
}
#sidebar div h3{
font-size: 1.25em;
margin: 0 -0.8em; padding: 0.4em 0.8em;
text-transform: lowercase;
}
#whatiscompany h4{
margin: 0 0 0.5em; padding: 0.5em 0;
border-bottom: 1px solid #fff;
font-weight: normal;
}
#whatiscompany p:first-line{
font-style: italic;
}
/*--- Footer Styles ---*/
#footer
{
clear: both;
padding: 1.5em 3em;
background: #a0c63a;
height: 15px;
}
#footer p
{
margin: .1em;
}
#footer a
{
color: #333;
text-decoration: underline;
}
http://www.webpagedesignrus.co.uk/DECS Code: #container {
margin: auto;
width: 100%;
display: block;
text-align: center;
height: 100%;
}
#middle {
text-align: left;
margin: auto;
width: 600px;
height: 100%;
background-color: #FFF;
}
#main {
margin: auto;
background-color: #FFF;
border-left: solid black 1px;
border-right: solid black 1px;
width: 650px;
height: 100%;
cell-padding: 0px;
cell-spacing: 0px:
}
I can't get the white part to be 100% height... I need it to go to the bottom of the page... Please help... If you take a look here http://www.challengeyourdiet.com/login you may notice that the page does not go all the way down on big screens. I would like my footer to automatically fall to the bottom of the page no matter what screen size someone has. Any ideas? Thanks! How do I get the 'results' div to be 100% in height ? The page height changes depending on the page being shown so need to have the height of the div to be 100%, but using 100% for the div does not make it 100% ! Any ideas how I do this ? 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" xml:lang="en" lang="en">
<head>
<title>..</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="en" />
<meta name="rating" content="General" />
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="2 days" />
<meta http-equiv="expires" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-language" content="en" />
<style type="text/css">
/* div { border: 1px solid blue; } */
body { border: 0px solid #A52A2A; background-color: #F2F2F2; } /* brown */
.outerBody { width: 1150px; margin: 0 auto; }
.bodyContainer { float: left; width: 1150px; padding: 1px 0 5px 0; border: 0px solid #A52A2A; }
.menu { float: left; width: 100%; text-align: center; font-size: 15pt; font-family: Broadway; border: 0px solid #EDB6B6; }
.widthLimiter{ width: 100%; margin: 0 auto; }
.menuwidthLimiter{ width: 100%; margin: auto; text-align: center; } /* width: 1200px; */
ul{ list-style: none; padding: 0px; margin: 0px; }
ul#navbar{ width:auto; list-style: none; padding: 0px; margin: 0px auto; height: auto; overflow: hidden; background-color: #F2F2F2; /* white */ display: table; }
ul#navbar li, ul#navbar1 li{ float:left!important; display:inline!important; margin: 0px; }
ul#navbar li a { display:block; float:left;}
a:link,a:visited,a:active{ color: #757575; font-weight: bold; text-decoration: none; }
a:hover{ color: #222; text-decoration: underline; }
#navbar a:link,#navbar a:active,#navbar a:visited{ display:inline-block; color: #757575; text-decoration: none; border-left: 1px solid #DDD; border-right: 1px solid #DDD; padding: 8px 3px 8px 3px; /* padding: 10px 20px 10px 20px; */ margin: 0px 4px 0px 4px; /* margin: 0px 5px 0px 5px; */ }
#navbar a:hover{ background: url('images/headerBarBgHover.png') repeat-x center #999999; display:inline-block; color: #222; text-decoration: underline; padding: 8px 3px 8px 3px; /* padding: 10px 20px 10px 20px; */ }
.leftSideImagePanel { float: left; width: 30px; height: 100%; overflow: hidden; padding: 0px 5px 0 5px; background-color: #F2F2F2; border: 0px solid #999999; }
.specials { float: left; width: 180px; height: 100%; overflow: hidden; margin: 15px 5px 0 5px; padding: 5px; border: 0px solid #999999; background-color: #DADADA; border-radius:18px; } /* light grey */
form{ padding: 0px; margin: 0 auto; }
.outerbodycontainer { float: left; width: 870px; height: 100%; border: 0px solid green; }
.innerbodycontainer { float: left; width: 870px; height: 100%; border-bottom: 0px solid #EDB6B6; }
.searchCategoryBox { border-right: 1px solid #EDB6B6; float: left; width: 130px; height: 100%; padding: 3px 3px 10px 10px; font-size: 9pt; }
.results { border: 1px solid #E5E5E5; float: left; width: 713px; height: 100%; padding: 4px 4px 4px 6px; font-size: 9pt; }
hr.smallDivider { color: #EDB6B6; height: 1px; } /* brown = #A52A2A */
.catListLineHeight { line-height: 12px; }
a.cat { text-decoration: none; }
a.cat:link { color: #333333; } /* grey */
a.cat:visited { color: #333333; } /* grey */
a.cat:hover { color: black; }
a.activeCat:link { color: blue; text-decoration: none; }
.clearfloat { clear: both; }
.indent { padding-left: 40px; }
.center { text-align: center; }
.centerTitles { text-align: center; font-weight: bold; font-size: 12pt; }
</style>
</head>
<body>
<div class="outerBody">
<!-- bodyContainer start -->
<div class="bodyContainer">
<img alt="logo" src="images/header-trans.png" height="79" width="1150" />
<!-- menu start -->
<div class="menu">
<div class="menuwidthLimiter">
<ul id="navbar">
<li> <a href="index.php">Home</a> </li>
<li> <a href="cart.php">Our catalogue</a> </li>
<li> <a href="cart.php?mycart=yes">View your cart</a> </li>
<li> <a href="map.php">Store locations</a> </li>
<li> <a href="contactus.php">Contact us</a> </li>
<li> <a href="aboutus.php">About us</a> </li>
</ul>
</div>
</div>
<!-- menu end -->
<div class="leftSideImagePanel">
<div style="width: 130px;"> </div></div>
<div class="outerbodycontainer">
<!-- innerbodycontainer start -->
<div class="innerbodycontainer">
<!-- search start -->
<div class="searchCategoryBox">
<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
</div>
<!-- search end -->
<!-- results start -->
<div class="results">
<br />
<br />text text tetext text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br />text text tetext text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br />text text tetext text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br />text text tetext text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br />
<br />wanting the 'results' div to be 100% in height.
</div>
<!-- results end -->
<div style="text-align: center; font-weight: bold; font-size: 10pt; font-style: italic;"><br />Prices correct at time of upload. Products, descriptions and prices subject to alteration and/or removal.</div>
</div>
<!-- innerbodycontainer end -->
<br class="clearfloat" />
</div>
<div class="rightSideImagePanel">
<!-- start of specials -->
<div class="specials">specials</div>
<!-- end of specials -->
</div>
</div>
<!-- body container end -->
</div><!-- end of outerBody -->
</body>
</html>
i have 2 divs one is a navigation bar, the other is the pages main contents. the contents and navigation links changes from page to page so i need a method so if the content is long, the navigation will stretch down long too to be the same height of the content, and the same thing vice versa. how do i go about doing this? I'm having trouble getting the height to be the same for two divs. One is a big content area (left) and the other is a vertical menu (right) that is created dynamically with PHP. I need the bottom of both divs to line up UNLESS there is a lot of content in the left div that makes the left side taller. (So, if there's not much text in the left content area, it should go ahead and line up with the bottom of the menu.) Is this possible? I'm stumped. Any help would be greatly appreciated! Thank you. Code: #content {width: 750px;height: 100%;position: relative;margin: 10px 25px 0 25px;}
/*BEGIN LOCATION PAGES MINIMUM HEIGHT STYLES*/
/* for Mozilla/Safari/Opera */
*>.boxContent {padding-top: 900px;min-height: 1px;}
*>#locDoctors, .locInfoMap {margin-top: -900px;}
/* for IE, with IE5/Mac backslash filter \*/
* html .boxContent {height: 900px;}
/* end filter */
/*END LOCATION PAGES MINIMUM HEIGHT STYLES*/
/*BEGIN LOCATION BOX*/
#locationBox {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 614px;height:810px;position: relative;background-position: bottom;background-color: #DDF0F2;}
#locationBox .boxTop {background-image: url(../images/location/pgTopLocation.gif);background-repeat: no-repeat;width: 100%;height: 20px;}
#locationBox .locInfoMap {width: 100%;height: 408px;background-image: url(../images/location/mapLarge.gif);background-repeat: no-repeat;background-position: top right;}
#locationBox .boxBot {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 100%;height: 15px;}
/*END LOCATION BOX*/
/*LOCATION MENU START*/
#locationMenu {width: 136px;position: absolute;z-index: 10;right: 0px;}
#locMenuList {margin: 0;padding: 0;font-size: 9px;list-style: none;}
#locMenuList li {margin: 0;padding: 0;display: inline;}
#locMenuList li.main {height: 30px;height /**/: 30px;/* for IE5/Win only */ }
#locMenuList li.sub {height: 20px;height /**/: 20px;/* for IE5/Win only */ }
#locMenuList li a {text-decoration: none;color: #FFFFFF;}
#locMenuList li.locHead {display: block;margin: 0;padding: 10px 9px 9px;font-weight: 900;color: #FFFFFF;}
...
/*LOCATION MENU END*/
Code: <div id="content"><!--CONTENT SECTION START-->
PHP MENU IS CREATED HERE...
<div id="locationBox"><!--OPEN BOX-->
<div class="boxTop"></div>
<div class="boxContent">
<div class="locInfoMap">
MAIN CONTENT GOES HERE...
</div>
</div>
</div><!--CLOSE BOX-->
</div><!--CONTENT SECTION END-->
Hello, I've created a wrapper div for my main content and I center it on the page by setting margin left and right to auto. I add some content to it but the height of the wrapper never grows larger than the content. How can I make it so the background color of the wrapper, for example, goes to the bottom of the browser regardless of the amount of content inside of it? Thanks in advance. I have stripped the whole page down to the bare bones and can not seem to get the center DIV to be the same height as the rest of the page. Is there a simple fix for this or would I need to redo it completely ? The left and right content is not always the same so their height is also variable. I have a min-height in the center DIV, and using height 100% does not seem to work either. Can anyone suggest what I could change to make it the same or suggest how I redo this so it is. Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to our web site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
body { border: 0em solid #000; background-color: #ddd; }
.bodyContainer { background-color: blue; height: 100%; width: 71.875em; margin: 0em auto; padding: 0em 0em 0em 0em; border: 0em solid #000; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.menu { background: #3F65CC; margin: 0em; text-align: center; font-size: 1.1em; font-family: Broadway; border: 0em solid #EDB6B6; padding: 0.313em 0em 0.313em 0em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.clearfloat { clear: both; }
.leftSidePanel { background-color: blue; float: left; width: 8.835em; min-height: 43.75em; padding: 0.313em 0.625em 0em 0.625em; }
.mainContent { background-color: lightblue; margin: 0em auto; text-align: center; border-left: 0.5em solid #ddd; border-top: 0.3em solid #ddd; border-right: 0.5em solid #ddd; float: left; width: 49.4em; min-height: 43.438em; height: 100%; padding: 0.625em 0.625em 0.625em 0.625em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.formWrapper{ margin: 0em auto; min-height: 43.375em; border: 0em dashed #E5E5E5; padding: 0em; text-align: left; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
.rightSidePanel { background-color: blue; float: right; width: 8.835em; min-height: 43.75em; padding: 0.313em 0.713em 0em 0.313em; }
.footer { background-color: #ddd; margin: 0 auto; text-align: center; padding: 1em 0em 0em 0em; border: 0em solid #fff; font-size: 0.875em; }
--></style>
</head>
<body>
<!-- bodyContainer start -->
<div class="bodyContainer">
<!-- menu start -->
<div class="menu">
<div class="clearfloat"></div>
</div>
<div class="clearfloat"></div>
<!-- menu end -->
<div class="leftSidePanel">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<!-- mainContent start -->
<div class="mainContent">
<div class="formWrapper">
<br><br><br>
</div>
</div>
<!-- mainContent end -->
<div class="rightSidePanel">
</div>
<!-- Footer start -->
<br class="clearfloat">
<div class="footer">
some text
</div>
</div>
<!-- body container end -->
</body>
</html>
The situation is very simple: Code: <div id="maindiv" style="border:1px solid #000000; width:400px; margin:0px; padding:0px;">
<div id="reddiv" style="border:1px solid #FF0000; width:150px; float:left;">
red box<br>
red box<br>
red box<br>
red box<br>
red box<br>
red box<br>
</div>
<div id="greendiv" style="border:1px solid #00FF00; margin-left:170px; width:100px;">
green box<br>
green box<br>
green box<br>
green box<br>
</div>
</div>
AS you can see, I have a main div. Inside it, I have 2 divs: red and green. If I enter text into the green div, the main div resizes automatically. But if I enter text into the red div, the main div doesn't resize, and so the red div overflows. What I need is either enter text in the red or green divs and make the main div to auto resize. (I'm using Mozilla FireFox) Any Idea? How do you make a container div aware of the height of floated divs nested inside? I have 2 floated divs, which are contained within a container div. The container has a background image that I need to tile vertically. In FF the image does not tile unless I specifiy a height for the container other than auto. I don't want to set it to 100% because when I do, the container div extends much further than I intend it to. Here is the link to the site with the problem. CSS Code:
/* CSS DOCUMENT */
html, body {
padding: 0px 0px 0px 0px;
font: 10px Verdana, Arial, Halvetica;
height: 100%;
text-align: center;
background: url(../images/bdy_back.jpg) #252525 no-repeat center;
#container {
width: 938px;
margin: 0 auto;
text-align: left;
height: auto;
opacity: .90;
filter: alpha(opacity=90);
background: url(../images/middle2.jpg) repeat-y right #444444;
}
#lcol{
float: left;
width: 15%;
height: auto;
}
#right {
float: right;
width: 85%;
height: 100%;
}
}
HTML Code:
<div id="container">
<div class="hdr">
<div id="officer" style="display: none;"></div>
</div>
<div id="lcol">
</div>
<div id="right">
</div>
</div>
<div id="footer">
</div>
I deleted the other posting as it take too long to work on it and it doesn't work. So, I got the other code from google search and decided to use it. There, I rearrange, redo, customzie the scripts to make it work better. Now I have one problem. See the class "wrapper" that make use of the height. I when I have it set at 100%, the footer extend too far down and the vertical scroll bar appear at the right. This is not what I want. I figure maybe it's because of the float that the browser doesn't know the real height of the header and footer. Can anyone help? I would really apppreciated it. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: #FFFF00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
html {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
width: 100%;
}
table {
border: 0px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
#columnleft {
margin: 0px;
padding: 0px;
width: 10%;
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #0000FF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: absolute; */
float: left;
}
#columnright {
margin: 0px;
padding: 0px;
width: 10%;
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #0000FF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: absolute; */
float: right;
}
#footer {
margin: 0px;
padding: 0px;
width: 100%;
height: 65px;
background-color: #FFCC00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
}
#clearfooter {
clear: both;
}
#header {
margin: 0px;
padding: 0px;
width: 100%;
height: 65px;
background-color: #FFCC00;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position:relative; */
}
#main {
margin: 0px;
padding: 0px;
width: 79.8%; /* #columnleft + #main + #columnright = 100% width, but take away 0.02% for the #main due to for some browser's inaccurate mathetical rendering, such as 100.1% or 100.2% which cause the Right Column to jump to the bottom, so 99.8 % total width is better as it make the browser's glitch not be that noticeable. Just add some background color to the #wrapper so that the color can match either the #main or #columnright */
height: 100%; /* Required by IE to inherit from wrapper (IE Hack) above */
background-color: #FFFFFF;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
float: left;
}
#wrapper {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
/* min-height: 80%; */ /* Might not be needed, it's an IE Hack... */
background-color: #FF0000;
border-top: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-right: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-left: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
border-bottom: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
/* position: relative; */
}
/* IE Hack - Layout REQUIRES a height here to work */
/*
* html #wrapper {height: 100%;}
*/
</style>
</head>
<body>
<div id="header">Header Text</div>
<div id="wrapper">
<div id="columnleft">Left Text</div>
<div id="main">Center Content</div>
<div id="columnright">Right Text</div>
</div>
<div id="clearfooter"></div>
<div id="footer">Footer Text</div>
</body>
</html>
Thanks, FletchSOD I tried to use height:auto, and put it into the main container, then I put it in the div that is floated. Nothing works in firefox for me. Ive tried searching on google but I cant find anything that works. Basically, its not just an issue with floats, in general, what is the correct way to set divs, to auto expand to cover what is inside and that works in IE, Firefox and safari, is there a way to ? Thanks in advanced. how can i use: css Code: Original - css Code .t {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:80%; left:50%; margin:20px; } .b {background: url(../images/dot.gif) 0 100% repeat-x} .l {background: url(../images/dot.gif) 0 0 repeat-y} .r {background: url(../images/dot.gif) 100% 0 repeat-y} .bl {background: url(../images/bl.gif) 0 100% no-repeat} .br {background: url(../images/br.gif) 100% 100% no-repeat} .tl {background: url(../images/tl.gif) 0 0 no-repeat} .tr {background: url(../images/tr.gif) 100% 0 no-repeat; padding:5px; } .t-exif {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:200px; right:0px;} .b-exif {background: url(../images/dot.gif) 0 100% repeat-x} .l-exif {background: url(../images/dot.gif) 0 0 repeat-y} .r-exif {background: url(../images/dot.gif) 100% 0 repeat-y} .bl-exif {background: url(../images/bl.gif) 0 100% no-repeat} .br-exif {background: url(../images/br.gif) 100% 100% no-repeat} .tl-exif {background: url(../images/tl.gif) 0 0 no-repeat} .tr-exif {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px; }
.t {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:80%; left:50%; margin:20px; }
to make my exif info box appear on the right of the image? i have tried using right:0px but it doesn't work, any ideas? current display page I have the terrible feeling that I will not be able to explain this properly but I will try my best. It's simple enough to make a layout with colloms using css, just by floating two or three divs, but what if I wanted to make multiple collums out of one bit of text? Kind of like when your writing in a word processer that you've set to use two colums, when your writing fills up the first it just goes strait into the second. Hello everyone, I have a web application wich i would really like to convert to css style. I have been struggling with this for almost 2 days now and i am getting nowhere... I did manage to make a few 'usable' css based on various template/book but they are either corrupted in mozilla or ie... and thus not usable in a production environment. Basicly here what i need: 1. header div located at the top of the page 2. menu div located just bellow the header div (25height) 3. left div located bellow the header/menu div (160width) 4. content div located at the right of the left div (max available width) 5. footer div located at the bottom of the page. (height 25) 6. A vertical scrollbar allowing the user to scroll the page. if possible, this scrollbar should be located between the header and footer only (that mean it will allow the user the scroll the left/content while the header/footer stay in the window), kinda like a traditional frame'd layout. My site is dynamic and the content located at the left (the left div) can be completly disabled by the user. So if the left div is missing, the content div should automaticly adjust is width. I dont want any vertical scrollbar on that site, it should auto-adjust itself. I hope i have been clear. In case i have not, here is a screenshoot of a layout that is similar to the one i would like to have. Example of what i want ! What i need is an experienced web dev who can do this for me. Since i know nothing in life if free i will reward this person with ANY book he want, with a maximum of 5. Here a few examples of what i can provide: Cascading Style Sheets: The Definitive Guide 2nd edition http://www.oreilly.com/catalog/css2/ HTML & XHTML: The Definitive Guide, 5th Edition http://www.oreilly.com/catalog/html5/ JavaScript & DHTML Cookbook http://www.oreilly.com/catalog/jvdhtmlckbk/ CSS Cookbook http://www.oreilly.com/catalog/cssckbk/index.html I have over 17,000 (250+ oreilly, 400+ mspress, etc...) on various subject, so if you have a specific title in mind, you can almost bet that i have it Anyone ready to take the 'job' can add me to is msn, my address if paologoarex@hotmail.com. I think this would take something like 1hour for an experienced web dev while for me it woud take days (if not weeks) ! Dont blame me for being lazy, i did gave it a try ! but since i am more a coder than a web dev, its very hard for me to grasb all the little tweak of css contact me if you are interested. |
|||||||