#1
  1. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111

    DIV background/border overlap


    Well, it sounds floats will only apply to positioning for foreground items, so backgrounds and borders will still slide under floats. I know if I float the 2nd item, this can be avoided. My simple goal is 2 DIVs. 1 to act as the larger for the main content using available remaining space, and the 2nd to act as the navigation with a defined width. My current script hold the 2 within a main content_wrapper to help define the site's outer margin.

    How could I pull off such, defining the width of 1, having the 2nd use the remaining, AND keep the background/borders correct in relation to their owners?

    Code:
    #content_wrapper {
      margin: 25px 100px;
      width: calc(100% - 200px);
    }
    
    #main_content {
      background-color: rgb(255, 255, 255);
      border: 1px solid #000000;
      border-radius: 30px;
      float: left;
      margin: 0 25px 0 0;
      padding: 10px;
      width: 80%;
    }
    
    #side_content {
      background-color: rgb(255, 255, 255);
      border: 1px solid #000000;
      border-radius: 30px;
      margin: 0 0 0 25px;
      padding: 10px;
    }
    Code:
    <DIV id="content_wrapper">
      <DIV id="main_content">
        The main content.
      </DIV>
      <DIV id="side_content">
        The side content.
      </DIV>
    </DIV>
    Upper: Both DIVs have border/background defined.
    Lower: 1st 'main content' DIV border/background removed to see behind...
    Last edited by Triple_Nothing; January 30th, 2017 at 09:55 AM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  2. #2
  3. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,381
    Rep Power
    9645
  4. #3
  5. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    Pretty much just like below:

    The item widths that won't be hard-coded would be the wrapper, and the main content.
    The wrapper is to use 100% the page width with 100px left/right margins.
    The main content is to use the remaining space of the wrapper.
    The navigation/side-content will use a hard-coded width. (200px for example)
    Last edited by Triple_Nothing; January 30th, 2017 at 03:38 PM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    937
    Rep Power
    279
    does this do what you want?

    Code:
    #content_wrapper {
      margin: 25px 100px; 
      overflow: hidden; //works similar to using float:left but still allows centering using margin: auto
      width: 100%;
    }
    
    #main_content {
      background-color: rgb(255, 255, 255);
      border: 1px solid #000000;
      border-radius: 30px;
      float: left; 
      padding: 10px;
      width: calc(100% - 249px); //100% width - (#side_content width + left/right margin of side_content + padding*2 + border-width*2) = 249px
    }
    
    #side_content {
      background-color: rgb(255, 255, 255);
      border: 1px solid #000000;
      border-radius: 30px;
      margin-left: 5px;
      padding: 10px;
      float: right;
      width: 200px;
    }
  8. #5
  9. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    DonR, that actually works rather well, until... I delete the attempted comment. I must keep the below comment after the overflow: hidden for it to work. Anyone know why? If I remove it, or comment it via CSS's /* */, it does not display as desired...
    Code:
    //works similar to using float:left but still allows centering using margin: auto
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    937
    Rep Power
    279
    oh wow, you're right...what the heck?!?
    I don't why I was thinking '//' worked as comments in html/css files, too.

    I'll work with it some more.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    937
    Rep Power
    279
    ok, attempt #2 (I performed a coarse css reset to make sure it worked across most browsers)(tested with Palemoon 26.5.0, IE11, Opera42, chrome55).

    Code:
    html, body {
    	margin: 0;
    	padding: 0;
    }
    #content_wrapper {
      margin: 25px 100px; 
      float:left;
      width: calc(100% - 105px); /* the 105px = total of 100px margin_content + 5px left-margin of side_content*/
    }
    
    #main_content {
      background-color: rgb(255, 255, 255);
      border: 1px solid #000000;
      border-radius: 30px;
      float: left; 
      padding: 10px;
      width: calc(100% - 344px); /* 344px = side_content width(200px) + left/rt margin of content_wrapper(100px) + borders total * 2(4px) + paddings total * 2(40px) */
    }
    
    #side_content {
      background-color: rgb(255, 255, 255);
      border: 1px solid #000000;
      border-radius: 30px;
      margin-left: 5px;
      padding: 10px;
      float: left;
      width: 200px;
    }
    Last edited by DonR; January 30th, 2017 at 09:14 PM.
  14. #8
  15. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    Worked well. Just had to add a DIV to clear the floats to get my footer's margins to work properly, and all was set.

    Final coding:
    Code:
    <BODY>
      <DIV class="container" id="head_wrapper">
        <DIV id="head_logo"></DIV>
        <DIV id="head_navigation">
          <UL>
            <LI><A href="#">Link 1</A></LI>
            <LI><A href="#">Link 2</A></LI>
            <LI><A href="#">Link 3</A></LI>
            <LI><A href="#">Link 4</A></LI>
            <LI><A href="#">Link 5</A></LI>
          </UL>
        </DIV>
      </DIV>
      <DIV id="content_wrapper">
        <DIV class="container" id="main_content">
          The main content.<BR /><BR />
          The main content.<BR /><BR />
          The main content.
        </DIV>
        <DIV class="container" id="side_content">
          The side content.<BR /><BR />
          The side content.<BR /><BR />
          The side content.
        </DIV>
      </DIV>
      <DIV style="clear: both;"></DIV>
      <DIV class="container" id="footer">
         Copyright 2017 Some Company Name
      </DIV>
    </BODY>
    Code:
    body {
      background-color: rgb(200, 200, 200);
    }
    
    .container {
      background-color: rgb(255, 255, 255);
      border: 1px solid #000000;
      border-radius: 30px;
      padding: 10px;
    }
    
    #head_wrapper {
      margin: 50px 100px 25px;
    }
    
    #head_logo {
      background-image: url("../img/logo.jpg");
      background-position: center;
      background-repeat: no-repeat;
      height: 375px;
      width: 100%;
    }
    
    #head_navigation {
      text-align: center;
    }
    
    #head_navigation ul {
      list-style: none;
    }
    
    #head_navigation li {
      display: inline;
    }
    
    #head_navigation li+li::before {
      content: " \00a0 \00a0 | \00a0 \00a0 ";
    }
    
    #content_wrapper {
      margin: 25px 100px; 
      width: calc(100% - 105px);
    }
    
    #main_content {
      float: left; 
      width: calc(100% - 464px);
    }
    
    #side_content {
      margin-left: 25px;
      float: left;
      width: 300px;
    }
    
    #footer {
      margin: 25px 100px 50px;
    }
    Last edited by Triple_Nothing; February 2nd, 2017 at 08:14 AM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  16. #9
  17. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    356
    Rep Power
    132
    Hi there Triple_Nothing,

    you may find that this very simple method works very well...

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    
    <style media="screen">
    #box {
        display: table;
        width: 100%;
        border-spacing: 0.5em;
        background-color: #c8c8c8;
     }
    
    #main-content, #side-content {
        display: table-cell;
        padding: 1em;
        border: 0.1em solid #000;
        border-radius: 1em;
        box-sizing: border-box;
        background-color: #fff;
     }
    
    #side-content {
        width: 12.5em;
     
     }
    </style>
    
    </head>
    <body> 
    
    <div id="box">
     <div id="main-content">The main content</div>
     <div id="side-content">The side content</div>
    </div>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~
  18. #10
  19. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,494
    Rep Power
    111
    Nice suggestion. Relatively the same. Mine only defines a 4th style "container" that all visible boxes share, leaving main/side content defined differently only by size. Thanks for the post.

    Excellent idea with the table build.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.

IMN logo majestic logo threadwatch logo seochat tools logo