|
CSS - Footer Does Not Clear Properly.
Hey 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? Similar TutorialsSo i've got a dillema where I have a page that has a div floating to the left of multiple story divs. I'll start off by giving source code: http://graffetto.com/chops/float.html HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Floating Divs</title> </head> <body> <div class="floatLeft"> this content is to float left this content is to float left this content is to float left this content is to float left this content is to float left this content is to float left this content is to float left this content is to float left </div> <hr /> <div class="storyBlock"> this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa </div> <hr /> <div class="storyBlock"> this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa </div> <hr /> <div class="storyBlock"> this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa </div> <hr /> <div class="storyBlock"> this is a story block fds afds af dsa fdsa </div> <hr /> <div class="storyBlock"> <img src="story_image3.jpg" alt="" title="" /> this is a story block fds </div> <hr style="clear: both;" /> <div class="storyBlock"> this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa </div> <hr /> <div class="storyBlock"> <img src="story_image2.jpg" alt="" title="" /> this is a story block fds afds af dsa fdsa </div> </body> </html> CSS: Code: body {margin: 10px;}
.floatLeft {
float: left;
width: 200px;
height: 600px;
margin: 0 10px 10px 0;
border: 1px solid red;
padding: 10px;
}
.storyBlock {
width: 400px;
margin: 0 0 5px 0;
}
.storyBlock img {
float: left;
margin: 0 5px 5px 0
}
The fifth 'storyBlock' div has an image that is taller than that of the text within that div. I need to clear that div around the floating image to the left, but I can't use clear:left because it will clear the entire 'floatLeft' div. This is what happens: http://graffetto.com/chops/float_cleared.html Idealy, it would look like this (note that these 'storyBlock' divs are generated dynamically): http://graffetto.com/chops/float_ideal.html Also - this issue is only apparent in FireFox - IE automatically clears the div. 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 haven't been able to get the blue footer's left & right margin/padding to just fall into place. I have been working on this for 3 weeks now. This is my only last open item to complete the layout feature. Grrrr.... So, I welcome any help. The red div I made is just a buffer padding that offset and keep the text be inside the blue div. (For text readablity). CSS code Code:
a
{
color: #000000;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
font-weight: normal;
}
body
{
margin: 0px; /* remove margins */
padding: 0px; /*remove padding */
border: 0px; /* remove borders */
height: 100%; /* fix height to 100% for IE */
max-height: 100%; /* fix height for other browsers */
width: 100%;
overflow :hidden; /* get rid of scroll bars in IE */
color: #000000;
font-family: Verdana;
font-style: normal;
font-weight: normal;
}
div
{
margin: 0px;
padding: 0px;
}
html
{
margin: 0px; /* remove margins */
padding: 0px; /* remove padding */
border: 0px; /* remove borders */
height: 100%; /* fix height to 100% for IE */
max-height: 100%; /* fix height for other browsers */
width: 100%;
/* background: #fff; */ /*color background - only works in IE */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden; /*get rid of scroll bars in IE */
/* */
}
p
{
margin: 0px;
padding: 0px;
}
div.divFooterBody
{
/* margin: -100px -2px 0px 0px; */ /* Margin-Top need to be in negative range to fix the location due to Gecko browsers bug with the overflow setting... Also, Margin-Left need to be in negative range to fix the location due to IE bug with the overflow setting... */
/* padding: 8px 0px 8px 0px; */ /* Margin-Left & Margin-Right need to be at 0px due to incorrect padding & location of several div tags in varieties of browsers... */
background: #ffffe0;
width: 80%;
border: 1px solid #000000;
color: #000000;
font-family: verdana;
font-size: 10pt;
font-style: normal;
font-weight: normal;
z-index: 5;
}
div.divLayoutContent
{
position: relative;
height: 100%;
max-height: 100%;
display: block;
overflow: auto;
z-index: 3;
}
div.divLayoutFooter
{
position: absolute;
bottom: -1px;
right: 15px;
/*margin: 0px 15px 0px 0px; */
width: 100%;
height: 50px;
/* display: block; */
z-index: 4;
}
div.divLayoutHeader
{
position: absolute;
top: 0px;
right: 15px;
margin: 0px;
width: 100%;
height: 100px;
display: block;
z-index: 5;
}
div.divLayoutFooterBuffer1
{
position: absolute;
bottom: -1px;
/* padding: 0px 5px 0px 5x; */
/*padding-left: 8px;*/
/*padding-right: 8px;*/
/*margin-right: -40px;*/
/*padding-left: -10px;*/
/*margin-left: 25px;*/
/* margin-top: 19px; */
/* padding: 20px 17px 10px 31px;*/ /* ??(padding-left 15px + 16px) padding-left:16px is the buffering to correct the absolute position - right of 15px... */
width: 100%;
height: 90px;
display: block;
background-color: #0000ff;
}
div.divLayoutFooterBuffer2
{
height: 100px;
display: block;
background-color: #ff0000;
}
div.divLayoutHeaderBuffer1
{
padding: 12px 0px 12px 16px; /* padding-left:16px is the buffering to correct the absolute position - right of 15px... */
color: #ffffff;
font-family: Verdana;
font-size: 250%;
text-align: center;
background: #000000;
}
div.divLayoutHeaderBuffer2
{
height: 100px;
display: block;
background-color: #ff0000;
}
HTML code 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>
<title>Web Layout</title>
</head>
<body>
<div class="divLayoutHeader">
<div class="divLayoutHeaderBuffer1">blah blah...</div>
</div>
<div class="divLayoutContent">
<div class="divLayoutHeaderBuffer2"></div>
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
blah blah<br />blah blah<br />blah blah<br />blah blah<br />blah blah<br />
<div class="divLayoutFooterBuffer2"></div>
</div>
<div class="divLayoutFooter">
<div class="divLayoutFooterBuffer1">hhh
<div class="divFooterBody">
blah blah
<a href="#">blah</a>
<a href="#">blah</a>
<a href="#">blah</a>
<a href="#">blah</a>
</div>
</div>
</div>
</body>
</html>
Thanks... I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan Can someone explain to my why my "spacer" div is not working (i'm looking in IE7 & Firefox)? Here's the page (I put a 1p border around the "clear" div so that you can see it for testing): http://www.welcome-home-interiors.net/services.php Below is the HTML and CSS... HTML: Code: <body>
<div id="container">
<div id="header">
<?php include('includes/flashHeader.php'); ?>
</div>
<div id="nav">
<?php include('includes/navbar.php'); ?>
</div>
<div id="maincontent">
<div id="mainLeftText">
<p><img src="images/headers/services.gif" alt="SERVICES" width="188" height="49" /></p>
<div id="mainLeft">
<p><span class="header">INTERIOR DESIGN</span><br />
Whether it's simply choosing a paint color or extensively remodeling a kitchen, Welcome Home Interiors can offer you guidance. Space planning and 3D Images are available so that you can visualize your room and make changes before any labor or purchasing is made.</p>
<p><span class="header">REAL ESTATE STAGING</span><br />
"Set the Stage" by rearranging current furnishings and accessories to create your own "model home" - spacious, fresh, and beautiful - exactly what buyers are looking for! As trained professionals, Welcome Home Interiors will assist you in establishing a perfect first impression - an important factor in selling your home for the highest price and in the shortest amount of time. In a 1 to 2 hour consultation we will offer suggestions to enhance your home easily and economically, and leave you the comprehensive list of tasks we've discussed. If you'd prefer, you can enjoy the instant gratification of having us rearrange your space on the spot. We also can add pieces from our inventory to enhance your belongings or even fill your vacant home.</p>
<p><span class="header">ROOM REDESIGN</span><br />
Welcome Home Interiors can give your room a whole new look using the furniture and accessories currently in your home. Want to add a few fresh pieces? Let us provide you with a design plan tailored to meet your lifestyle. We can roll up our sleeves and complete the look for you, or turn over the plan for the "do-it-yourselfers".</p>
<p><span class="header">SHOPPING</span><br />
Do you get overwhelmed by all the options? Or just don't have time to shop? Let's discuss the look you're dreaming of and establish a budget, then Welcome Home Interiors will locate it and bring it to you.</p>
<p><span class="header">YOUR NEW PLACE</span><br />
Welcome Home Interiors will recycle your existing furnishings into your new home. We will offer answers to all of those design questions about paint, window treatments, and finishing touches so you'll soon have the "at home" feeling in your new surroundings.</p>
<p><span class="header">GIFT CERTIFICATES</span><br />
Welcome Home Interiors GIFT CERTIFICATES make wonderful hostess, house warming, wedding, birthday, and special occasion gifts. They can be customized to your needs.</p>
<p><span class="header">FEES</span><br />
Together, Lori and Teri of Welcome Home Interiors are $75.oo an hour for design consulting. Prop rental for real estate staging is quoted per room.</p>
</div>
</div>
<div id="mainRight">
<p><img src="images/indexPic.jpg" alt="Welcome Home Interiors" width="310" height="415" /></p>
</div>
<div class="spacer"> </div>
</div>
</div>
</body>
CSS: Code: html, body {
background: #DACCCC;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 0;
margin: 0;
color: #6E6E53;
height: 100%;
line-height: 1.5em;
}
a:link, a:visited, a:active {
text-decoration: underline;
color: #6E5256;
}
a:hover {
text-decoration: none;
color: #7F0A32;
}
#container {
background: #000;
width: 780px;
margin:auto;
padding: 0;
text-align: justify;
height: 100%;
}
#header {
background-color: #FFF;
width: 100%;
height: 272px;
margin: 0px;
padding: 0px;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
}
#nav {
width: 100%;
height: 32px;
background: url(../images/nav/navLeftFade.jpg) #7F0A32 top left no-repeat;
margin: 0px;
padding: 0px;
text-align: left;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
}
#nav img {
margin: 0px;
padding: 0px;
width: 126px;
height: 32px;
vertical-align: top;
}
#maincontent {
background-color: #CAD49F;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
border-left: 6px solid #6E5256;
border-right: 6px solid #6E5256;
overflow: visible;
}
#mainLeftText {
width: 350px;
float: left;
padding: 20px 0px 0px 10px;
margin: 0;
overflow: hidden;
}
#mainLeft {
width: 320px;
padding: 0px 0px 0px 30px;
margin: 0;
float:left;
}
#mainRight {
width: 350px;
float: right;
padding: 50px 5px 0px 0px;
margin: 0px;
overflow: hidden;
}
.header {
font-weight: bold;
text-align: left;
text-decoration: underline;
margin-bottom: 0px;
padding-bottom: 0px;
}
.spacer {
clear: both;
border: 1px solid;
}
/* NAVIGATION ROLLOVERS */
a#home:link, a#home:visited, a#home:active {
margin-left: 150px;
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/home.gif);
}
a#home:hover {
margin-left: 150px;
background-position: -126px 0px;
}
a#services:link, a#services:visited, a#services:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/services.gif);
}
a#services:hover {
background-position: -126px 0px;
}
a#gallery:link, a#gallery:visited, a#gallery:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/gallery.gif);
}
a#gallery:hover {
background-position: -126px 0px;
}
a#testimonials:link, a#testimonials:visited, a#testimonials:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/testimonials.gif);
}
a#testimonials:hover {
background-position: -126px 0px;
}
a#contact:link, a#contact:visited, a#contact:active {
display: inline-block;
width: 126px;
height: 32px;
text-decoration: none;
background: url(../images/nav/contact.gif);
}
a#contact:hover {
background-position: -126px 0px;
}
Thanks!... Hello, Consider the following design: <div id="container"> <div id="A" class="A"></div> <div id="B" class="B"></div> </div> And the CSS classes: .A {float:left; clear:left} .B {float:left; clear:right} This does not work well. So I always do as follow: <div id="container"> <div id="A" class="A"></div> <div id="B" class="B"></div> <div id="clear" class="clear"></div> </div> Whe .A {clear:both} This always happens when I have divs inside other divs. Does anyone knows how to solve this? Thanks, Miguel I have a site with a bunch of floats. It looks something like this: [HTML]<div id="nav" style="float: left"> </div> <div id="content"> <div style="float: left"> </div> <div style="float: right"> </div> <br style="clear: both" </div>[/HTML] Now that clear:both also clears #nav instead of the two divs in #content. Is there any way to fix this so it doesn't clear #nav? Hello, The divs numbered #4(extra2) and #5(navigation2) cannot give way to other divs . How can I clear the other divs? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Template 8</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color:#981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#navigation2{background:#CC33FF}
div#extra{background:#FF8539}
div#extra2{background:#996633}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-150px}
div#navigation2{float:left;width:150px;margin:170px 0 0 -150px}
div#extra{float:left;width:150px;margin-left:-700px}
div#extra2{float:left;width:150px;margin:170px 0 0 -700px}
div#footer{clear:left;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>website name</h1>
</div>
<div id="wrapper">
<div id="content">
<p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
<p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>
<p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very column long make </p>
</div>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long fillercolumn fill fill very silly column silly silly fill fill long filler column fill fill very silly column silly silly fill fill long filler column fill fill very silly column silly silly fill fill long filler </p>
</div>
<div id="navigation2">
<p><strong>5) Cannot clear above div (id=Navigation).</strong> cannot clear above div, this div should be below the div NAVIGATION</p>
</div>
<div id="extra">
<p><strong>3) More stuff here.</strong> column long make silly silly filler silly very very very long column filler fill make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very filler silly long long column fill silly column very filler silly long long column fill silly column very filler silly long long column fill silly column very filler silly long long column fill silly column very </p>
</div>
<div id="extra2">
<p><strong>4) Cannot clear above div (id=EXTRA).</strong> cannot clear above div, this div should be below the div EXTRA </p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
</html>
I'm using float:left for my left nav bar, and then clear:both for my footer. Trouble is, I need to use some content boxes that will be using floats and then clears, however, when I use clear:both in my content box, it clears EVERYTHING (meaning it pushes below my navbar, because the navbar is quite long). Is there a workaround or am I using floats/clear wrong? TIA Javashackgirl I'm trying to get a container div to stretch to the size of it's contents. Note, #navigation and #title will be for aesthetics only and aren't being used yet. Am I wrong in thinking that the clear has to go in the containing div, not the component divs? Anyway, I've tried both and neither works. I have: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>My Blog</title>
</head>
<body>
<div id="title">
<!-- title -->
</div>
<div id="navigation">
<!-- search -->
<!-- jumpbox -->
<!-- subscription_and_rss_images -->
</div>
<div style="border:3px solid red; clear:both">
<div class="leftcolumn" style="border:3px solid green;">
<!-- menu --> <!-- leave this tag in for menu in Admin CP -->
<!-- referrers -->
<!-- photo -->
<!-- calendar -->
<!-- baby -->
</div>
<div class="rightcolumn" style="border:3px solid blue;">
<!-- content -->
</div>
</div>
<div style="border:3px solid yellow;">
<!-- credit -->
</div>
</body>
</html>
And CSS: Code: div.leftcolumn{
float: left;
width: 200px;
}
div.rightcolumn{
position: relative;
margin-left: 205px;
padding-left: 5px;
border-left: 1px solid #222222;
}
This produces: I've got a div that incorporates some inline styling. Looks fine on a blank page, but when I insert it into a more complex page it inherits all the styling of the stylesheets. Is there anyway to I can have this div ignore all inherited styling and just format itself according to browser defaults and its own inline styling? 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 Does anyone know why the clear: left isn't working on firefox 1.0 on this page. Generic Page with floating divs and then clearing them for a new line. http://section31.us/temp/float_boxes.html Am I doing something wrong or is this a bug? I finally got the alpha loader to work.. and, my transparent PNG files work great as a background in IE - I even have a page that loads many links for using Lightbox.. and, it works great. But.. now.. in Firefox and Safari.. I don't have a background.. it is crystal clear.. *Gulp* Can anybody help me? I can't figure out how to clear the float for the columns with the text column 1 and 2. If the other columns dont have a lot of text then the footer defaults to just under the image so where that 1+2 start. Any ideas plase? Code: <div id="container">
<div id="home_col_1">
<img src="images/holder_slideshow.png" alt="" width="446" height="365" />
<div id="home_col_1_1">
column 1<br />
column 1<br />
column 1<br />
column 1<br />
column 1
</div>
<div id="home_col_1_2">
<p> column 2</p>
<p>column 2</p>
<p>column 2</p>
<p>column 2</p>
<p>column 2</p>
</div>
</div>
<div id="home_col_2">
<p>column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3</p>
</div>
<div id="home_quicksearch">
Search Box Here
</div>
<div id="home_col_3">
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
<p>column 4</p>
</div>
<div id="home_col_4">
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
<p>column 5</p>
</div>
<div class="clear_floats"></div>
</div>
Code: #container { width: 986px; margin:0 auto; }
#home_col_1 { width:446px; height:365px; float:left; }
#home_col_1_1 { width:207px; float:left; padding:0 10px 0 0; border-right:#CECECE 1px solid; margin-top:10px; }
#home_col_1_2 { width:207px; float:left; padding:0 10px 0 10px; border-right:#CECECE 1px solid; margin-top:10px; }
#home_col_2 { width:171px; float:left; padding:10px 10px 0 10px; border-right:#CECECE 1px solid; }
#home_col_3 { width:165px; float:left; padding:0 10px; border-right:#CECECE 1px solid; }
#home_col_4 { width:142px; float:left; padding:0 10px; }
#home_quicksearch { width:328px; padding:10px 10px 10px 0; float:left; border-bottom:#CECECE 1px solid; margin:0 0 10px 10px;
background-color:#FFFFFF; }
#footer { width: 966px; margin:0 auto; padding:10px; margin-top:10px; border-top:#CECECE 1px solid; }
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 Hi again , I've got one more question: when you've used a 2 or 3-col layout for your webpage (the right, possibly the middle col holds the actual content, the others are floating divs used as menus), you can no more use the clear property for the actual content? Because it clears the space until all floating elements ends - including menus , so it finally looks like here. Here are CSS used for this page: CSS_1 (used for the fotogallery only) and CSS_2 (used mainly for layout of the web). I think there is a solution, I've already thought it can be found on BonRouge's pages (very useful pages by the way), but he made the menu using absolute positioning . So has anyone any idea how to solve this? And maybe one more detail: can be pictures in this fotogallery centered in their parent <div> (red bordered)? They're all floating, so it's not so easy, if possible. Oh man, rebuild these pages without tables, it really drives me mad... |
|||||||