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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Always visible footer?

    Hello everyone.

    I'm trying to make a footer that would be always visible at the bottom of the page, with the content scrolling behind it.
    The problem is that inside the footer I want to have logo floated to the left, and navigation floated to the right that wouldn't overlap when the window is resized.

    With 'position: fixed' I lose the navigation when I resize the window, and min-width doesn't work for some reason.

    'position: absolute' doesn't work either, the footer floats somewhere around the middle of the page when resized.

    I don't even remember how many variations I've tried with max and min height and width, negative margins, padding etc.

    The only solutions I found online were for the footer sticking to the bottom of the page, and not the window, and those using 'position: fixed'.

    If anyone has any idea how to resolve this, it would be much appreciated.

  • #2
    New to the CF scene
    Join Date
    Jul 2011
    Location
    Tokyo, Japan
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    maybe

    The only way you can achieve a floating footer that works in most browsers is to use js....

    I found something here http://www.dynamicdrive.com/dynamici.../stayontop.htm
    might help you...
    I used it to create the footer on my page tokyodesignpop.com

    I still need to tweak it a bit, but it should be ok for what you need...

    To keep the content on the inside from over lapping just create 2 divs one using float:left and the other using float:right. Not sure if it is the best way but it seems to work for me!

    good luck

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    another solution is using iframes, however
    position: fixed; with a z-index is definetly the best method

    post your current script so that the problem can be detected. there should be no reason this doesn't work. if possible, upload to a server

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for taking the time to reply.

    tokyodesignpop, I've tried it, and it still jumbles up when I resize it, even when I float the divs left and right and put in a min-width.

    sammy12, when I set the position to fixed, it doesn't scroll, and navigation dissapears, and when I set it to absolute, it floats in the middle of the resized window..

    Here's the code. I hope this sheds some light.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    
    <link rel="stylesheet" type="text/css" href="layout.css">
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    
    <title>CQ</title>
    
    <script type="text/javascript">
    
    $(document).ready(function() {
    
    	//bubble text
    	$('img.bubble').fadeIn(3000, function() {
    		$('p.yes').fadeIn(700).delay(3000).fadeOut(100, function () {
    			$('p.ablimp').delay(1000).fadeIn(500).delay(3000).fadeOut(200, function () {
    				$('p.dontknow').delay(2500).fadeIn(900).delay(4000).fadeOut(1000, function() {
    					$('img.bubble').fadeOut(600)
    				});
    			});
    		});
    	});
    });	
    </script>
    
    <link rel="shortcut icon" href="favicon.ico" >
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META name="description" content="CQ Web Design & Development Studio">
    <META name="keywords" content="">
    </head>
    <body>
    
    <!------ PAGE ------>
    
    <div id="page">
    	<div id="bubble">
    		<img src="images/bubble.png" alt="CQ web design" class="bubble">
    		<p class="yes">yes.</p>
    		<p class="ablimp">a blimp.</p>
    		<p class="dontknow">I don't <br>know...</p>
    	</div>	
    	<img src="images/blimp.png" alt="CQ web design" class="blimp">
    </div>
    
    
    <!------ FOOTER ------>
    
    <div id="footer">
    	<div id="logo">
    		<img src="images/stars.png" alt="CQ web design">
    		<h1>CQ</h1>
    	</div>	
    		
    	<div id="slogan">
    		<h2>some slogan<br>
    		or other</h2>
    	</div>
    
    	<div id="navigation">
    		<img src="images/navigation.png" alt="navigation">
    	</div>			
    </div>
    
    </body>
    </html>
    Code:
    /*------- reset & wrap -------*/
    * {
    	vertical-align: baseline;
    	font-size: 100%;
    	border: 0 none;
    	outline: 0;
    	padding: 0;
    	margin: 0;
    }
    
    html {
    	width: 100%;
    	min-width: 1000px;
    	background: url(images/html.jpg) repeat-x #fff;
    }
    
    body {
    	width: 100%;
    	min-width: 1000px;
    }
    
    /*------- PAGE -------*/
    
    #page {
    	width: 100%;
    	min-width: 1000px;
    	z-index: 1;
    }
    
    #bubble {
    	text-align: center;
    	width: 7.5em;
    	height: 6.25em;
    	position: absolute;
    	margin: 5em 0em 0em 24em;
    	padding: 0.01em;
    	z-index: 99;
    }
    
    img.bubble {
    	position: relative;
    	z-index: 150;
    	display: none;
    }
    
    .blimp {
    	position: absolute;
    	margin: 9.7em 0em 0em 12.5em;
    }
    
    /*------- FOOTER -------*/
    
    #footer {
    	width: 99.9%;
    	min-width: 1000px;
    	height: 11.5em;
    	background: url(images/footer2.png);
    	position: fixed;
    	bottom: 0px;
    	left: 0px;
    	z-index: 9999;
    }
    
    #logo {
    	width: 6.1em;
    	height: 9.4em;
    	text-align: center;
    	background: #8a8a8b;
    	position: relative;
    	float: left;
    	padding: 0.5em 0.01em 0.01em 0.01em;
    	margin: 0em 0.5em 0em 2.5em; 
    	-moz-border-radius: 0.5em;
    	border-radius: 0.5em;
    	border: 0.12em solid #fff;
    }
    
    #slogan {
    	width: 35%;
    	min-width: 10em;
    	background: url(images/dot.png) repeat-x;
    	position: relative;
    	float: left;
    	margin-top: 6.45em;
    	padding-top: 0.45em;
    }
    
    #navigation {
    	width: 33em;
    	height: 7em;
    	position: relative;
    	float: right;
    	margin: 2.8em 10em 0em 0em;
    }
    
    /*------- TYPE -------*/
    
    
    /*------- reset -------*/
    
    * {
    	vertical-align: baseline;
    	font-weight: normal;
    	text-decoration: none;
    	font-size: 100%;
    	border: 0 none;
    	outline: 0;
    	padding: 0;
    	margin: 0;
    }
    
    p.yes{
    	font: 1.05em 'Harabara';
    	letter-spacing: 0.05em;
    	color: grey;
    	display: none;
    	margin: -3.3em 0em 0em 0.2em ;
    	position: relative;
    	z-index: 200;
    }
    
    p.ablimp{
    	font: 1.1em 'Harabara';
    	letter-spacing: 0.05em;
    	color: grey;
    	display: none;
    	position: relative;
    	padding: 0.01em;
    	margin: -3.1em 0 0 0.25em;
    	z-index: 300;
    }
    
    p.dontknow{
    	font: 1em 'Harabara';
    	letter-spacing: 0.05em;
    	line-height: 0.8em;
    	color: grey;
    	display: none;
    	padding: 0.01em;
    	margin: -3.6em 0 0 0.2em;
    	position: relative;
    	z-index: 400;
    }
    
    /*------- FOOTER type -------*/
    
    /*----- logo -----*/
    
    h1 {
    	font: 3em 'Harabara';
    	color: #fff;
    	letter-spacing: 0.02em;
    	padding: 0.16em 0.01em 0.01em 0.01em;
    }
    
    h2 {
    	font: 1.05em 'TitilliumMaps26l-1wt';
    	color: #f4f4f4;
    	line-height: 1em;
    	display: block;
    	float: left;
    }
    Last edited by shki; 07-24-2011 at 01:30 PM.

  • #5
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    thanks for replying, late me take a look

    try uploading it to a server if you can. here's what I'm getting



    in short, when you set the footer in %, elements are going to collapse, inless using a table. if you use px, then they wont. you will have to use a fluid layout on your footer, if you want to stop the collapse. you set the footer to 99% width, therefore everything inside will be based on a % of the screen. if the user minimizes, his screen size goes from for example 1800 to 1700 to 1600, therefore 99% is less and less. therefore if you set any elements within the footer that are px, they are slowly becoming to crowded.

    you set the navigation and logo to a width in px and the slogan to %. the width in px will be overcrowded. you either have to a) make the nav and logo with width % and/or use a liquid layout, or b) make the footer width a px measurement

    for more info on this issue http://coding.smashingmagazine.com/2...t-one-for-you/
    Last edited by Sammy12; 07-24-2011 at 06:56 PM.

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Hey dear,

    I have created a sample page for you. let me know if it is useful for you:

    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>Fixed Footer</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    #footer {
        position:fixed;
        display:block;
        bottom:0px;
        height:200px;
        width:100%;
        background:#999;
        padding:10px;
    }
    #footer .center{
        width:800px;
        margin:10px auto;
    }
    #footer #left1 {
        float:left;
        width:200px;
        height:100px;
        background:#5E82DF;
        border:1px solid #1E86A8;
    }
    #right1 {
        float:right;
        width:500px;
        overflow:auto;
        color:#FFF;
    }
    #right1 ul {
        list-style:none;
        font:bold 12px Verdana, Geneva, sans-serif;
        text-align:center;
        overflow:auto;
        height:1%
    }
    #right1 ul li a {
        display:block;
        width:80px;
        height:50px;
        color:#FFF;
        text-decoration:none;
        float:left;
    }
    </style>
    </head>
    
    <body>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <p>dsdsa rjwerj weklwer lj ejrkwer jkwekwerj rf sdfkjfkdfjl</p>
    <div id="footer"><div class="center">
      <div id="left1"></div>
      <div id="right1">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Home</a></li>
        </ul>
      </div>
    </div></div>
    </body>
    </html>

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sammy12, sorry about that, here's the link for that same thing.

    http://www.knjigovodja-online.com/CQ-test/index.html

    obviously, #navigation is a placeholder, and the rest of the content is going to go into the #page. I hope to get to that once this footer issue is resolved.

    I get the px/% problem now, and I tried turning it all into %, but I must've messed something up, because it wouldn't stick to the bottom at all. I'll have to try to do that more carefully..

    Vikram1vicky, that's exactly what I need. The problem is, when I resize the window, the navigation disappears. The content scrolls horizontally , but the footer doesn't.

  • #8
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by shki View Post
    Sammy12, sorry about that, here's the link for that same thing.

    http://www.knjigovodja-online.com/CQ-test/index.html

    obviously, #navigation is a placeholder, and the rest of the content is going to go into the #page. I hope to get to that once this footer issue is resolved.

    I get the px/% problem now, and I tried turning it all into %, but I must've messed something up, because it wouldn't stick to the bottom at all. I'll have to try to do that more carefully..

    Vikram1vicky, that's exactly what I need. The problem is, when I resize the window, the navigation disappears. The content scrolls horizontally , but the footer doesn't.


    Try this code. I given a fixed width and center aligned DIV in footer div, if will protect navigation and logo from overlapping and scrolling horizontally....


  • #9
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you mean the one in your previous post, I've tried it, and it still swallows the navigation... I literally saved it as is, and opened it in FF.

    I can't figure out what I'm doing wrong.

  • #10
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by shki View Post
    If you mean the one in your previous post, I've tried it, and it still swallows the navigation... I literally saved it as is, and opened it in FF.

    I can't figure out what I'm doing wrong.

    Give a center aligned n fixed width div.. Give width according to the width of navigation and logo.


  • #11
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I understand that, that's what you did up there. I saved your code as you wrote it into a document and opened it, and I tried to apply the principle to my code. Both your navigation and mine disappear when you resize the window.

    Did you try this? Did it work for you?

  • #12
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by shki View Post
    I understand that, that's what you did up there. I saved your code as you wrote it into a document and opened it, and I tried to apply the principle to my code. Both your navigation and mine disappear when you resize the window.

    Did you try this? Did it work for you?

    Yes it is working fine. 1st wrote and tested it and then I pasted code here

  • #13
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    that's because your floating elements in a fluid layout. all the elements can't fit onto this footer when you decrease the size of your browser, therefore the nav is getting pushed off.

    try setting the "some slogan or other" without any widths (no min-width or width). Then make the dotted line a separate div that is resizable (min and max width)

    you need to make these types of "gutters" that are resizable in order to stall collapsing elements
    Last edited by Sammy12; 07-26-2011 at 09:28 PM.


  •  

    Posting Permissions

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