homepage Welcome to WebmasterWorld Guest from 23.20.19.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
wrapper footer clear:both;
VividDreamer




msg:3856934
 8:10 pm on Feb 24, 2009 (gmt 0)
I am using a footer and wrapper on my page but for some reason the footer or wrapper doesn't want to keep all of my div contained...they just overflow...instead of the wrapper growing. I used height auto but that doesn't work. Also the only way I make the wrapper work is by using clear both.

<!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 name="GENERATOR" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta name="DESCRIPTION" content="FREE WEB TUTORIALS" />
<meta name="KEYWORDS" content="HTML,CSS,XML,JAVASCRIPT" />
<meta name="AUTHOR" content="HEGE REFSNES" />
<meta http-equiv="CONTENT-TYPE" content="TEXT/HTML; charset=utf-8" />
<title>CSS Sample</title>
<style type="text/css">

BODY {
background-color : rgb(50, 50, 50) !important ;
background-position : center center;
background-repeat : no-repeat;
background-attachment : fixed;
}
DIV.WRAPPER {
color : rgb(255, 255, 255) !important ;
background-color : rgb(255, 255, 255) !important ;
background-position : center center;
background-repeat : no-repeat;
background-attachment : fixed;
border-color : rgb(0, 0, 0) !important ;
border-style : double;
border-width : 3px;
width : 800px;
margin : 10px auto 10px auto;
padding : 5px 5px 5px 5px;
}
DIV.HEADER {
color : rgb(255, 255, 255) !important ;
background-color : rgb(0, 0, 0) !important ;
background-position : center center;
background-repeat : no-repeat;
background-attachment : fixed;
border-color : rgb(255, 255, 255) !important ;
border-style : double;
border-width : 3px;
float : none;
position : relative;
width : auto;
height : 200px;
margin : 0 0 5px 0;
padding : 0 0 0 0;
visibility : visible !important ;
}
DIV.NAVIGATION {
color : rgb(255, 255, 255) !important ;
background-color : rgb(0, 0, 0) !important ;
background-position : center center;
background-repeat : no-repeat;
background-attachment : fixed;
border-color : rgb(255, 255, 255) !important ;
border-style : double;
border-width : 3px;
float : none;
position : relative;
width : auto;
height : 30px;
margin : 0 30px 5px 30px;
padding : 0 0 0 0;
visibility : visible !important ;
}
DIV.MAINBLOCK {
color : rgb(255, 255, 255) !important ;
background-color : rgb(0, 0, 0) !important ;
background-position : center center;
background-repeat : no-repeat;
background-attachment : fixed;
border-color : rgb(255, 255, 255) !important ;
border-style : double;
border-width : 3px;
float : none;
position : relative;
width : auto;
height : 400px;
margin : 0 0 5px 0;
padding : 0 0 0 0;
visibility : visible !important ;
}
DIV.LEFTBLOCK {
color : rgb(255, 255, 255) !important ;
background-color : rgb(0, 0, 0) !important ;
background-position : center center;
background-repeat : no-repeat;
background-attachment : fixed;
border-color : rgb(255, 255, 255) !important ;
border-style : double;
border-width : 3px;
float : left;
position : relative;
width : 583px;
height : auto;
margin : 0 5px 5px 0;
padding : 0 0 0 0;
visibility : visible !important ;
}
DIV.RIGHTBLOCK {
color : rgb(255, 255, 255) !important ;
background-color : rgb(0, 0, 0) !important ;
background-position : center center;
background-repeat : no-repeat;
background-attachment : fixed;
border-color : rgb(255, 255, 255) !important ;
border-style : double;
border-width : 3px;
float : right;
position : relative;
width : 200px;
height : auto;
margin : 0 0 5px 0;
padding : 0 0 0 0;
visibility : visible !important ;
}
DIV.FOOTER {
color : rgb(255, 255, 255) !important ;
background-color : rgb(255, 255, 255) !important ;
background-position : center center;
background-repeat : no-repeat;
background-attachment : fixed;
border-color : rgb(0, 0, 0) !important ;
border-style : double;
border-width : 3px;
clear : both;
position : relative;
width : auto;

margin : 0 0 0 0;
padding : 5px 5px 5px 5px;
visibility : visible !important ;
}
DIV.FOOTERMAINBLOCK {
color : rgb(255, 255, 255) !important ;
background-color : rgb(255, 0, 0) !important ;
background-position : center center;
background-repeat : no-repeat;
background-attachment : fixed;
border-color : rgb(255, 255, 255) !important ;
border-style : none;
border-width : 3px;
float : none;
position : relative;
width : auto;
height : 10px;
margin : 0 0 0 0;
padding : 5px;
visibility : visible !important ;
}
DIV.FOOTERUPPERLEFTBLOCK {
color : rgb(255, 255, 255) !important ;
background-color : rgb(0, 255, 255) !important ;
background-position : center center;
background-repeat : no-repeat;
background-attachment : fixed;
border-color : rgb(255, 255, 255) !important ;
border-style : none;
border-width : 3px;
font-family : verdana;
font-weight : normal;
font-style : normal;
font-size : 16px;
text-align : left;
text-decoration : none;
text-indent : 0;
text-transform : none;
float : left;
width : 377px;
height : 10px;
margin : 0 0 0 0;
padding : 5px 5px 5px 5px;
position : relative;
visibility : visible !important ;
}
DIV.FOOTERUPPERRIGHTBLOCK {
color : rgb(255, 255, 255) !important ;
background-color : rgb(255, 255, 0) !important ;
background-position : center center;
background-repeat : no-repeat;
background-attachment : fixed;
border-color : rgb(255, 255, 255) !important ;
border-style : none;
border-width : 3px;
float : right;
position : relative;
text-align : right;
width : 377px;
height : 10px;
margin : 0 0 0 0;
padding : 5px 5px 5px 5px;
visibility : visible !important ;
}
DIV.FOOTERLOWERLEFTBLOCK {
color : rgb(255, 0, 0) !important ;
background-color : rgb(255, 0, 0) !important ;
background-position : center center;
background-repeat : no-repeat;
background-attachment : fixed;
border-color : rgb(255, 255, 255) !important ;
border-style : none;
border-width : 3px;
float : left;
position : relative;
width : 377px;
height : 10px;
margin : 0 0 0 0;
padding : 5px 5px 5px 5px;
visibility : visible !important ;
}
DIV.FOOTERLOWERRIGHTBLOCK {
color : rgb(255, 255, 255) !important ;
background-color : rgb(0, 0, 255) !important ;
background-position : center center;
background-repeat : no-repeat;
background-attachment : fixed;
border-color : rgb(255, 255, 255) !important ;
border-style : none;
border-width : 3px;
float : right;
position : relative;
width : 377px;
height : 10px;
margin : 0 0 0 0;
padding : 5px 5px 5px 5px;
visibility : visible !important ;
}
H1 {
color : rgb(255, 0, 0) !important ;
font-family : verdana;
font-weight : normal;
font-style : normal;
font-size : 16px;
text-align : center;
text-decoration : none;
text-indent : 0;
text-transform : none;
}
H2 {
color : rgb(0, 255, 0) !important ;
font-family : verdana;
font-weight : normal;
font-style : normal;
font-size : 14px;
text-align : center;
text-decoration : none;
text-indent : 0;
text-transform : none;
}
H3 {
color : rgb(255, 255, 255) !important ;
font-family : verdana;
font-weight : normal;
font-style : normal;
font-size : 10px;
text-align : center;
text-decoration : none;
text-indent : 0;
text-transform : none;
}
P {
color : rgb(255, 255, 255) !important ;
font-family : verdana;
font-weight : normal;
font-style : normal;
font-size : 10px;
text-align : justify;
text-decoration : none;
text-indent : 15px;
text-transform : none;
}
A:active, A:visited, A:link, A.REDLNIK:active, A.REDLINK:visited, A.REDLINK:link, A.NAVBAR:active, A.NAVBAR:visited, A.NAVBAR:link, A.TEXT:active, A.TEXT:visited, A.TEXT:link {
color : rgb(255, 0, 255) !important ;
font-family : verdana;
font-weight : normal;
font-style : normal;
font-size : 8px;
text-align : center;
text-decoration : none;
text-indent : 0;
text-transform : none;
}
A:hover, A.REDLINK:hover, A.NAVBAR:hover, A.TEXT:hover {
color : rgb(255, 255, 255) !important ;
font-family : verdana;
font-weight : normal;
font-style : normal;
font-size : 8px;
text-align : center;
text-decoration : underline;
text-indent : 0;
text-transform : none;
}
HR {
border-color : rgb(255, 255, 255) !important ;
border-style : solid;
border-width : 1px;
width : 80%;
}
UL {
display : inline;
}
LI {
display : inline;
}

</style>
</head>
<body>

<div class="WRAPPER">

<div class="HEADER"></div>

<div class="NAVIGATION"></div>

<div class="MAINBLOCK"></div>

<div class="LEFTBLOCK"></div>

<div class="RIGHTBLOCK"></div>

<div class="FOOTER">

<div class="FOOTERMAINBLOCK"></div>

<div class="FOOTERUPPERLEFTBLOCK"></div>

<div class="FOOTERUPPERRIGHTBLOCK"></div>

<div class="FOOTERLOWERLEFTBLOCK"></div>

<div class="FOOTERLOWERRIGHTBLOCK"></div>

</div>

</div>

</body>
</html>

 

suede1976




msg:3856944
 8:27 pm on Feb 24, 2009 (gmt 0)

try overflow:auto on the wrapper.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved