|
CSS - Div Not Clearing Wrapper Div When Min Height Applied
Similar TutorialsI have a wrapper div 700px wide that is currently set to the following: Code: div.wrapper {
width: 700px;
height: auto;
background-image: url(../local/images/content.gif);
background-repeat: repeat;
background-attachment: scroll;
background-position: top left;
text-align: left;
padding: 0.05in;
position: absolute;
left: 50%;
margin-left: -350px;
border: 2px #000000 ridge;
}
It renders fine in IE, FF, and Opera. Since the height of the content varies, I am trying to accomplish a minimal fixed height of 700px OR larger if the content is longer than 700 px. Any ideas? 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 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 am attempting to add what at first glance looks to be a gradient border down the sides of my container, and it has worked fine in IE, but in Firefox, said style element stops after a certain header box, before the page moves into the main content of the site (which has elements floated). Please have a look at the following page in both IE and Firefox, and you will see the problem: tombstonemedia.com/noise/venues.htm and the stylesheet for this page is: tombstonemedia.com/noise/style.css If anyone knows what exactly it is that I need to tweak in order to make the effect be cross-browser compatible, please let me know. This is a bit puzzling for me. I read that I can apply css to something based on id, which I have been doing, thats how my template is made, USING CSS :S. I need to apply css to an H2 that already has css applied to it but has a different id. Here is the page I need to do it to, view it and see why I need to. http://www.coldfusionzone.com/index.php?p=7 Look down towards where the comments are and youll see Leave a comment I need to change that to where it expands up to 40 pixels from the side, and has a black background without the stinkin date pic next to is . Now that Im talking about it im confused again. Ha ha I had it down pat but now that I need help im confused thats strange. But I need to apply a css style to it when it already has a css it.... Here the css style that controls it is on top and the css style im trying to use is on the bottom. PHP Code: div#content h2 { background: #000 url(images/date.jpg) no-repeat left center; background-color: #232323; color: #5F5F5F; padding: 2px 15px 2px 85px; border: 1px solid #494949; margin-left: 40px; margin-right: 220px; margin-bottom: 10px; margin-top: 0; font-size: 95%; font-weight: normal; } div#content#postcomment h2 { background: #000; background-color: #000000; color: #5F5F5F; padding: 2px 15px 2px 85px; border: 1px solid #494949; margin-left: 40px; margin-right: 220px; margin-bottom: 10px; margin-top: 0; font-size: 95%; font-weight: normal; } For the life of me I cant find out what code that will align the image correctly. Currently the "previous" button on the page below has a gap on the left, and is being cropped on the right. http://zombiemod.com/rm/nina2/main.php?g2_itemId=13 This is the image im talking about: http://zombiemod.com/rm/nina2/theme...ntrols-left.png I guess if I remove the space to the left of the previous button, it will drag the image to the corrct position so all of the image is being displayed without having the right side cropped. Here is the HTML for the button: Code: <ul id="control-buttons"> <li><button id="controls-left"> <img src="themes/ajaxian/images/controls-left.png" alt="Left" /> </button></li> <li><button id="controls-play"> <img src="themes/ajaxian/images/controls-right.png" alt="Play" /> </button></li> <li><button id="controls-right"> <img src="themes/ajaxian/images/controls-right.png" alt="Right" /> </button></li> </ul> This is the code I used to try and set the correct height of the buttons: Code: #slideshow-controls button {
width: 44px;
height: 59px;
/*margin: 0;
padding: 0;*/
background-color: #000;
border: none;
text-align: center;
cursor: pointer;
}
Hi, I have a XHTML 4.0 file and CSS in a separate file. The CSS if included within the <head> section of the HTML file works correctly and displays the page with the right formatting. However, when I move the CSS to a separate file and just use the <link> tag within the <head> section of the HTML file to link to this CSS file, the formatting is not applied. I am not sure what to do. Any quick help is greatly appreciated. Thanks xworder Hi I think this is some kind of IE 6 bug I am adding some elemnts to the page using the following code: etc... my_new_node3 = wd.createElement('span'); my_new_node3.setAttribute("class", "beep4"); my_new_node3.appendChild(wd.createTextNode("")); my_new_node3.appendChild(wd.createElement('br')); my_new_node3.appendChild(wd.createTextNode("")); my_new_node2.appendChild(my_new_node3); etc... This is not a problem and it works fine. The problem is that when I add this to the page the css (from an external style sheet) that should apply does not. It is some kind of IE bug, I have tested it extensively in Firefox, using the DOM inspector - where it works fine and I can see that all the elements have been created / added to the page correctly. I have also confirmed that the correct elements are being created in IE it is just that styles are not being applied to the created elements. The styles work in Firefox and also in IE under normal circumstances (when the elements are not created on the fly) I'm sorry that I can't give more detail, but its deeply burried in an application and I thought putting in the relevant css etc might just make it more confusing. Any help very appreciated. Thanks. The section of my site that this effects is a login area, so I can't provide a link... I can post some code if I need to... I have a div with this class applied to it. Code: .minidaysofweek div{
width:13.6%;
float:left;
font-weight:bold;
}
It was working fine here, but when I put it in my site template, the bold doesn't work. So I added color:blue; just for testing, and it changed the color... what would keep the font-weight from being applied? The minititle class isn't bolding either like it should... <edit>FF and IE effected</edit> All, I have a header on this page backup.whiteslimo.com with 3 images inserted into it listing the company name, service, and contact info. My problem is that when they are displayed there is a thin white border on the bottom and right hand sides of each image. But the image doesn't have these borders. If you are in Firefox/Mozilla and you right click on the individual images and select View Image, you will see that the image itself does not have these borders. I am thinking that somewhere along some attribute is being added that is causing this but since I am a CSS neophyte (This is still my first week lol) I am not sure. Any help is much appreciated. I have nested divs and on the most outer div i apply a background-color but it is only applied to half of the divs?? it happens BOTH in firefox & IE!! PHP Code: <style type="text/css"> /********** layout of the page ***********/ #top { background-color:yellow; clear:both; } /***************** Formatting top part of the page **************/ #tag { float:left; margin-left:8em; } #login { float:right; } #logo { margin-left:2em; float:left; clear:left; } #searchBox { float:right; clear:right; } #links2 { clear:right; background-color:yellow; } #links2 li{ font-size:0.8em; display:inline; float:right; text-decoration:none; list-style:none; padding:1em; } </style> </head> <body> <div id="top"> <div id="tag"> <p id="">Zahra Zahra Ltd</p> </div> <div id="login"> <p>Login/Register</p> </div> <div id="logo"> <a href="index.php"><img src="images/site/zahra.jpg" width="65" height="59" /></a> </div> <div id="searchBox"> <form action="search.php" method="post" style="margin:0em; padding:0em;"> <label>What are you shopping for?</label> <input type="text" name="search" value="search" size="14"/> <input type="submit" name="submit" value="Go" /> </form> </div> <div id="links2"> <ul> <li>Contact Us</li> <li>Testimonial</li> <li>Return Policy</li> <li>News</li> <li>FAQ</li> <li>about us</li> <li>Home</li> </ul> </div> </div> Why do margin and padding widths act differently when applied to a floated item in Internet Explorer? Hi, My website is deployed at www.wecook.co.uk and i'm having problems with the gray background - i want it to be at least as long as the users page(without specifying a height) - how can i do this? the stylesheet can be seen at www.wecook.co.uk/wecook/wecook.css Any help is appreciated. Thanks in Dreamweaver, how do I change alignment of e.g subNavColumn div tag within wrapper Div Tag, I wish to align subNavColumn on left of page. Banner and NavBar extend across full page. I have been unable highlight layer to change properties, must a CSS Stylesheet be attached at outset, could this be part of my problem. Also how can I remove gap showing between layers in IE. I wish to contain all div tags together, Would appreciate help. I'm having trouble getting my content to contain within my wrapper in #$%@% IE. Works as expected in Firefox, of course. I simply want to create a background and then put all of my content on top of that background. CSS; Code: html, body {
margin: 0;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}
div#frameBG {
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index: 0;
}
div#wrapper {
margin: 0 auto;
width: 900px;
text-align: left;
z-index: 2;
}
#logo {
position: relative;
top: 50px;
border: 0;
padding: 0;
}
HTML; Code: <BODY> <DIV class="frameBG"><img src="images/dk-green-rect.jpg" width="100%" height="100%"></DIV> <DIV class="wrapper"> <!-- Setup the header area --> <DIV id="logo"><img src="images/header_01.jpg"></DIV> </DIV>--> </DIV> </BODY> </HTML> And with that, presto! IE 8 intelligently puts the logo at the bottom of the page. I'd almost rather build tables nested 20 deep than deal with this! Wondering if anyone could help me root this problem out. I find that when content forces a scrollbar on the browser window, everything in my wrapper div gets nudged to the left about 10 px. I'm using a sticky footer, but other than that, nothing too shifty. Anyone have an ideas? If you Google Black Warrior Review, you can see the site. Here's the pertinent CSS, including Ryan Fait's sticky footer: * { margin: 0; } a:link { text-decoration: none; color: #000000; } a:visited { text-decoration: none; color: #000000; } a:hover { text-decoration: none; color: #FF00FF; } a:active { text-decoration: none; color: #FF00FF; } html{ height: 100%; } body { background-attachment: fixed; background-image: url(background4.jpg); background-repeat: repeat-x; background-position: bottom; text-align: left; height: 100%; font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; } p { padding-bottom: 16px; } .wrapper { min-height: 100%; height: auto !important; height: 100%; /* the bottom margin is the negative value of the footer's height */ margin-top: 0; margin-right: auto; margin-bottom: -35px; margin-left: auto; width: 600px; } .menu { font-family: Georgia, "Times New Roman", Times, serif; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding-left: 10px; text-align: left; color: #000000; width: 650px; } .content { width: 590px; line-height: 16px; padding-top: 10px; padding-right: 0px; padding-bottom: 50px; padding-left: 10px; } h1 { font-family: Arial, Helvetica, sans-serif; font-size: 63px; font-weight: bold; width: 590px; padding-left: 7px; margin-bottom: -7px; padding-right: 3px; padding-top: 20px; } h2 { margin-left: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bolder; width: 590px; padding-left: 10px; padding-top: 30px; padding-bottom: 0px; } h3 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bolder; padding-top: 16px; } h4 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bolder; padding-bottom: 16px; } .contentimg { padding-top: 10px; padding-left: 10px; } .margin { padding-left: 10px; } .revauthor { font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #999999; } .revtop { vertical-align: bottom; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; } .caption { font-size: 10px; font-style: italic; text-align: right; width: 590px; padding-bottom: 10px; padding-top: 5px; } .footer a { color: #FFFFFF; .caption { font-size: 10px; font-style: italic; text-align: right; width: 590px; padding-bottom: 10px; } .contenttable { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; width: 590px; text-align: left; line-height: 16px; padding-top: 10px; padding-right: 0px; padding-left: 10px; } blockquote { padding-left: 20px; } .push { height: 35px; /* .push must be the same height as .footer */ } /* Sticky Footer by Ryan Fait */ .footer { font-family: Arial, Helvetica, sans-serif; font-size: 10px; padding-left: 10px; padding-bottom: 0px; height: 25px; vertical-align: bottom; text-align:center; color: #FFFFFF; padding-top: 10px; background-color: #999999; } I just noticed an issue I'm having related to the content on almost all the pages on my site. I have the code below for the body and the #page div. The #page div is supposed to be like a wrapper that encompasses everything. I just tried putting in a border (border: 1px solid #FFFF00 for the #page div so I could see how everything lined up within it (since I have the same background-color for the body and the #page div I can't normally see this). When I added this yellow border, I found only one page where the border went around everything. On all the other pages, the border seems to either not close or to only go around the content near the top of the page or to go around nothing. I think this means that all the code that I have in the #page div is not being applied to most of the content on each of those pages. I'm having a hard time understanding why that border I inserted does not go all the way around everything (why the #page div does not seem to be including everything). I have the div properly closed at the bottom of the page (</div></body></html>) and this is even happening on pages where I have no validation errors. body { background-color: #000000; margin: 0px; } #page { width: 960px; font-size: 14px; font-family: verdana, sans-serif; color: #26D578; background-color: #000000; margin-left: auto; margin-right: auto; margin-top: 16px; } Hi, I'm new to the forum and very new to CSS, so please excuse my ignorance or any stupid fundamental mistakes I have made. I have almost got what I need to work, but my wrapper and the leftshade and rightshade div heights will not work with the height of the page. If I set them to a preset pixel height, they're fine, but when I set them to auto they disappear. I need them to be able to scroll to whatever the length of my content is going to be. I could really use some advice on how to sort this. Many thanks in advance. 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>Heading</title>
<style type="text/css">
<!--
body {
margin-right: auto;
margin-left: auto;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
background-color: #C2FFC1;
}
#wrapper {
width:960px;
height:auto;
margin-right: auto;
margin-left: auto;
}
#middle {
position:relative;
top:0px;
width:940px;
height:auto;
float: left;
background-color: #FFFFFF;
}
#leftshade {
top:0px;
width:10px;
height:600px;
float: left;
background-image: url(images/shadeleft.png);
background-repeat: repeat-y;
}
#rightshade {
top:0px;
width:10px;
height:600px;
float: left;
position: relative;
background-image: url(images/shaderight.png);
background-repeat: repeat-y;
}
#banner {
width:940px;
height:150px;
background-color: #FFFFFF;
}
#navbar {
width:940px;
height:50px;
background-color: #6DC072;
border-top-width: thin;
border-bottom-width: thin;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #666666;
border-bottom-color: #666666;
text-align: left;
vertical-align: middle;
}
}
#centre {
position:relative;
width:580px;
height:257px;
padding: 10px;
float: left;
}
#content {
width:940px;
height:auto;
background-color: #FFFFFF;
}
#contentleft {
position:relative;
width:150px;
height:auto;
float: left;
padding: 10px;
}
#contentmiddle {
position:relative;
width:580px;
height:auto;
padding: 10px;
float: left;
}
#contentright {
position:relative;
width:150px;
height:auto;
float: right;
padding: 10px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="leftshade"></div>
<div id="middle">
<div id="banner"></div>
<div id="navbar"></div>
<div id="content">
<div id="contentleft">
<p>f</p>
</div>
<div id="contentmiddle">
<p> </p>
</div>
<div id="contentright">
<p> </p>
</div>
</div>
</div>
<div id="rightshade"></div>
</div>
</div>
</body>
</html>
|
|||||||