Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Aug 2004
    Posts
    143
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Inman Position Clearing Problem

    Hey guys,

    Trying to use the Inman position clearing method to get my footer to drop down but I can't seem to get it to work. Can somebody take a look at my site and tell me what is wrong? Code also below

    fairway.a-lantech.com

    HTML:
    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=iso-8859-1" />
    <title>Welcome to Fairway Floor and Design Center</title>
    <link href="layout.css" rel="stylesheet" type="text/css" />
    <link href="color.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="branding">
    <a href="index.html"><h1>Fairway Floor</h1></a>
    <h2>Abby Carpet</h2>
    </div>
    <div id="nav_main">
    <ul id="nav_links">
    <!-- Removed for spacing reasons -->
    <li id="nav_home"><a href="#">Home</a></li>
    <li id="nav_about"><a href="#">About Us</a></li>
    <li id="nav_staff"><a href="#">Our Staff</a></li>
    <li id="nav_brands"><a href="#">Major Brands</a></li>
    <li id="nav_choice"><a href="#">Right Choice</a></li>
    <li id="nav_carpet"><a href="#">Carpet</a></li>
    <!-- <li id="nav_contact"><a href="#">Contact Us</a></li> -->
    </ul>
    <ul id="nav_sub">
    <li id="abby_carpet"><a href="http://www.abbeycarpet.com" target="_blank">Visit Abbey Carpets</a></li> 
    <li>|</li>
    <li id="host_cleaning"><a href="http://www.hostcarpetcleaning.com" target="_blank">Visist Host Carpet Cleaning</a></li>
    </ul>
    </div>
    <div id="content" class="c clear_children">
    <div id="content_main" class="pc cc_tallest">
    <h2>Cool Summer Savings at Fairway Floor</h2>
    <p>Let the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you wantLet the staff at fairway Floor help you with all of your flooring needs. We'll help you find what you're looking for fast and easy, Or, if you'd like, we can help you design the custom look you want.</p><br />
    <p>Come on in and see why we are the #1 choice for quick and easy one stop shopping for Homeowners and Contractors alike.</p>
    </div>
    <div id="content_sub" class="sc">
    <ul id="content_sub_ul">
    <li>Carpet</li>
    <li>Vinyl</li>
    <li>Ceramic Tile</li>
    <li>Wood Floors</li>
    <li>Window and Wall Treatments</li>
    <li>Laminate Flooring</li>
    </ul>
    </div>
    </div>
    <!--
    <div id="cards_credit">
    <ul id="cards_list">
    <li id="cards_discover">Discover Card</li>
    <li id="cards_visa">Visa Card</li>
    <li id="cards_mc">Master Card</li>
    </ul>
    </div>
    <h3>Currency Converter</h3>
    <ul>
    <li>Fairway Floor</li>
    <li>4065 E. 16th</li>
    <li>Post Falls, ID 83854</li>
    </ul>
    -->
    <p>Copyright (C) 2006 Fairway Floor Design Center</p>
    <p>Website Designed by: <a href="http://www.a-lantech.com" target="_blank">A-LanTech Computers</a></p>
    <script type='text/javascript' src="si-clear-children.js"></script>
    </body>
    
    </html>
    CSS1
    Code:
    /* Normalizing margin, padding */
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, input, p, blockquote, th, td
    { margin : 0; padding : 0; }
    
    /* Normalizes font-size for headers */
    h1, h2, h3, h4, h5, h6 
    { font-size : 100% }
    
    /* Removes list-style from lists */
    ol, ul
    { list-style : none; }
    
    /* Normalizes font-style and font-weight to normal */
    address, caption, cite, code, dfn, em, strong, th, var
    { font-style : normal; font-weight : normal; }
    
    /* Remove list-styles from lists */
    table
    { border-collapse : collapse; border-spacing : 0; }
    
    /* Removes border from fieldset and img */
    fieldset, img 
    { border : 0; }
    
    /*Left-aligns text in caption and th */
    caption, th 
    { text-align : left; }
    
    /* Removes quotation marks from q */
    q:before, q:after
    { content : ''; }
    
    /*footer fix*/
    .clear_children,.cc_tallest { position: relative; } /*\*/* html .clear_children { display: inline;}/**/
    .cc_tallest:after { content: ''; } /* PREVENTS A REDRAW BUG IN SAFARI */
    
    
    html {
    	text-align: center;
    }
    
    body {
    	width: 800px;
    	padding-top: 35px;
    	text-align: left;
    	margin-top: 0px;
    	position: relative;
    	margin-right: auto;
    	margin-bottom: auto;
    	margin-left: auto;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    }
    
    
    #branding {
    	width: 100%;
    	height: 167px;
    }
    ul#nav_links li {
    	display: inline;
    }
    ul#nav_links {
    	position: absolute;
    	top: 0px;
    	left: 200px;
    	margin: 0px;
    	height: 40px;
    }
    li#nav_home a, li#nav_about a, li#nav_brands a, li#nav_staff a, li#nav_choice a, li#nav_carpet a, li#nav_contact a {
    	height: 30px;
    	width: 99px;
    	display: block;
    	float: left;
    	text-align: center;
    	padding-top: 10px;
    	padding-bottom: 0px;
    	border-left-width: 1px;
    	border-left-style: solid;
    	text-decoration: none;
    }
    
    div#nav_main {
    	position: relative;
    	height: 40px;
    }
    ul#nav_sub {
    	position: absolute;
    	top: -167px;
    	right: 0px;
    	padding-right: 10px;
    }
    
    #branding h1 {
    	background-image: url(images/fairwaylogo.png);
    	background-repeat: no-repeat;
    	width: 220px;
    	text-indent: -9999px;
    	position: relative;
    	top: -18px;
    	z-index: 10;
    	left: -20px;
    	height: 185px;
    }
    div#content_sub {
    	width: 190px;
    	position: absolute;
    	padding-top: 1em;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 10px;
    	left: 600px;
    }
    div#content {
    	position: relative;
    	width: 100%;
    }
    
    ul#nav_sub li {
    	display: inline;
    	font-size: 10px;
    }
    
    div#content_main {
    	width: 600px;
    	left: 0%;
    	position: absolute;
    	padding-top: 1em;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    }
    li#nav_home a:hover, li#nav_about a:hover, li#nav_brands a:hover, li#nav_staff a:hover, li#nav_choice a:hover, li#nav_carpet a:hover, li#nav_contact a:hover {
    	border-left-width: 1px;
    	border-left-style: solid;
    	text-decoration: none;
    }
    ul#nav_sub li a {
    	text-decoration: none;
    }
    ul#nav_sub li a:hover {
    	text-decoration: underline;
    }
    ul#cards_credit {
    	position: absolute;
    	top: 10px;
    }
    CSS2:
    Code:
    #branding {
    	background-color: #382159;
    }
    
    body {
    	background-color: #F0F5FA;
    }
    div#nav_main {
    	background-color: #5582A7;
    }
    li#nav_home a, li#nav_about a, li#nav_brands a, li#nav_staff a, li#nav_choice a, li#nav_carpet a, li#nav_contact a {
    	border-top-color: #666666;
    	border-right-color: #666666;
    	border-bottom-color: #666666;
    	border-left-color: #666666;
    	text-decoration: none;
    	color: #FFFFFF;
    }
    ul#nav_sub li a {
    	color: #FFF;
    }
    
    li#nav_home a:hover, li#nav_about a:hover, li#nav_brands a:hover, li#nav_staff a:hover, li#nav_choice a:hover, li#nav_carpet a:hover, li#nav_contact a:hover {
    	display: block;
    	text-align: center;
    	text-decoration: none;
    	border-right-color: #666666;
    	border-left-color: #666666;
    	background-color: #CDC7D5;
    	color: #000000;
    }
    ul#nav_sub li {
    	color: #fff;
    }
    Thanks!

    Mita

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Hi MitaDC

    I'm not sure I can help you with this one as I have not tried this method.

    Anyway, I tried to save your page and the script wasn't there! Maybe a silly question, but are you sure have the script you are linking to?
    Code:
    <script type='text/javascript' src="si-clear-children.js"></script>

  • #3
    Regular Coder
    Join Date
    May 2006
    Posts
    290
    Thanks
    6
    Thanked 14 Times in 14 Posts
    I could be wrong but I dont see why you need to use javascript just to have the footer drop down to the bottom of the page?

    Why not wrap the main body and the footer in seperate div tags then just add a clear: both; to the main body tag so that the footer will always be below it?

    -trigger

  • #4
    Regular Coder
    Join Date
    Aug 2004
    Posts
    143
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the link for what I am trying to do:
    http://www.shauninman.com/post/heap/...nline_absolute

    I tried clear : both but it doesn't work, I'm thinking because I am using absolute positioning.

    There isn't a JS file that it really links to which confused me, but I downloaded the source from the above link and in his examples there's not a JS file either, just the link for one??

    Anyways, thanks guys, will keep looking for a solution

  • #5
    Regular Coder
    Join Date
    Aug 2004
    Posts
    143
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Found the JS file for it, still not working for me though :S

  • #6
    New to the CF scene
    Join Date
    Jan 2007
    Location
    Austin
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey I'm having the same problem...
    Did you ever figure out what wasn't working with the .js file?
    I got this tip out of the "Transcending CSS" book by Andy Clarke and am wondering what we're doing wrong; my footer's still bonkers.

  • #7
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Mita

    I also got the Inman position clearing tip out of Transcending CSS.
    I might be wrong, but could this line be missing in your CSS1 footer fix?

    Code:
    .pc,.sc{ position: absolute; top 0; left 0;}
    Mineral

  • #8
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Having the same problem, has anyone found the fix?

    I am also trying to use the Inman position clearing fix, that I learned from transcending CSS by Andy Clarke, I also looked at the example page and linked code at http://www.shauninman.com/post/heap/...nline_absolute and cannot get my footer to drop as is says it should be doing. I do not have this online, only on my local machine, so I can't provied a URL, sorry. I've placed the code in <pre> tags in hopes this form will take it so you can see the code and help me out. I appreciate any help you can be at pointing out my miscode.


    <pre>
    <!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>
    <link rel="stylesheet" type="text/css" href="included/stylesheet/canaNEW-stylesheet.css" />
    <!-- metadata -->
    <title>Chico Avenues Neighborhood Association (CANA) - Home</title>
    </head>

    <body id="CANA">

    <!-- 1. Branding -->
    <div id="branding">
    <h1>Chico Avenues Neighborhood Association (CANA)</h1>
    <blockquote>Help us work to improve the quality of life in our community, and enhance one of Chico's classic neighborhoods!</blockquote>

    <p id="greeting">Welcome</p><!-- Welcome Back Message -->
    </div>

    <div id="content" class="clear_children">
    <!-- 2. Navigation -->

    <div id="nav_main">
    <h2>Site Navigation</h2>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Plan</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Meetings</a></li>
    <li><a href="#">PhotoGallery</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Board</a></li>
    </ul>
    </div>

    <!-- 3. Content -->
    <div id="content_main" class="cc_tallest">
    <h1>Chico Avenues Neighborhood Association (CANA)</h1>
    <p>Help us work to improve the quality of life in our community, and enhance one of Chico's classic neighborhoods!</p>

    <h2>Mission Statement</h2>
    <p>The Mission of the Chico Avenues Neighborhood Association is to:</p>
    <ul>
    <li>Protect and enhance the livability and historic character of the neighborhood;</li>
    <li>Promote communication and coordination with governmental, private, and public entities to strengthen our neighborhood;</li>
    <li>Provide a forum for and to be a catalyst for the discussion of neighborhood and community planning issues;</li>
    <li>Serve as an educational vehicle by communicating pertinent issues to the residents of the neighborhood; and</li>
    <li>Maintain and improve a sense of pride and identity in the community.</li>
    </ul>
    <p>Read a copy of the organization's <a href="resources/Bylaws.pdf">Bylaws</a> and <a href="resources/IncorporationArticles.pdf">Articles of Incorporation</a>.</p>

    <h2>CANA Boundries</h2>
    <p>The Association spans the neighborhood that is enclosed by the following boundaries:</p>
    <ul>
    <li>The North side of Big Chico Creek,</li>
    <li>The South side of Lindo Channel,</li>
    <li>The West side of Mangrove Avenue, and</li>
    <li>The East side of the Union Pacific Railroad tracks, within the City of Chico, CA.</li>
    </ul>
    <p>See a map of the Chico Avenues Neighborhood Association boundaries:</p>
    <p><a href="CANAmap.asp"><img src="images/AVASC_Coverage_small.jpg" alt="map of Chico Avenues Neighborhood Association boundaries" /></a></p>
    </div>
    </div>

    <!-- 4. Footer -->
    <div id="site_footer">
    <h4><a href="#CANA" title="top of the page">CANA</a></h4>
    <p><a href="mailto:sjo022669@yahoo.com?subject=CANA web site">Contact the Webmaster</a></p>
    </div>

    <script type="text/javascript" src="si-clear-children.js"></script>
    </body>
    </html>
    </pre>

    <pre>
    @import url(color.css);

    /* Begin Normalization */

    /* Normalize Margins, padding */
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td{
    margin: 0; padding: 0;
    }

    /* Normalize font-size for headers */
    h1, h2, h3, h4, h5, h6{
    font-size: 100%;
    }

    /* Normalize list-style from lists */
    ol, ul{
    list-style: none;
    }

    /* Normalize font-style and font-weight */
    address, caption, cite, code, dfn, em, strong, b, th, var{
    font-style: normal; font-weight: normal;
    }

    /* Normalize list-style */
    table{
    border-collapse: collapse; border-spacing: 0;
    }

    /* Normalize border on fieldset and img */
    fieldset, img{
    border: 0;
    }

    /* Normalize text in caption and th by left-align */
    caption, th{
    text-align: left;
    }

    /* Normalize quotation marks from q */
    q:before, q:after{
    content: '';
    }

    /* End Normalization */


    html{
    text-align: center;
    }

    body{
    position: relative;
    width: 770px;
    margin: 0 auto;
    text-align: left;
    }

    div#content{
    position: relative;
    width: 100%;
    }

    div#nav_main{
    position: absolute;
    left: 0;
    width: 30%;
    }

    div#content_main{
    position: absolute;
    left: 30%;
    width: 70%;
    }


    div#branding, div#nav_main, div#site_footer{
    width: 100%;
    }

    /* =si_clear_children */
    .pc, .sc{position: absolute; top: 0; left: 0;}
    .clear_children, .cc_tallest { position: relative; } /*\*/* html .clear_children { display: inline;}/* PREVENTS MISSING CHILDREN IN IE WIN 5.0 */
    .cc_tallest:after { content: ''; } /* PREVENTS A REDRAW BUG IN SAFARI */
    </pre>

    <pre>
    html{
    background-color: #708090;
    }

    body{
    padding-top: 50px;
    }

    div#branding{
    height: 200px;
    background: transparent url(../../images/mockheaderbackgroundtemplat.jpg) no-repeat 0 0;
    }

    div#branding h1{
    font-size: 2em;
    text-align: center;
    margin-top: 75px;
    font-style: italic;
    }

    div#branding blockquote{
    position: absolute;
    top: -9999px;
    }

    p#greeting{
    position: relative;
    top: 15px;
    left: 40px;
    margin: 0;
    font-weight: bold;
    font-style: italic;
    }

    div#content{
    background-color: #fff;
    }

    div#nav_main{
    position: relative;
    z-index: 1;
    height: 400px;
    background: transparent url(../../images/IMG_01962.JPG) no-repeat 0 0;
    }

    div#nav_main h2{
    position: absolute;
    top: -9999px;
    }

    ul#nav_left{
    position: absolute;
    top: 3px;
    left: 28px;
    margin: 0;
    width: 460px;
    }

    ul#nav_left li a{
    font-weight: bold;
    margin-right: 10px;
    padding-right: 10px;
    }

    div#site_footer{
    position: relative;
    width: 100%;
    height: 20px;
    background: white;
    }

    div#site_footer p{
    text-align: right;
    font-size: .75em;
    }

    /*
    div#content h1{
    position: absolute;
    top: -60px;
    left: -80px;
    width: 588px;
    height: 253px;
    background: transparent url(../../images/chico_mall.jpg) no-repeat;
    text-indent: -9999px;
    }
    */
    </pre>
    Attached Files Attached Files

  • #9
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi there.

    I couldnīt read the whole thread, but want to write how I fixed the absolute positiong.
    As I wrote i had the tip from Transcending CSS, but it didnīt quite work for me.

    Here how i solved it, maybe it will help someone.

    CSS
    Code:
    /* =si_clear_children*/
    .pc,.sc { position: absolute; top: 0; left: 0;} 
    .pc	{ width: 50%; left: 0; } 
    .sc	{ width: 50%; left:50%;}
    
    .clear_children,.cc_tallest { position: relative; } /*\*/* html .clear_children { display: inline;}/**/
    .cc_tallest:after { content: ''; } /* PREVENTS A REDRAW BUG IN SAFARI */
    
    #content{
    position:relative;
    width: 100%;
    }
    #content_main{}
    #content_sub{}
    html
    Code:
    <div id="content" class="c clear_children">
       <div id="content_main" class="pc cc_tallest">
       </div>
       <div id="content_sub" class="sc">
       </div>
    </div>
    and the script before the closing body tag.
    This example will seperate the content into 50:50% divs.

    Against the article in the book, I left the CSS in content_main and content_sub empty, and thenceforward it worked. The id css only needed for further padding etc.

  • #10
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Mineral,

    Thanks for posting your solution. That worked for me as well.

  • #11
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Almost worked for me

    Quote Originally Posted by mineral View Post
    Hi there.

    I couldnīt read the whole thread, but want to write how I fixed the absolute positiong.
    As I wrote i had the tip from Transcending CSS, but it didnīt quite work for me.

    Here how i solved it, maybe it will help someone.

    CSS
    Code:
    /* =si_clear_children*/
    .pc,.sc { position: absolute; top: 0; left: 0;} 
    .pc	{ width: 50%; left: 0; } 
    .sc	{ width: 50%; left:50%;}
    
    .clear_children,.cc_tallest { position: relative; } /*\*/* html .clear_children { display: inline;}/**/
    .cc_tallest:after { content: ''; } /* PREVENTS A REDRAW BUG IN SAFARI */
    
    #content{
    position:relative;
    width: 100%;
    }
    #content_main{}
    #content_sub{}
    html
    Code:
    <div id="content" class="c clear_children">
       <div id="content_main" class="pc cc_tallest">
       </div>
       <div id="content_sub" class="sc">
       </div>
    </div>
    and the script before the closing body tag.
    This example will seperate the content into 50:50% divs.

    Against the article in the book, I left the CSS in content_main and content_sub empty, and thenceforward it worked. The id css only needed for further padding etc.

    Looks like where all reading the same book.

    The solution from mineral worked for me except now the content_main div is pushing the content_sub div down below the last line of the content_main text as if it were inline, but just moved to the right half. Am I missing something?

    Fortunately the particular site I am working is fairly aesthetically pleasing when the content div is set to a specific height, but I'd like a more dynamic solution.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •