When a div is floated to the left and another div is floated to the right, the

Question

When a div is floated to the left and another div is floated to the right, the

I would like the footer to display an image aligned to the left and some additional text (an inline ul with links) aligned to the right within the footer.

Here is the CSS & HTML:

footer {
   clear: both;
   background: #113551;
   width: 90%;
   margin: 0 auto;
}
.left-foot {
   float: left;
}
.right-foot {
  float: right;
}

<footer>
   <div class="left-foot">
      <p> derp 1</p>
   </div>

   <div class="right-foot">
      <p>derp2</p>
   </div>
</footer>

Although it works somewhat, the background color of the footer isn't displaying. Why could this be happening? What would be the most effective way to address this issue? I've also tried using position relative and absolute without success.

html css background css-float

Answer 1

Answer №1

To fix the issue with floating elements, you can utilize overflow:hidden

Check out this example - http://jsfiddle.net/x8s92pf5/3/

Another solution is to insert a div element with the style clear:both before the closing tag of the footer section

Here's a demonstration - http://jsfiddle.net/x8s92pf5/4/

Answer 2

To fix the issue with floating elements, you can utilize overflow:hidden

Check out this example - http://jsfiddle.net/x8s92pf5/3/

Another solution is to insert a div element with the style clear:both before the closing tag of the footer section

Here's a demonstration - http://jsfiddle.net/x8s92pf5/4/

Answer 3

Answer №2

My thoughts echo those of Vitorino Fernandes on this topic.

Alternatively, you could express it in the following way:

HTML

<footer>
<div>
<p id="p1"> Derp1</p>
<p id="p2> Derp2</p>
</div>
</footer>

CSS

 footer{
    width:100%;
    background: #113551;
    }

    footer > div{
    width:90%;
    margin:auto;
    }

    #p1{
    float:left;
    }
    #p2{
    float:right;
    }

I chose to utilize a single div as a container for the <p> elements.

Answer 4

My thoughts echo those of Vitorino Fernandes on this topic.

Alternatively, you could express it in the following way:

HTML

<footer>
<div>
<p id="p1"> Derp1</p>
<p id="p2> Derp2</p>
</div>
</footer>

CSS

 footer{
    width:100%;
    background: #113551;
    }

    footer > div{
    width:90%;
    margin:auto;
    }

    #p1{
    float:left;
    }
    #p2{
    float:right;
    }

I chose to utilize a single div as a container for the <p> elements.

When a div is floated to the left and another div is floated to the right, the

Answer №1

Answer №2

Similar questions

Creating an HTML table using an array of objects

The app is opening the index.html file instead of the expected index.jsx file

Updating hyperlinks from dynamic php links to stable static links

"Skip the inbox clutter and access the compose page directly on Gmail, Yahoo, and

Setting up a textarea tooltip using highlighter.js

Vibrant diversity in a solitary symbol

The height of a div element does not automatically default to 100% in Next.js

What is the best way to utilize AJAX to upload several images in PHP?

Tips for confining a float within a div with fluctuating space

The origin of the recipient window does not match the target origin provided when using postMessage on localhost

Embedding a video element results in an unexpected increase in height

Tips for avoiding divs from overlapping when the window size is modified

A more sophisticated approach to button creation, such as utilizing a single HTML element

Scrollbar in an HTML selection tag

What is the best way to create a "tile-based board" for this game?

Troubleshooting the lack of functionality with justify-items in CSS Grid

Error: An error occurred due to an unexpected asterisk symbol. The import call only accepts one argument in Posenet

Activate hover effect on toggle button

Minimizing the frequency of getElementById calls for the same HTML element

When trying to load AJAX, it does not function properly unless the page is refreshed