Divs overlapping in website layout.

Discussion in 'HTML & Website Design' started by Web_Dev_Chris, Jul 14, 2016.

  1. #1
    How do I prevent my DIVS from over lapping in the website layout.

    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    <meta
        name="viewport"
        content="width=device-width,height=device-height,initial-scale=1"
    >
    <link
        rel="stylesheet"
        href="screen.css"
        media="screen,projection,tv"
    >
    <title>
        Pokemon Go Trend
    </title>
    </head><body>
    <div id="top"></div>
    <div id="left"></div>
    <div id="main"></div>
    <div id="footer"></div>
    
    
    </body></html>
    HTML:
    html, body {
        margin: 0;
        padding: 0;
    }
    body{background-color:#EFF;}
    #top {
        background-color: #000;
        max-width: 100%;
        height: 30px;
        padding: 1em;
        border-bottom: solid 2px #000;
        margin:0 0 0 0;
    }
    #left {
        background-color:#555;
        width:150px;
        height: 722px;
        padding: 5px;
        margin-bottom: 0;
        float: left;
        position:relative;
    }
    #main {
        background-color: #FFF;
        max-width: 464px;
        height: 700px;
        padding: 5px;
        border: solid 1px #888;
        border-radius: 5em;
        margin: 10px auto 10px;
        position:relative;
    }
    #footer {
        background-color: #000;
        max-width: 100%;
        height: 30px;
        padding: 1em;
        border-top: solid 2px #000;
        margin:0 0 0 0;
    }
    Code (CSS):

     
    Web_Dev_Chris, Jul 14, 2016 IP
  2. VanceVP

    VanceVP Member

    Messages:
    113
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    33
    #2
    I am far from an expert, but it looks like the reason for your overlapping div's is because of your fixed heights - assuming the overlap you are asking about is the #left. Also, for what it is worth, your html has #top but you haven't got anything for styling it. Finally, it looks like this is going to be a non-responsive type site due to the fixed (px) settings.

    Hopefully those who know a whole hell of a lot more than me will chime in and answer your question more accurately.

    Good luck . . .
     
    VanceVP, Jul 18, 2016 IP
  3. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #3
    Thanks for the reply. I wasn't very clear in my question. When I resize the browser window, the divs overlap when the website scales to the viewport of the UA.
     
    Web_Dev_Chris, Jul 18, 2016 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    1. You don't yet understand how float elements and the elements beside them work.
    2. You're forgetting the basics of the block container.
    3. I'm assuming you been looking at styleshits [sic] from WP theme and plugin authors, who tend to throw {position: relative;} at damned near everything without having a clue why. (It's really a very old IE thing {bug} that mostly wasn't even needed then if they understood IE's effed up hasLayout.)

    A. The block elements contiguous with the float are not aware of its existence and flow under the float. Only the inline content of the block 'sees' the float. To make the element aware of the float, you must create a new block formatting context. A simple way of doing this is to make the element {overflow: hidden;}. There are half a dozen ways of doing this, see http://gtwebdev.com/workshop/floats/enclosing-floats.php, and ignore the IE6 stuff. This was written a long time ago.

    This should fix the {margin: auto;} problem too.

    B. A block container automagically fills its own container side to side. If you state a width of 100% (e.g.) and add in padding or borders, you create a horizontal overflow. {max-width: 100%;} may have a use, but I can't think of one off hand.

    C. This is self explanatory. Don't apply relative positioning without a compelling, rational reason.

    D. Just because, if you declare a color, declare its background color too, and vice versa.
    
    <!DOCTYPE HTML>
    <html lang="en">
      <head>
      <meta charset="utf-8">
      <meta content=
      "width=device-width, height=device-height, initial-scale=1"
      name="viewport">
      <title>
      Test document
      </title>
      <style type="text/css">
      /*<![CDATA[*/
    
      html {
      padding: 0;}
    
      body {
      background-color: white;
      color: black;
      font: 100%/1.5 sans-serif;
      margin: 0;}
    
      p {
      font-size: 1em;}
    
      h1,
      h2 {
      font-family: serif;
      margin-bottom: 0;}
    
      /* end boilerplate */
    
      #top {
      background-color: #000;
      color: white;
      height: 30px;
      padding: 1em;
      border-bottom: solid 2px #000;
      margin:0 0 0 0;}
      
      #left {
      background-color:#555;
      color: white;
      width:150px;
      height: 722px;
      padding: 5px;
      margin-bottom: 0;
      float: left;}
      
      #main {
      background-color: #FFF;
      color: black;
      max-width: 464px;
      height: 700px;
      overflow: hidden;
      padding: 5em;
      border: solid 1px #888;
      border-radius: 5em;
      margin: 10px auto 10px;}
      
      #footer {
      background-color: #000;
      color: white;
      height: 30px;
      padding: 1em;
      border-top: solid 2px #000;}
      
      /*]]>*/
      </style>
      </head>
    
      <body>
      <div id="top">top</div>
      <div id="left">left</div>
      <div id="main">main</div>
      <div id="footer">footer</div>  
      </body>
    </html>
    Code (markup):
    //edit: I really hate that formatting is lost when pasting. ~gt
    gary
     
    kk5st, Jul 19, 2016 IP
  5. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #5
    Thanks Gary.

    To be honest, most of my practical learning is from W3Schools.com and users corrections from this forum.

    I guess I'm getting a little ahead of myself, it's clear I'm not ready to build a website from scratch yet. I still need to become more familiar with all the HTML and CSS elements. I'm most of the way though.

    I don't know how I fell for the delusion that it's easy to learn CSS and HTML because it's not. Theory, yes. Discipline, not so much. I need to make more time to learn. Err. I'm only a few weeks in though, I still have a long way to go.
     
    Web_Dev_Chris, Jul 19, 2016 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #6
    HTML is easy. CSS is a bit more complicated, but still quite easy. The point is to do the HTML and content, then apply CSS, and if you have some idea about what you need/want the page to look like, you can usually add CSS to make the specific elements show up how you want them to, and if that's not enough, you can add neutral elements (divs and spans, mostly) to contain or shift other elements around.

    The CSS can be complicated, of course, but it usually shouldn't be, if you keep in mind KISS - Keep it simple, stupid. Ie, as long as you don't do things to the website that shouldn't be on the web to begin with, it's normally not that complicated.
     
    PoPSiCLe, Jul 19, 2016 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    Ehh, yeah, not the best resource. Go to htmldog.com and work through their tutorials; best practice taught.

    Sure you can. You may not be ready for an interactive site, but most sites are not interactive anyway and run effectively without css, client side or server side scripting. HTML really is simple as @PoPSiCLe has pointed out. There aren't that many element tags that you would use regularly, and others you can look up as needed. The learning curve is as gradual as you care to make it.

    Keep these two pages open in your browser:
    HTML4 and
    CSS2.1.

    Yeah, these have been superseded, but the basics still stand, and the HTML4 and CSS2.1 recommendations are much easier to find and understand (once you get the hang of it) than the HTML5 and CSS3 stuff.

    You're doing fine, but just take it as it comes; don't rush it. Get comfortable with the core tags and CSS properties that you use regularly before you go to learning one new thing at a time. Follow PoP's advice, KISS.

    cheers,

    gary
     
    kk5st, Jul 19, 2016 IP
  8. DJ Swanepoel

    DJ Swanepoel Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #8
    Also, consider using a framework to make your life 100x easier. The most popular is bootstrap.http://getbootstrap.com/css/

    With bootstrap your site is broken down into 12 columns. It's then easy to specify your layout with something like this:

    <div class="row">
    <!-- this takes up 100% width -->
    <div class="col-md-12"> Top Section </div>
    </div>
    <div class="row">
    <!-- this takes up 50% -->
    <div class="col-md-6"> Left Section </div>
    <!-- this takes up 50% -->
    <div class="col-md-6"> Right Section </div>
    </div>
    Code (markup):
     
    DJ Swanepoel, Jul 19, 2016 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    Sorry DJ. Bootstrap is among the sorriest, stupidest ideas in web development. It is based on the old, old print paradigm of pasting up content for offset printing. The web is not print.

    Bootcrap, as many here call it, should be scraped off with a stick before entering the house (cite @deathshadow). It inherently bloats markup and style sheets. Class and ID tokens are non-semantic and all too often stacked, which leads inevitably to increased costs of maintenance and debugging.

    gary
     
    kk5st, Jul 19, 2016 IP
    Puntocom81 likes this.
  10. DJ Swanepoel

    DJ Swanepoel Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #10
    Harsh Gary. Haha. I'd agree there may be more sophisticated approaches but for someone who is just starting to learn HTML/CSS (the OP), I still think it's a easy way to get your feet wet.
     
    DJ Swanepoel, Jul 19, 2016 IP
  11. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #11
    No, DJ, it's a way to learn bad habits under the guise of easy-peasy. How is it easier to get your head around an element that has a dozen or so class tokens (seen in real sites) or elements nested eight+ deep (also seen all too often) when a sane structure might put it two or three deep?

    Bootstrap forces crappy coding, difficult debugging and expensive maintenance. Where maintaining a non-trivial commercial website can run two-and-a-half times the original development cost (and coding is a trivial amount compared to the total) per annum, it is sheer stupidity to increase that ratio for no sane reason.

    gary
     
    kk5st, Jul 19, 2016 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #12
    @kk5st, should I go ahead and tell @DJ Swanepoel the bare truth? I traded in the double-barrel for a SPAS-15...

    @Web_Dev_Chris, 99.99% of the time you declare a fixed height on something with text in it, you've utterly and completely screwed the pooch and failed to understand even the simplest of layout concepts! That you're dicking around with such layout DIV without actual CONTENT inside them is likely a hefty chunk of what's biting you in the backside.

    CONTENT FIRST. SEMANTIC MARKUP SECOND, THEN you can wrap DIV as needed and add style...

    Screwing around with empty DIV? EPIC FAIL!
     
    deathshadow, Jul 19, 2016 IP
  13. Christine Hopkins

    Christine Hopkins Greenhorn

    Messages:
    15
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    23
    #13
    You are facing this issue due to fixed height. You have to arrange left positioning as well to remove overlapping on your website. Mostly this error occurs in mobile applications and that is also due to height adjustment. You should contact with any web developer if you don`t get results with height adjustments for much better and professional solutions.
     
    Christine Hopkins, Jul 20, 2016 IP
  14. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #14
    Actually, Christine, that is not the case here. It is simply that a lack of understanding that float elements are semi-out of the flow which means the main section slid under the left section. That's how things are supposed to work unless the author intervenes. I grant that it is usually a poor practice and asking for big chunks to be torn from the nether regions to set heights on content blocks.

    gary
     
    kk5st, Jul 20, 2016 IP