|
CSS - Expanding Height Div
Hello.
Trying to construct a page with vertical expansion on both of two nested DIVs. Left column is primarily text which varies in length. Right column is a navigation/contact panel that is mostly fixed height, but want ability to drop in objects and expand vertically on some pages. I have tried to background image in container DIV, but I am still getting the content breaking out of the bottom of the DIV. Any other approaches? Min-height (could not get that to work either). Ideally I would like for these to have the same height. Not shading, so it doesn't need to be exact. Here's a sample of code (w/o all the junk). Similar TutorialsHi, I'm working on a website with a header and footer. I want the footer to sit at the bottom of the page even when the content is shorter than the page. I got that to work but can't seem to get the content div to stretch to meet the footer. The background color is different so I need it to stretch down the page. The website is here http://www.tcglv.com/3dgweb/index2.html Here's the css... I'd appreciate it if anyone can see what i'm missing here... Code: * {
padding:0;
margin:0;
}
html,body {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
background-image:url(../images/gradient.jpg);
background-attachment: fixed;
color:#4F4F4F;
margin:0;
padding:0;
height:100%;
}
a {
color: #0A2A57; text-decoration:none;
}
a:visited {
color: #000; text-decoration:none;
}
a:active, a:focus { border-style: none; text-decoration:none; }
#wrapper {
background-image: url(../images/gradient_interior.jpg);
width: 955px;
text-align:center;
margin: 0 auto -88px;
position:relative;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header {
background-image: url(../images/header.png);
background-repeat:no-repeat;
width:907px;
height:215px;
margin:0 auto;
font-size:0.85em;
color:#ffffff;
text-align:right;
}
#header_interior.interior {
margin-top:27px;
}
#header.interior {
height:136px;
}
#header ul {
padding-top:2px;
}
#header li {
display:inline;
padding-left: 10px;
padding-right:15px;
background: url(../images/bullet.jpg) no-repeat left center;
}
#header li.end {
padding-right:36px;
}
#header a:link, #header a:visited, #header a:active {
color:#ffffff;
text-decoration:none;
font-weight:normal;
}
#header a:hover {
text-decoration:underline;
}
#header_interior {
float:left;
text-align:left;
height: 210px;
position: absolute;
left: auto;
top: 0;
}
#logo {
float:left;
position: relative;
z-index: 10;
}
#topnav {
padding-top:5px;
position: relative;
z-index: 10;
float: right;
left: auto;
}
#main {
width:901px;
background-image:url(../images/main_back.png);
background-repeat:repeat-y;
background-position:left;
margin:0 auto;
padding-left:4px;
padding-right:3px;
}
#main_interior, #main_interior2 {
background-image:url(../images/gradient_grey.jpg);
background-color: #fff;
background-repeat: repeat-x;
text-align:left;
padding:25px 25px 25px 25px;
background-position: left -20px;
}
#menu {
width:908px;
background-image:url(../images/menu_back.png);
background-position:left;
margin:auto;
text-align: center;
}
#menu a { margin-left: -4px; }
#footer a {
color:#4F4F4F;
text-decoration:none;
font-weight:normal;
}
#content {
padding-bottom:98px;
}
#logos {
text-align:center;
}
#footer {
width:843px;
height:73px;
background-image:url(../images/footer_back.png);
background-repeat:no-repeat;
margin:0 auto;
text-align:left;
padding:15px 30px 30px;
color:#6D6D6D;
font-size:0.8em;
position:absolute;
bottom:0;
left:20px;
}
#footer a {
color:#888888;
}
#footer ul {
list-style: none;
margin-bottom:7px;
}
#footer li {
display:inline;
background-image:url(../images/border.jpg);
background-position:right 3px;
background-repeat:no-repeat;
padding-right:18px;
margin-right:17px;
}
#footer li.end {
padding: 0;
margin:0;
background-image:url(../blank.gif);
}
#iii {
float:right;
margin-right:-20px;
padding-top:12px;
height:30px;
}
.learn {
margin-top:30px;
}
.padding {
margin-right:50px;
}
.padding_2 {
padding-right:15px;
}
.padding_3 {
padding-bottom:16px;
}
.padding_4 {
padding-top:10px;
padding-bottom:10px;
}
.padding_5 {
padding-top:10px;
padding-bottom:5px;
}
.clear {
clear:both;
height:0;
}
p { margin-bottom:15px;margin-top:15px; }
h1 {font-size:16px;}
.topnavul {
float: left;
margin-left: 195px;
width: 250px;
}
.style3 {font-size: 12px}
.style5 {
font-size: 16px;
color: #FF0000;
font-weight: bold;
}
body,td,th {
font-size: 0.8em;
}
Hello, I started off trying to find a content box that expands depending on screen res because the last one I made would break in the middle if the users screen res was over 1600px wide. This box worked great with the screen res but now I'm trying to put content in it and my content is not expanding the box down. Instead of pushing the box lower and forcing a scroll bar. The content keeps going down past the bottom of the box and makes a scroll bar. Any idea how I can make the box expand with my content? here is a link to my test page. http://www.gamerunion.com/test.html My css code. Code:
div#case {
position:absolute;
z-index:1;
top:200px;
left:50px;
bottom:50px;
right:50px;
background:url(/assets/images/tile.png) repeat;
}
div#tlcorner span, div#trcorner span, div#blcorner span, div#brcorner span, div#lftile span, div#rttile span, div#tptile span, div#btmtile span {
width:0;
height:0;
overflow:hidden;
display:block;
}
div#tlcorner {
position:absolute;
z-index:10;
top:0;
left:0;
background:url(/assets/images/corners.png) -369px 0 no-repeat;
width:123px;
height:123px;
}
div#trcorner {
position:absolute;
z-index:10;
top:0;
right:0;
background:url(/assets/images/corners.png) -246px 0 no-repeat;
width:123px;
height:123px;
}
div#blcorner {
position:absolute;
z-index:10;
bottom:0;
left:0;
background:url(/assets/images/corners.png) 0 0 no-repeat;
width:123px;
height:123px;
}
div#brcorner {
position:absolute;
z-index:10;
bottom:0;
right:0;
background:url(/assets/images/corners.png) -123px 0 no-repeat;
width:123px;
height:123px;
}
div#lftile {
position:absolute;
z-index:5;
top:0;
left:0;
bottom:0;
background:url(/assets/images/lr.png) -20px 0 repeat-y;
width:20px;
}
div#rttile {
position:absolute;
z-index:5;
top:0;
right:0;
bottom:0;
background:url(/assets/images/lr.png) 0 0 repeat-y;
width:20px;
}
div#tptile {
position:absolute;
z-index:5;
top:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 0 repeat-x;
height:123px;
}
div#btmtile {
position:absolute;
z-index:5;
bottom:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 -123px repeat-x;
height:123px;
}
div#case div.content {
position:absolute;
z-index:10;
width:100%;
min-height:400px;
overflow:hidden;
}
div#case div.content h1 {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:16px;
color:#000000;
margin:5px 0;
padding:100px 0 0 100px;
text-align:left;
text-transform:capitalize;
}
div#case div.content p {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:14px;
color:#000000;
text-align:justify;
padding:0 100px;
}
HTML Code:
<body>
<div id="header">
<h1 class="small">GamerUnion</h1>
<h2 class="small">For Gaming Addicts by Gaming Addicts.</h2>
</div>
<div id="case">
<div id="tlcorner"><span>top left corner</span></div>
<div id="trcorner"><span>top right corner</span></div>
<div id="blcorner"><span>bottom left corner</span></div>
<div id="brcorner"><span>bottom right corner</span></div>
<div id="tptile"><span>top side tile</span></div>
<div id="lftile"><span>left side tile</span></div>
<div id="rttile"><span>right side tile</span></div>
<div id="btmtile"><span>bottom side tile</span></div>
<div class="content">
<div id="nav">
<ul>
<li><a href="/" class="current">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/forum/">Forum</a></li>
<li><a href="/resources.html">Resources</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
<h1>Gamerunion</h1>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
<p>Text text text text</p>
</div>
</div>
</body>
Hi all, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! I've never done much CSS work, but I know this has to be an easy fix. Each DIV appears to be 10px higher when viewed in IE. I want them to be 8px high and they end up being 18px high. In Firefox, Netscape, and Opera it works fine. Anyone mind correcting this imbarrassing little problem? 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" xml:lang="en" >
<head>
<title>IE 10px Padding Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0px; }
#container {
position:relative;
margin:auto;
width:730px; }
#header {
height:110px; }
.textualtop {
border:1px solid #000000;
height:8px; }
.textualbottom {
border:1px solid #000000;
height:8px; }
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<p>Notice how in IE6 each DIV is 10px higher then in FF. Why is it doing this?</p>
</div>
</body>
</html>
Hello everybody! I have been having a big problem with my webpage for a long time now and hope I can find an answer to my problem with your help. I want a div that contains the content of my pages (which varies in length depending on the individual page) to stretch the length of my page, but it only stretches the length of the window. Here's the HTML and CSS: HTML (I only included the very basic structure): <html> <body> <div class="container"> <div id="content"> <div id="..."></div> <div id="..."></div> <div id="..."></div> <div id="..."></div> </div> </div> </body> </html>` CSS: html, body { height: 100%; font-family: Arial; font-size: 10px; color: #000000; background: #FFF url(../../images/body.png) no-repeat center 40px; margin: 0; position: relative;} .container { height: 100%; width: 960px; margin-right: auto; margin-left: auto; position: relative;} #content { width: 939px; min-height: 100%; position: relative; top: 210px; left: 6px; box-shadow: 0px 0px 8px #666; -moz-box-shadow: 0px 0px 8px #666; -webkit-box-shadow: 0px 0px 8px #666; background-color: #FFF;} I tried to set the content div to overflow: auto, but that includes a scroll bar for the content div that I do not want. It does, however, create the desired effect of the shadow and background of the #content div all the way to the end of the page. Am I missing anything? I thought min-height would work, but it doesn't! It only stretches the content div to page height and everything else is overflow, but without the content div's background color and shadow. Does anybody maybe see where the problem lies? Thank you so much in advance for your help. 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 It seem that everytime I added the image tag, the div'x area get bigger in IE but not in Mozilla/Firefox browser. So, I thought by added the "margin-bottom:-360px;" to the div would fix it but it had an opposite effect. Meaning it worked in IE but Mozilla show a vertical scrollbar. So, does anyone know how can I make the <img> overlap one another without being stacked on one after another in height for IE if I take out the "margin-bottom: -360px;"? Thanks... Code:
div.divBox1
{
width: 286px;
height: 359px;
float: left;
}
div.divClearFloat
{
clear: both;
height: 0px; /* For IE Stupidity (it added some spaces after clearing the float) */
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
div.divDottedLineAdvertisementSeperator1
{
width: 575px;
height: 3px;
background-color: #ff0000;
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
Code: <div class="divBox1"> <div style="margin-bottom:-360px;"> <img src="images/doctor.jpg" style="position:relative;top:0px;left:0px;z-index:2;"> <img src="images/we_help.jpg" style="position:relative;top:-360px;left:0px;z-index:1;"> </div> </div> <div class="divClearFloat"></div> <div class="divDottedLineAdvertisementSeperator1"></div> If you look at the bottom of the page at www.res-technologies_DOT_com/index.php?jos_change_template=restech2 in both IE and FF, you will see that it looks fine in IE, but in FF the page length is extended by exactly the height of the header image at the top of the page. Trying to figure out what's causing this is driving me nuts! Can anyone help? thx dh hi, Im making a site, and i decided to use CSS instead of tables. I have used basic CSS before, but it gets abit harder when i start making boxes etc. Here is my code so far - layout.css - (one that gets included on each page) Code: @import "style.css";
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#centercontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
#shoutbox {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#banner, #footer {
background:#fff;
height:40px;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
#footer {
background:#fff;
height:40px;
border-bottom:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
#banner h1 {
font-size:16px;
padding:10px 10px 0px 10px;
margin:0px;
}
#shoutbox, #rightcontent p {
font-size:10px
}
style.css - text formatting etc. Code: body {
font: 12px/1.2 Tahoma;
background:#ddd;
padding:0px;
margin:0px;
}
a {
text-decoration:none;
font-weight:bold;
color:#c00;
}
pre {
font-size:11px;
color:blue;
}
ol {
margin-right:40px;
}
li {
margin-bottom:10px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
it produces a good layout, with a header, 3 coloums and a footer. whoever, the boxes expand at different rates and the footer doesnt move down. the header also doesnt expand. i know how i can fix this, but i dont know how to fix it without making it so that its locked at a resolution. i would like the site to exapand as the window is made larger. here is an image of what i get - and this is what i am aiming to acheive - as you can see, i want all the boxes to be the same length, which is defined by the size of the largest box. also, i want to create 2 or more boxes on the left, only the bottom of which gets made longer. on the first image you cannot see the extra box because it is covered by the other one :-/ i would be greatful for any help you guys can provide me thanks, dynamyt Hi all, I have a site where I have several divs that stack on top of each other for layout purposes and they fill the entire width of the screen. In the div that contains the content, I'm finding a rare case where a table appears that's so wide, it is off the edge of the content element. I wanted to do overflow:auto so that it wouldn't mess up the layout but the customer wants the layout to expand with the content. Since all these divs sit on top of each, they aren't really interacting with the div that has the content in it. Is the only way to make those expand to use JavaScript to detect the width and adjust on the fly or is there a better way to do it? I'll be happy to supply some code if you all need me to but its a lot so I'll hold off on that for now. Hey guys, I've got a two column layout, and I want both columns to be the same height inside the wrapper. Ussually when I do this sort of thing I have a repeating background image or something so it makes it appear they are both the same height, except this template is using rounded corners, so a repeating background won't work. Code: #wrapper{
width:962px;
margin: 25px auto;
}
#mainContent{
width:735px;
background-color: #F4FEFE;
padding:0px;
border:0px;
float:left;
}
#rightColumn{
background-color: #F4FEFE;
width:207px;
height:100%;
min-height:100%;
float:left;
margin-left:20px;
}
Click here to see what I'm talking about... I want that right column to match the height of the main content div. Would this only be possible using JavaScript or is there a CSS solution? ive been at this for a while now. i have a navleft.gif, navbody.gif, and navright.gif. what i want to do is make an expandable nav bar with the body repeating on the x axis. every attempt ive made doesnt work. im still fairly new to css. should i have a <div id="nav"> and within this div put a another div with id=navleft and another with navright? no idea how to go about this. any help would be appreciated. Hi, I am trying to make a website for a friend that scales to fit most monitors. The website is very image heavy and I have a navigation bar on the left side that lines up with the background on the right. I haven't made a webpage for awhile so I don't know a lot about CSS. This is what I have so far. It almost works, but the background on the right will not expand to fit the full div, only goes up to the content that I put inside the Div. The background also doesn't appear to shrink when I scale the window size. HTML CODE: Code: <head> <link rel="stylesheet" href="style.css" type="text/css"/> <title>Test Page</title> </head> <body> <div id="sample-container" align="center"> <div id="header"> <img src="images/header.jpg" width="1647" height="147" / id="headerbar"></div> <div id="nav"> <img src="images/navbar.jpg" width="413" height="776" / id="navbar"></div> <div id="content"> <img src="../../../Pictures/Misc/101_0138.JPG" width="527" height="428" /> </div> <div id="footer"></div> </div> </body> </html> CSS CODE: Code: #header
{
height: auto;
background-color: #666;
}
#nav
{
float: left;
width: 25%;
height: auto;
background-color: #999;
margin-bottom: 10px;
}
#content
{
float: left;
width: 75%;
height: auto;
background: url(images/mountain.jpg);
background-repeat: no-repeat;
margin-bottom: 10px;
}
#footer
{
clear: both;
height: 50px;
background-color: #666;
margin-bottom: 10px;
}
#headerbar
{
height:auto;
width:100%;
}
#navbar
{
height:auto;
width:100%;
}
If anyone knows a way to expand the background to fill the div and scale down when the div scales is size, that would be great. I was also thinking that maybe I could put the the navigation bar and the background image on the page and not as an background. Put those both in a div and have a floating div on the right aligned over the top of the background that contains the page content. If anyone could give any help with a solution it would be appreciated. Thanks. going bonkers, I have tried everything to find out why on earth the background goes all the way to the right when this page is viewed in IE.. Black Background Not Stoping!! You can see the problem he BrianRoyer.com The google adsense ad is expanding past the container. Here is my style.css for troubleshooting: Code: html, body {
background: #a0a0a0 url(images/main_bg.gif) center top repeat-x;
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
}
a:link {
color: #FFFFFF;
text-decoration: underline;
}
a:visited {
color: #FFFFFF;
text-decoration: underline;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
#container {
width: 703px;
margin: 0 auto;
background: #068add url('images/content_bg.gif');
border-left: 5px solid #cdcdcd;
border-right: 5px solid #cdcdcd;
border-bottom: 5px solid #cdcdcd;
}
#content em.u {
text-decoration: underline;
font-style: normal;
}
#top {
padding: 0;
border: 0;
}
#top img {
border: 0;
}
#top h1 {
padding: 0;
margin: 0;
}
#leftnav {
float: left;
width: 160px;
margin: 0;
padding: .25em 0 0 .75em;
}
#rightnav {
float: right;
width: 125px;
margin: 0;
text-align: center;
padding: 1em 1em 0 0;
}
#rightnav img {
margin: 0;
border: 0;
text-align: center;
padding: 1em 0 0 0;
}
#content {
margin-left: 200px;
margin-right: 200px;
padding: 1em 0 0 0;
width: 290px;
}
#content img.left {
margin: 5px;
border: 1px solid #000000;
float: left;
}
#content img.right {
margin: 5px;
border: 1px solid #000000;
float: right;
}
#leftnav img {
margin: 0;
border: 0;
}
#google-search img {
border: 0;
padding: 1em;
}
#footer {
width: 699px;
padding-top: 1em;
margin: 0 auto;
background: #068add url(images/footer_bg.gif) center bottom repeat-x;
}
#leftnav p, #content p {
margin: 0 0 1em 0;
text-align: justify;
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
line-height: 130%;
}
#rightnav p {
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: Verdana;
font-size: 10px;
}
#leftnav hr, #content hr, #rightnav hr {
color: #FFFFFF;
height: 1px;
}
#content h2 {
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
}
#content h2.center {
text-align: center;
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
}
#leftnav h2, #rightnav h2 {
text-align: center;
margin: 0;
color: #FFFFFF;
font-family: Verdana;
font-size: 12px;
}
#content h6, #leftnav h6, #rightnav h6 {
text-align: center;
margin: 0;
padding: 1em;
color: #FFFFFF;
font-family: Verdana;
font-size: 8px;
}
#navcontainer ul
{
list-style-type: none;
text-align: left;
padding: 0 0 0 1.25em;
margin: 0;
}
#navcontainer ul li a
{
background: transparent url(images/list_off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 10px Verdana;
text-decoration: none;
color: #FFF;
}
#navcontainer ul li a:hover
{
background: transparent url(images/list_on.gif) left center no-repeat;
color: black;
}
#navcontainer ul li a#current
{
background: transparent url(images/list_active.gif) left center no-repeat;
color: #666;
}
And here is snippet of code where the adsense ad is located: Code: <div id="container">
<div id="top">
<? include("ssi/header.inc"); ?>
</div>
<div id="leftnav">
<? include("ssi/leftnav.inc"); ?>
</div>
<div id="rightnav">
<? include("ssi/rightnav.inc"); ?>
</div>
<div id="content">
ad = rightnav.inc I think that this is something really basic but I just haven't been able to put my finger on the problem. Can someone please point me in the right direction? In IE 6 the cell background (as defined in CSS) or the table cell size is not correct, but it looks fine in FF. The test page is: http://www.kdays.com/box/kerrin.htm I have started creating a new DIV layout for my website but can't seem to get it to function correctly. I finally got the DIVs to expand with whatever content is in them, but now they will only span to the height of the window and hide the rest of the content instead of expanding further and just making the IE window scroll. Maybe one of you guys can help me out? Here is the test page: well apparently I can't post the url, so I guess I'll just "say" it. juicyart dot net / test.html Hi there I have a container DIV that nests 4 DIVs one on top of the next (logo, navigation, content and footer, all the same widths). If there is a single paragraph (or small amount) of text in the content DIV of the page, the page looks fine. However, if there is a large amount of text in the content DIV of the page, the width gets pushed out slightly. IE5 is fine. Firefox and Opera are the problem. Note: I have left the height of the content DIV blank as it will be of varied size. When I set a height of say, 500px, the page looks fine (but because a background colour is needed for the DIV, it doesn't appear as I intended it to). Any ideas to why this is happening? Thanks in advance :-) -Solange. Hey there everyone. (First time posting!) I was wondering if i could ask your assistance.. I am very close with my new css layout for a project I am working on but i have one small thing that is bugging me... Click here to view the page: URL now.. the problem is, when the content in the main "white" window expands the green div behind does not... also the footer gets covered up... This will cause me problems, ideally i would like it to push the green and the footer down as the content expands via either the browser window shrinking or just having more content in the white center div.... Check out this to see what is happening when there is more content in the white center to see what i mean: URL Link to my css: URL Thank you so much in advance for your suggestions tips and feedback... ok, here's what i'm working with: multiple rows of data (divs stacked on top of eachother, we'll call main_container), with 2 columns each. the right hand column has a list of emails (call it sent_details), but it only shows as many as can fit in main_container. the design calls for me to put a "more" link on the bottom right hand corner of sent_details. so, i have to give sent_details a position of relative and the more link an absolute position fixed to the bottom right. in firefox, when i click "more", sent_details will expand, reveling more emails (sent_details was given overflow: hidden). in IE, however, sent_details will expand, however all sent_details below it will remain in their fixed positions, making the expanded div above it overlap. does anyone have a suggestion to fix this? do i need to post code? thanks |
|||||||