Hello, This will probably be super easy for someone. But as you can see on the bottom on that home page there's basically a navigation bar that let's you go to archive and older/newer posts. But the image above it (the chandelier) has a left align thing going and as a result it's making the nav bar align to the right of it. I want that nav bar to shift to underneath the post. I know I can put some line breaks to make it happen, but I'm sure there's a better way. display:block or something maybe? In safari it shifts down just fine like I want it to, but in Firefox, it's floating to the right of the chandelier image.

Any ideas?

Thanks, - David

<table style="width: 100%; background-color: #ece1d2;">
                                <td style="width: 30%; font-size: 26pt;">
                                    <a href="{PreviousPage}" class="pagelink">&lsaquo;</a>
                                <td style="text-align: center;">
                                    <a href="/archive" class="pagelink">archive</a>
                                <td style="text-align: left; width: 30%; font-size: 26pt;">
                                    <a href="{NextPage}" class="pagelink">&rsaquo;</a>

1 answer

This was chosen as the best answer

Elements that follow a floated element need to be "cleared" if you don't want them to float too.

I would add clear: both; to the css for the .wrapper element. Now if any images or anything is floating inside the wrapper divs, the next wrapper div in the line will clear it and stack up below like it should.

Answered over 7 years ago by Artistic Abode
  • That was a perfect answer. :) Worked like a charm, exactly what I was looking for. Thanks so much! David E over 7 years ago
  • +1 For a perfect answer. You can't do better than that. Abinadi Ayerdis over 7 years ago