HTML CSS Responsive paragraph tag

Question

I am designing a webpage and I am almost finished but there is a small issue that I can\'t seem to figure out.

HTML:

Answer 1

<style>
    * {margin:0; padding:0; text-indent:0; }

    .float-box-footer{
        display:inline-block;
        position:relative;
        height:37px;
        background-color:#accb32;
        max-width: 860px;
        width: auto\9;
        white-space: nowrap;
        }

    .p4{
        font-size: 12pt; 
        color: black; 
        padding-left:5pt; 
        left:0; top:7pt; 
        font-family:National, Arial, sans-serif;
        position:relative;}

    .p5{
        font-size: 7pt; 
        color: black; 
        padding-left:465pt;         
        }

</style>

Add a whitespace property with a no wrap value to the floatboxfooter div. Check the floatboxfooter properties in my example. Hope this helps.

Answer 2

If you want the green bar to respond to the width of the browser window, I would set your width on .float-box-footer to something like 100%. A percentage value will adjust with the window.

The problem you're facing now is that the width of .float-box-footer is being defined by the children elements inside there. The padding value on .p5 is forcing the green box open. If you give .float-box-footer a fluid width value like 100% and throw a text-align: right; or float: right; onto .p5 you should be in business.

I'd suggest reading up on the fundamentals of the CSS box model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

Answer 3

Please do refer the code

* {margin:0; padding:0; text-indent:0; }

.float-box-footer{height:37px;background-color:#accb32;max-width: 860px;width: auto\9;}

.p4{font-size: 12pt; color: black; padding-left:5pt; left:0; top:7pt; font-family:National, Arial, sans-serif;position:relative; width:50%;}

.p5{font-size: 7pt; color: black; width:50%; text-align:right; float: right;}


<div class='float-box-footer'>
    <p class="p4">Learn more <a href="http://www.google.com" alt="" >Google.com</a>
    </p>

    <p class="p5">© 2016 Google Google of Google. All rights reserved.</p>
</div>