CODEWITHSUNDEEP
htmlcssformattingfooter
Arbiter of buffoonery
Arbiter of buffoonery

Reputation: 1655

CSS Footer align one line left and the other right with content higher on page

I have a container div and inside this div is random content and a footer tag. The footer contains 2 spans with random text. I want to align the first span to the left and the second span to the right.

The issue is that my footer is located at the bottom of the window. Because of this the width of the footer is only as wide as the text within it and not of the "containing" block (it is not really the container as apparently CSS considers the container to be the first block to provide a non default position).

HTML

<div id="container">
    <div class="randomContent">
        <h1>Content of an arbitrarily long length will go here</h1>

        <footer>
            <span class="alignLeft">Hello world</span>
            <span class="alignRight">other text</span>
        </footer>
    </div>
</div>

CSS

#container {
    display: inline-block;

    border: 1px solid #000000;
}

footer {
    position: absolute;
    bottom: 0;
    height: 60px;           /* Height of the footer */
    border: 1px solid #000000;
}

.alignLeft {
    float: left;

}

.alignRight {
    float: right;

}

My JS Fiddle shows the issue. I want the boxes to be the same width, the "hello world" text to be left aligned and the "other text" to be right aligned in the footer. This should adjust as the "top" text size changes.

Here is a second JSFiddle that shows what I'm looking for. I'm hoping to do this without the java script. The hope is to do this with CSS only.

How can I make this work?

Upvotes: 0

Views: 5283

Answers (3)

Arbiter of buffoonery
Arbiter of buffoonery

Reputation: 1655

The only solution that I have found is to use jquery to force the footer to be the same size as its container.

See the JSFiddle for an example

JavaScript Code

var containerObj = $("#container");
var footerObj = $("footer");

//Event function that resizes the footer to match the container
function matchContainerSize() { 
    var containerWidth = containerObj.width();
    footerObj.css('width', containerWidth);

    console.log("event fired!");
}

//Wire up the event.
$(window).on('resize', matchContainerSize);

//Call the function so that the initial sizing can take place.
matchContainerSize();

Upvotes: 0

Zexter
Zexter

Reputation: 72

Please try the following 

<style>
            #container {
              display: inline-block;
              border: 1px solid #000000;
              width: auto;
            }
            footer {
              position: absolute;
              bottom: 0;
              left: 0px;
              height: 60px;
              /* Height of the footer */
              width: 100%;
            }
            .footer {
              margin: 8px;
              border: 1px solid #000000;
              height: 50px;
        clear:both;
            }
            .alignLeft {
              float: left;
        min-width:50%;
        width:auto;
        background-color :green;

            }
            .alignRight {
            text-align:right;
              float: right;
        min-width:50%;
        width:auto;
        background-color: red;
            }

     </style>



    <div id="container">
          <div class="randomContent">
            <h1>Content of an arbitrarily long length will go here</h1>

            <footer>
              <div class="footer">
                <span class="alignLeft">Hello world</span>
                <span class="alignRight">other text</span>
              </div>
            </footer>
          </div>
        </div>

Upvotes: 0

Marshiewooooooo
Marshiewooooooo

Reputation: 329

Apologies, try this, it worked for me.

#container {
  display: inline-block;
  border: 1px solid #000000;
}
footer {
  position: absolute;
  bottom: 0;
  left: 0px;
  height: 60px;
  /* Height of the footer */
  width: 100%;
}
.footer {
  margin: 8px;
  border: 1px solid #000000;
  height: 50px;
}
.alignLeft {
  float: left;
}
.alignRight {
  float: right;
}
<div id="container">
  <div class="randomContent">
    <h1>Content of an arbitrarily long length will go here</h1>

    <footer>
      <div class="footer">
        <span class="alignLeft">Hello world</span>
        <span class="alignRight">other text</span>
      </div>
    </footer>
  </div>
</div>

Upvotes: 0

Related Questions