|
CSS - Footer Problem:- Clear:both; - Am I Doing It Right?
Similar TutorialsHey everyone, I am working on a design for a friend. and I got it almost done, but for some reason, the footer does not display below the page. In no browser. Here is my code: 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" lang="en">
<head>
<title>BlackNine</title>
<script type="text/JavaScript" src="rounded_corners_lite.inc.js"></script>
<style type="text/css">
body {
background-color: #4D4D4D;
color: #FFFFFF;
font-family: verdana,tahoma,san-serif,arial;
font-size: 13px;
margin: 0;
padding: 0;
}
a img {
border: 0;
}
a, a:link, a:visited, a:hover, a:active {
color: #ff9600;
text-decoration: underline;
}
a:hover {
color: #000000;
}
li {
background-image:url(li.jpg);
background-repeat:no-repeat;
background-position:left;
list-style-type: none;
padding-left: 18px;
}
#header {
width: 100%;
}
#header h1 {
color: #ff9600;
font-size: 25px;
padding-top: 5px;
}
#header h2 {
position: absolute;
top: 0;
padding-left: 55px;
color: #CCCCCC;
font-size: 13px;
}
#main {
border-top: 5px solid #0042ff;
border-bottom: 5px solid #0042ff;
position: absolute;
background-color: #FFFFFF;
height: auto;
margin: 0;
width: 98%;
color: #000000;
padding-right: 2%;
}
#main h1 {
color: #ff9600;
font-size: 19px;
}
#main p {
text-indent: 55px;
}
#rightCol {
float: right;
width: 20%;
position: absolute;
right: 0;
height: 100%;
border-left: 1px dotted #ff9600;
}
#leftCol {
float: left;
width: 75%;
padding: 2%;
}
#footer {
text-align: center;
clear: both;
}
</style>
</head>
<body>
<div id="header">
<h2>I am so fly</h2>
<h1>BlackNine</h1>
</div>
<div id="main">
<div id="rightCol">
<ul>
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
</ul>
</div>
<div id="leftCol">
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
</div>
</div>
<div id="footer">
asdfsafjsdkf sdafkljsdfk lsdlkfjsd afkljsdfsdklfjsdf asdfksdjf
</div>
</body>
</html>
Here is what it looks like. Any suggestions? Every time I run the code below my copyright always winds up at the top of the page. If I remove the button div and place normal html in the code the foot works the way I want. I just seem to get messed up with the divs. Any help will be appreciated Andy #foot { clear: both; color: #000; } #foot p { margin: 4px; text-align: center; } #button { position: absolute; padding: 0px; top: 40px; left: 150px; width: 5%; } <html> <head> <title></title> <link href="include/styles.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <div id="button"> <img src="images/button.bmp"> </div> <div id="foot"> <p>Copyright 2007 </p> </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 have some simple code that works in all recent browsers, including IE8+. But with some people out there still using IE7, for which it does something odd, and I've been asked to make it work with that as well. I've dumbed it down to it's basics, and it's just easiest to see with a visual. http://www.poweredpages.com/test.php I have four boxes, labeled 1 through 4. It's supposed to wrap at 3, with 4 to the right of that box. In IE7, It wraps at 3 (correctly, because of the clear), but then box 4, which has a float:left after the cleared 3 box, jumps back up to the 1 and 2 row. Any thoughts on how do get this working with the least amount of editing would be appreciated. In real life, I have the left boxes as a class "label" and the right boxes as another class "input", so if I could just add something to one of these classes and be done w/ it, that would be great. Of course, I could put another entire DIV around each row to fix this, but that would require altering a whole bunch of code. Thanks! Prof Here's the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div style="clear:both;width:50px;float:left;border:1px solid red">1st</div>
<div style="float:left;border:1px solid green">2nd</div>
<div style="clear:both;width:50px;float:left;border:1px solid blue">3rd</div>
<div style="float:left;border:1px solid orange">4th</div>
</body>
</html>
hello all, once again, IE is presenting problems where everything else is just fine. specifically, my footer isn't clearing. i've looked around and apparently this is nothing new, but none of the fixes seem to be working. so first, the offending page (one look in IE and all will be understood instantly): http://www.teamsnowvalley.com/news/headline.php?id=12 i've made the footer RED to indicate the snafu in IE. relevant CSS (i stripped out unnecessary crap): #content { float:left; display:block; margin:0 0 25px } #content .full { float:left; width:500px; padding-right:15px; border-right:solid 2px #CCC } #rightSideBar { float:left; padding-left:15px; width:207px } #footer { clear:both; padding:20px 0; background:red url(/images/footerBG.gif) repeat-x top } HAAAAALLLLLPPP thanks m Hi, I have a problem with the following page, basically the second album blocks (labelled "2006, Carnival") won't start until the navigation menu on the left has finished: http://www.realsteel.org.uk/photos/ The following page suffers a similar problem, with the address not starting until the navigation menu on the left has finished: http://www.realsteel.org.uk/contact/ in this case I thought I could fix it by removing the clear on .contact_system .area but then this broke the formatting of the address. Can I apologise in advance for the poor shape of my CSS and XHTML, I'm in the position of not having anything enough time to spend on this aspect of the project. I find that I only get to work on the CSS / XHTML side of things every few months or less, consequently each time I look at it I've forgotten what I learnt the last time and am back to square one. I also find that I don't know why I did what I did the last time! I hope someone can find it in their time to assist! All constructive criticism is very much welcome, whether to do with the above problem or not. Thanks, Geoff Hi, Im not sure whats going wrong with this, but I have two DIV elements on the page: 1st div "googleMap" CSS for googleMap: #googleMap { height: 300px; width: 500px; float: left; } 2nd div "page_right" CSS for page_right: #page_right { width: 300px; clear: left; float: right; } Could someone please tell me why page_right DIV is not clearing the googleMap div? I've just about had enough so hope some kind person will no the answer!! Here is the live page (showing the flaw): belvoir-mortgages.co.uk/contact.php Thanks Lee I have a pretty typical three column layout with col1 floating left, col2 in the middle and col3 floating right. The HTML calls the divs in order of col1,col3,col2 and everything generally works fine with the exception of using a div in the middle column (col2) with a style that has clear:both in it. The clear:both clears all items in the sidebar columns and not just in the middle column (which is what I want). The problem can be seen at the below URLs. wwwDOTjessiekpowellDOTcom/2009/08/kristin-cavallari-filming-on-malibu-beach-for-the-hills/ and wwwDOTjessiekpowellDOTcom/2009/10/alessandra-ambrosio-bikini-photo-shoot/ As you will see the second set of images from the gallery is displayed after a huge gap of white space after it has cleared the last div in the right sidebar. What I want is to just clear the first row of images in the middle column. This does not just affect images but anything with a div style=clear:both Any suggestions will be appreciated as I've exhausted my skills on this one. Hey guys...I'm having a problem with the clear property in firefox adding a large space between a float element and the element that is being cleared. The code is below: HTML Code: Code: <body>
<div id="header">
<div id="topAd">
Top ad - Premium Placement
</div>
<div id="logobox">
<div id="sitestats">
Stat 1: stat<br />
Stat 2: stat<br />
stat 3: stat
</div>
<img src="images/logo.gif" alt="Logo Image"/>
<div id="topnav">
this is the top navigation
</div>
</div>
</div>
</body>
and the CSS Code: Code: body,form,ul,li {
margin: 0px;
padding: 0px;
font-size: 9pt;
font-family: helvitica,arial;
color: #333;
}
#header {
display: block;
border: 1px solid orange;
}
#topAd {
display: block;
background-color: #333;
color: #FFF;
text-align: center;
}
#logobox {
display: block;
vertical-align: bottom;
border: 1px solid green;
height: auto;
}
#sitestats {
float: right;
font-size: 8.5pt;
border: 1px solid yellow;
height: auto;
}
#topnav {
clear: both;
background-color: #333;
color: #FFF;
text-align: right;
padding-right: 0.2em;
}
Now this code works fine in IE, but in Firefox, the cleared element seems to get a very large space between the float and the cleared element. Any help would be appreciated. Hi gyus! I am trying to recode an form we use, which is based on table layout, to use CSS layout instead, using the label element. The old layout had one input per row with a description text next to the input. After coming up with a successful CSS layout in Safari/Firefox/Opera I tried the page in IE and the layout failed. All my inputs are floated to the left (at the top, stacked after each other), but the labels are rendered correctly (one label per line) It seems like the label elements doesn't seem to clear the float (so that the label and inputs are aligned) I broke the code down to the following example: (sorry guys, I don't have the possibility to put it on an publicly accessible server) Code: <?xml version="1.0" encoding="UTF-8"?> <!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>Testing</title> <link rel="stylesheet" type="text/css" href="test.css"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8;"/> </head> <body> <form name="service" action="label2.html" method="post" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8"> <div> <label for="audio_level">Audio Level:</label> <input type="text" id="audio_level" value="0"/> <label for="audio_level1">Audio Level:</label> <input type="text" id="audio_level1" value="0"/> <label for="audio_level2">Audio Level:</label> <input type="text" id="audio_level2" value="0"/> <label for="audio_level3">Audio Level:</label> <input type="text" id="audio_level3" value="0"/> </div> </form> </body> </html> And the CSS: Code:
body {
width:800px;
}
label {
display:block;
float:left;
clear:left;
width:100px;
text-align:left;
}
input {
display:block;
float:left;
width:100px;
}
Applying a <br> element with clear:left after each input seems to fix it, but I is adding extra markup really necessary? I can't figure out what I am missing to get the one label/input per "line" ...I am having a problem with images, they display correctly in mozilla firefox (i.e above the text) but incorrectly in internet explorer. I think it may be due to the float and/or clear functions or maybe the z-index function. here is the htm file... http://www.ajc.kwmaher.com/teebs/...and here is the css file http://www.ajc.kwmaher.com/teebs/style.css . Help appreciated. Teeb(s) www.asticafe.com Can anyone tell me why the right column is clearing the left images? It only happens in IE, not modern browsers like Firefox or Safari. What's causing it and how can I fix it? I've tried playing around with "clear:none" and "float:right" properties for the right column, but it just makes the problem worse. Hi all, I've spent several hours to solve this problem, but found nothing working . The problem (well, there are much more problems ) is that I use 2-cols layout, so the left column (menu) is floating left. And now I need in the one page's head to get 2 images, one aligned to the left, the other to the right and actual text of the headings. I've found 2 good solution: 1) Classic, use float:left on one image, float:right on the other, and text-align: center on the headings. First thing I don't understand, why the image on the right is moved down? You can see it here. Then, the clear property should be used to force the headings to end bottom the images, but clear can't be used, because it also clears the menu (floating to the left) so the headings ends bottom the menu. 2) Using absolute/relative positioning - headigns can be made relatively positioned, images absolutely, one with left:0 and the other with right:0, but then the contents following after the headings is moved to the top, mixed with the heading. Similar problem is being solved in this thread, but I didn't found there anything working . Can anybody help, please? Here are used CSS: Web.css, Fotogalerie.css. Hello, I'm trying to float an image inside a content div that is inside a wrapper div that already has a float left (nav) div earlier in the html. I know that this means that the floated image div will not be cleared until after the already floating nav div, since this is the one that comes earlier in the html and is quite large. It leaves a large gap until it clears the nav div. I have tried a couple of things, here is the page I'm working on and this is the css file This hasn't been tested on Windows, so I have no idea how it looks. It has been tested on the Mac: Safari, Opera, Netscape and Firefox display as described above, but IE Mac is way off whack. The current setup of the page is this: HTML: Code: <div id="content"> <div id="breadcrumb"><a href="http://www.huntacular.com/">Homepage</a></div> <div class="image1"> <img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150"> <p class="red">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> <div class="image2"> <img class="right" src="./images/pic.png" alt="Mystery Image" width"260" height="150"> <p class="orange">Donec accumsan. Pellentesque ac est vitae sapien scelerisque auctor. Nunc pede diam, interdum vel, dictum ut, egestas eget, metus. Maecenas eget sapien.</p> </div> <div class="another3"> <img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150"> <p class="blue">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vulputate. Nulla ac leo sollicitudin mauris fringilla consectetuer.</p> </div> CSS: Code: img.left {
float: left;
border: solid 1px black;
padding: 10px;
margin-right:10px;
margin: bottom: 10px;
}
img.right {
float: right;
border: solid 1px black;
padding: 10px;
margin-left:10px;
}
.image1 {
border: red 1px solid;
padding : 0px;
}
.image2 {
border: orange 1px solid;
padding : 0px;
}
.image3 {
border: blue 1px solid;
padding : 0px;
}
/* Trying to sort the float problem - this sends IE Mac nuts, not checked on IE Win */
.another:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.another {display: inline-table;}
/* Hides from IE5/Mac \*/
* html .another {height: 1px;}
.another {display: block;}
/* End hide from IE5/Mac */
/* .clearer {
clear: both;
} */
p.red {
color: red;
}
p.orange {
color: orange;
}
p.blue {
color: blue;
}
Is there a work around? I thought I'd found one in the third attempt - the one with blue text, but I'm not sure if I've implemented it correctly. Also, IE Mac isn't doing any of these correctly either (well, nearly the second one, but I haven't tested this stuff on Windows either. Is there a solution? i have divs on a page, and the ones appearing on the left don't use any style (style=""), where as on the ones appearing on the right use (style="float: right; clear: right;") in IE 6 and 7, it creates the needed visuals found in the first attachted file (ie 7.gif).. as is seen, it clears the content so that the end of the divs are always in line, so that the next divs can begin properly in line in mozilla firefox (mozzila firefox.gif), it does not obey this idea, and simple starts the next divs after the end of the above ones.. you can imagine how problematic this is when some divs on the right contain ALOT of words, that should be inline with the one of the left, etc any thoughts or anything that could help would be apprciated... regards The dreaded CSS footer. I've managed to get it working perfectly in IE, but Firefox isn't happy atm. If you resize the window so that it needs to be scrolled down the footer soon gets very messed up. If you figure that out then you really, really know your stuff. Or you're a lot more awake than I am. http://www.vaya.ws/vayadesign/ I am trying to create a footer and facing a problem while doing so... This is my html code: Code: <div id="container"> <div id="main"> <div id="terms"> // content </div> // closing terms </div> // closing main <div id="footer"> // content </div> </div> // closing container And css is Code: html, body {
height:100%;
margin:0;
background: #F0FAFF;
}
#container {
min-height:100%;
position:relative;
}
#main {
height:100%;
font-size:150%;
clear:both;
overflow:auto;
padding-bottom:80px;
}
#footer {
position:absolute;
background-color:#FF6633;
bottom:0;
width:100%;
height:80px;
}
#termsandpolicy {
position:absolute;
left:3%;
width:72%;
top:90px;
}
And result that I get is http://www.walknshine.com/termsofuse.php What is the problem...I have searched in google a lot but not able to get any significant css code...plzz help.... Hiya everyone. Right am having major issues with my new site. The problem i am finding, is that my footer is not at the foot at the page when the content in the middle of the page is not big enough. When i add a doze of lines to the main layer it's OK. please check these : Works ok with content in the middle Click here without much content - footer rises. Click Here I've spend 3 hours try to sort out this annoying problem out. Basically i want the footer to main a defined size, remaining at the very bottom of the page. Would someone be kind enough to assist me please ? I have an odd problem with my footer layout. I use 1280x1024 resultion and it works fine but when I change to a lower resultion or reduce browser window from full screen or put on longer text so you need to scroll the page down my footer doesn't sit on the bottom of the page. Check the attached screenshots and the css code bellow to see my exact problem. Code:
#footer {
position: absolute;
margin-left: -50%;
left: 50%;
bottom: 0px; !important;
text-align: center;
font-family: Verdana, Arial, sans-serif;
font-size: 9px;
padding: 5px;
padding-bottom: 8px;
background-image: url(../images/design/bg.gif);
}
Any idea? Thanks this is where it is about: sdomien .be/sdomien6-positionated/ the footer (now it is just the red ugly thing) looks like i want it in IE7, but when i open it in IE8 or FF it seems to be not like in IE7 what did i do wrong? #footer{background-color:red; width:100%; position:relative; bottom:auto;margin-bottom:0 auto;} |
|||||||