1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Padding Inside a Floating div | Need Help

Discussion in 'HTML & Website Design' started by MrLeN, Apr 28, 2021.

  1. #1
    I am in the middle of creating a basic, plain jane, old school div layout. But for the life of me, I can't figure out how to get padding in the content area and side menu without the template distorting with extra padding. I've been searching online for hours -- and I'm finding 'apparent' solutions, but when I try to implement them, they don't work. I now have a migraine. If anyone has a solution, I'd be rapt to know what it is.

    Note: The template isn't complete, per se. I'm just trying to get the basic layout/functionality right.


    html {
      height: 100%;
      font-size: 1.8vw;
    }
    body {
      height: 100%;
      background-color: #EEEEEE;
      font-family: arial;
    }
    .wrap {
      width: 80%;
      height: 100%;
      background-color: #FFFFFF;
      max-width: 1200px;
      margin: 0px auto 0px auto;
      border-left: 1px solid #999999;
      border-right: 1px solid #999999;
    }
    .head {
      margin-top: 10px;
    }
    .logo {
      background-color: #FFFFFF;
      float: left;
      width: 30%;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
    .head-right {
      background-color: #FFFFFF;
      float: right;
      width: 70%;
      text-align: center;
      height: 100px;
      line-height: 100px;
    }
    .topmenu {
      clear: both;
      background-color: #FFFFFF;
    }
    .content-wrap {
      background-color: yellow;
    }
    .content {
      background-color: #CCCCCC;
      float: left;
      width: 70%;
    }
    .content-box {
    
    }
    .content-2 {
      clear: both;
      border-top: 1px solid #999999;
      background-color: #FFFFFF;
    }
    .content-2-box {
      padding: 1vw;
    }
    .sidemenu {
      background-color: #999999;
      float: right;
      width: 30%;
    }
    .sidemenu-box {
    
    }
    .foot {
      clear: both;
      background-color: #FFFFFF;
      margin-top: 10px;
    }
    /* Top Menu */
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: green;
      text-align: center;
    }
    
    
    li {
      display: inline-block;
    }
    
    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 16px;
      text-decoration: none;
    }
    
    li a:hover {
      background-color: #111111;
    }
    .home-link {
      padding-left: 20%;
    }
    /* Responsive */
    @media screen and (max-width: 600px) {
      html {
        font-size: 2.5vw;
      }   
      .logo {
        float: none;
        width: 100%;
        text-align: center;
      }
      .head-right {
        float: none;
        width: 100%;
      }
      .content {
        float: none;
        width: 100%;
      }
      .sidemenu {
        float: none;
        width: 100%;
      }
    }
    Code (CSS):

    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta charset="utf-8" />
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link href="style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
      <div class="wrap">
        <div class="head">
          <div class="logo">
            LOGO
          </div>
          <div class="head-right">
            head right
          </div>
        </div>
        <div class="topmenu">
          <ul>
            <li>
              <a href="#">Home</a>
            </li>
            <li>
              <a href="#">About</a>
            </li>
            <li>
              <a href="#">Contact</a>
            </li>
            <li>
              <a href="#">Blog</a>
            </li>
          </ul>
        </div>
        <div class="content-wrap">
          <div class="content content-box">
            <h1>This Is A Page Heading</h1>
            <p>This is some content.</p>
          </div>
          <div class="sidemenu sidemenu-box">
            sidemenu
          </div>
          <div class="content-2 content-2-box">
            Content 2
          </div>
        </div>
        <div class="foot">
          <div class="content content-box">
            <p>Foot Left</p>
          </div>
          <div class="sidemenu sidemenu-box">
            Foot Right
          </div>
        </div>
      </div>
    </body>
    </html>
    
    
    HTML:

    SEMrush
     
    MrLeN, Apr 28, 2021 IP
    SEMrush
  2. MrLeN

    MrLeN Well-Known Member

    Messages:
    406
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    120
    #2
    wow, 75 views, no answer :confused:

    Anyways, it's all good. I figured it out.

    If you float a div and then add padding, that padding will cause the div to become too big.

    But if you add the code below, it won't :)


    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    Code (CSS):
    ie: so in my code above:

    .content {
      background-color: #CCCCCC;
      float: left;
      width: 70%;
    }
    Code (CSS):
    becomes:

    .content {
      background-color: #CCCCCC;
      float: left;
      width: 70%;
      padding: 20px;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
    }
    Code (CSS):
    All fixed!
     
    MrLeN, Apr 29, 2021 IP
    qwikad.com likes this.
  3. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,908
    Likes Received:
    1,543
    Best Answers:
    27
    Trophy Points:
    425
    #3
    70 of them were bots visiting DP.
     
    qwikad.com, Apr 29, 2021 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,573
    Likes Received:
    1,950
    Best Answers:
    248
    Trophy Points:
    515
    #4
    Another chunk of your problem is overthinking the layout by throwing widths at everything. Instead of floating everything and width on everything, leave one element not floated and without width on it. That way it will auto-fill the available space. I also dislike % width columns since the smaller one either ends up ugly empty crap at high resolutions, and end up too small at low resolutions. An elastic (em measured) column next to a fluid one generally looks and behaves better for users.

    Though these days you probably should be using flex for at least some of this, ease up on the pointless DIV since you've got about twice as many if not more than needed, and you should look into how you have a DIV doing H1's job and H1 doing H2's job .

    You should probably also be using EM or REM instead of PX so you aren't telling users with accessibility needs to go F*** themselves. Remember, if you're thinking in PX, somebody's not thinking.

    Also since you're using a HTML 5 doctype you can tell the XML namespace crap to take a hike too, we don't say type="" on stylesheet LINK or SCRIPT anymore, and you failed to provide a media target on said stylesheet LINK.

    Remember, if you see a <link> without media="" or set to media="all" when the stylesheet is for a screen layout, you're looking at ignorance, incompetence, and/or ineptitude, No matter how many dipshit framework fanboys go "media attribute, what's that?!?"
     
    deathshadow, May 2, 2021 IP
  5. JEET

    JEET Notable Member

    Messages:
    3,730
    Likes Received:
    478
    Best Answers:
    19
    Trophy Points:
    235
    #5
    Padding inside DIV does not affects how your div is floating, or how much space it takes.

    <div style=" float: right; padding: 2px; width: 25%; min-width: 400px; max-width: 700px; ">

    ><ul>
    <li> <a href=""> some link </a> </li>
    <li> <a href=""> another link </a> </li>
    </ul>

    </div>

    <div style=" float: left; padding: 20px; width: 70%; min-width: 400px; max-width: 700px; "

    <p> Some content here </p>
    <p> Some content here </p>
    <p> Some content here </p>
    <p> Some content here </p>

    </div>

    First div will float right, will take 25% screen width, minimum 400px, and max 700px.
    Second one floats left, takes 70% width, same min/max.

    Padding does not matters. You can increase or decrease padding, these above sizes will remain same.

    Your problem could be that you are using 30% and 70% width sizes, leaving no space for "outside margins"
    Reduce one of those values a little bit. Like 25% and 70% width sizes.

    Also do a "clear: both;" in your content-wrap
    That will separate the content section from the header section.
     
    JEET, May 2, 2021 IP
  6. hello_welcome

    hello_welcome Well-Known Member

    Messages:
    1,632
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    155
    #6
    You can also give padding inside UL objects, its more easy
     
    hello_welcome, Jun 1, 2021 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,573
    Likes Received:
    1,950
    Best Answers:
    248
    Trophy Points:
    515
    #7
    Uhm... bullcookies? Or at least bullcookies if you haven't set box-sizing:border-box;, since without that the padding is added TO the width, not inside it.

    It's idiotic rubbish to be declaring widths on EVERYTHING, particularly when floats are involved. Just like the idiocy of percentage based grids. IF you just make your content or "larger" area fluid to take up the excess, you can stop throwing all the dipshit values at everything!

    Pixel metrics, percentage widths, min-max on the children instead of a parent container... it's all epic /FAIL/ at the most basic aspects of CSS.
     
    deathshadow, Jun 1, 2021 IP
    JEET likes this.
  8. JEET

    JEET Notable Member

    Messages:
    3,730
    Likes Received:
    478
    Best Answers:
    19
    Trophy Points:
    235
    #8
    @deathshadow
    I am on a monitor with 1280x720 resolution.
    In this code below, I have used fixed width for the div as 1280px, and a padding of 400px for the same div.
    Now, if padding is added to the width, then total width of this div should have become 400px more than my laptop's total screen resolution of 1280px, forcing me to scroll the page right and left.
    But that is not happening.

    DIV displays as 1280px wide, with a 400px inside padding on all sides.
    Here's the HTML:
    (Let me know what I missed)

     
    <html><body style=" margin: 0px; padding: 0px; background: #000000; color: #FFFFFF; ">
    
    <div style=" width: 1280px; margin: 0px; padding: 400px; border: #FFFFFF 10px solid; ">
    
    <p> This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text 
    
    
    <p> This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text 
    
    
    <p> This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text 
    
    
    </div>
    
    </body></html>
    
    
    Code (markup):

    Padding is not affecting the width in any way.
     
    JEET, Jun 1, 2021 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,573
    Likes Received:
    1,950
    Best Answers:
    248
    Trophy Points:
    515
    #9
    Silly question, but are you still using the long-defunct IE? The lack of a doctype would put you into "quirks mode" which has the same rules as setting box-sizing:border-box;

    In FF and Chrome here that's giving me a 2100px width. 1280 + 400 left padding + 400 right padding + 10px left border + 10px right border

    I'd have to add box-sizing:border-box; to get that inner div to stay inside 1280.
     
    deathshadow, Jun 1, 2021 IP
    JEET likes this.
  10. JEET

    JEET Notable Member

    Messages:
    3,730
    Likes Received:
    478
    Best Answers:
    19
    Trophy Points:
    235
    #10
    @deathshadow
    Got it, thanks for clarification!
    Can always learn something from you!
     
    JEET, Jun 2, 2021 IP