locked
cutoff w in css RRS feed

  • Question

  • User702049738 posted

    Hello experts;

    In the following code below, how do i prevent the "w" from being cutoff

    https://jsfiddle.net/a1sbtttd/6/

    Friday, March 9, 2018 3:19 PM

Answers

  • User2103319870 posted

    how do i prevent the "w" from being cutoff

    You are trying to apply padding to main div with width set as 100%. Width property specifies the size of the content area. Padding, borders, and margins are added to it.

    As a solution add the padding to inner anchor tag as well like  below

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <style>
    #bottomframe {
                background-color: black;
                height: 20px;
                padding: 5px;
                border-top: 1px solid #ABABAB;
                ;
                left: 0;
                bottom: 0;
                width: 100%;
         }
    
    a.paddingstyle
    {
      padding: 5px;
    }
    </style>
    </head>
    <body >
       <div id="bottomframe" align="right" Style ="color:white;">
         <a class="paddingstyle" href="www.google.com"> go home right now </a>
       </div>
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 9, 2018 6:09 PM

All replies

  • User2103319870 posted

    how do i prevent the "w" from being cutoff

    You are trying to apply padding to main div with width set as 100%. Width property specifies the size of the content area. Padding, borders, and margins are added to it.

    As a solution add the padding to inner anchor tag as well like  below

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <style>
    #bottomframe {
                background-color: black;
                height: 20px;
                padding: 5px;
                border-top: 1px solid #ABABAB;
                ;
                left: 0;
                bottom: 0;
                width: 100%;
         }
    
    a.paddingstyle
    {
      padding: 5px;
    }
    </style>
    </head>
    <body >
       <div id="bottomframe" align="right" Style ="color:white;">
         <a class="paddingstyle" href="www.google.com"> go home right now </a>
       </div>
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 9, 2018 6:09 PM
  • User-1838255255 posted

    Hi olybobo,

    According to your description and code, i make a modify based on your code through your needs, please check:

    Sample Code: 

    <head runat="server">
        <title></title>
        <style>
            #bottomframe {
                background-color: black;
                height: 20px;
                padding: 5px;
                border-top: 1px solid #ABABAB;
                ;
                left: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div id="bottomframe" align="right" style="color: white;">
                    <a style="margin-right: 10px;" href="www.google.com">go home right now </a>
                </div>
            </div>
        </form>
    </body>

    Best Regards,

    Eric Du 

    Monday, March 12, 2018 2:50 AM