CODEWITHSUNDEEP
htmlcsscss-floatcss-position
Yousaf
Yousaf

Reputation: 29282

Fixed positioning of footer takes content out of the container - CSS

I have two unordered lists <ul> in a <footer> tag. List items are displayed horizontally and both lists are separated by some space between them. What i want is to fix the position of the footer at the bottom of the browser.

Problem:

When I try to set the position of footer to fixed using position property of CSS, one list gets out of the footer container but its position remains same, i.e horizontal to first list that is inside the footer container.

If the position of footer is set to relative, 2nd list comes back inside the footer container.

Question:

What am I doing wrong here ?

Related code: https://codepen.io/anon/pen/dVPyvG

Upvotes: 1

Views: 975

Answers (3)

kukkuz
kukkuz

Reputation: 42352

You can extend the footer to the whole width of the screen by adding to footer:

left: 0;
right: 0;

Instead of the left: 835px on the list-2 you can add float:right on the container you want to keep to the right using:

.list-container + .list-container {
  float: right;
}

See demo below:

* {
  margin: 0;
  padding: 0;
}

footer {
  background: #eee;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0; /* ADDED */
  right: 0; /* ADDED */
  border: solid 5px red;
}

footer ul {
  line-height: 50px;
}

.list-container {
  display: inline-block;
}

footer ul li {
  display: inline-block;
  margin-right: 10px;
}

#list-1 {
  padding-left: 15px;
}

#list-2 {
  position: relative;
  /*left: 835px;*/
}
.list-container + .list-container {
  float: right; /* ADDED */
}
<html>

<head>
  <title>Fake Google Homepage</title>
  <link rel="stylesheet" type="text/css" href="fakeGoogle.css">
  <!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

  <footer>
    <div class="list-container">
      <ul id="list-1">
        <li>Advertising</li>
        <li>Business</li>
        <li>About</li>
      </ul>
    </div>

    <div class="list-container">
      <ul id="list-2">
        <li>Privacy</li>
        <li>Terms</li>
        <li>Settings</li>
        <li>Use Google.com</li>
      </ul>
    </div>
  </footer>

</body>

</html>

Upvotes: 3

Julio Feferman
Julio Feferman

Reputation: 2676

Set the width of your footer container using width:100% or width:100vw.

*{
    margin: 0;
    padding: 0;
}

footer{
    background: #eee;
    width:100%;
    height: 50px; 
    position: fixed;
    bottom: 0;
    border: solid 5px red;
}

footer ul{
    line-height: 50px;
}

.list-container{
    display: inline-block;
}

footer ul li{
    display: inline-block;
    margin-right: 10px; 
}

#list-1{
    padding-left: 15px;
}

#list-2{
    position: relative;
    left: 835px;
}
<html>
    <head>
        <title>Fake Google Homepage</title>
        <link rel="stylesheet" type="text/css" href="fakeGoogle.css">
        <!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
    </head>
    
    <body>
        
        <footer>
            <div class="list-container">
               <ul id="list-1">
                    <li>Advertising</li>
                    <li>Business</li>
                    <li>About</li>   
                </ul> 
            </div>
            
            <div class="list-container">
                <ul id="list-2">
                    <li>Privacy</li>
                    <li>Terms</li>
                    <li>Settings</li>
                    <li>Use Google.com</li>    
                </ul>
            </div>
        </footer>
        
    </body>
</html>

Upvotes: 0

Balchandar Reddy
Balchandar Reddy

Reputation: 112

try this snippet:

footer{
    background: #eee;
    height: 50px; 
    position: absolute;   //use absolute for position
    bottom: 0px;
    width:100%;           //add width
    border: solid 5px red;
}

Upvotes: 1

Related Questions