www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Stacking div tags vertically...

Hybrid View

  1. #1
    Join Date
    Dec 2012
    Posts
    81

    resolved [RESOLVED] Stacking div tags vertically...

    I had a lot of trouble with this one. I ended up figuring it out with CSS attributes I've never used before, although very simple and now I know I have to use said attributes more often.

    What I'm wondering is if there's any way to clean this up a little more. Or if there's another way to do it...

    Here's the jsfiddle if it's easier.. http://jsfiddle.net/jlnewnam/8MAsE/


    Here's the HTML...

    Code:
    <div class="container">
    	<div class="top">Top.</div>
        <div class="middle">Middle.</div>
        <div class="bottom">Bottom.</div>
    </div>
    And here's the CSS...

    Code:
    .container {
    	width: 100px;
    	height: 180px; 
    	position: absolute;
    	background: none;
    	margin-top: 15px;
    }
    
    .top {
    	width: 100px;
    	height: 60px;
    	position:absolute;
    	top: 0;
    	left: 0;
    	background: #F00;
    }
    
    .middle {
    	width: 100px;
    	height: 60px;
    	position: absolute;
    	top: 60px;
    	bottom: 60px;
    	left: 0;
    	background: #0F0;
    }
    
    .bottom {
    	width: 100px;
    	height: 60px;
    	position:absolute;
    	bottom: 0;
    	left: 0;
    	top: 120px;
    	background: #FF0; 
    }
    I feel like it should have been easier than this, but to each their own.

    Thanks in advance!

  2. #2
    Join Date
    Mar 2011
    Posts
    1,109
    You're right that it could have been easier. Since you designed the top, middle, and bottom <div>s to exactly fit in the container <div>, you could have avoided adding any position rules to them because, barring other issues, they would have stacked themselves within the container. What are those other issues? Anything that would cause the browser to allocate document space in addition to the 'width' and 'height' attributes, such as 'margin', 'padding', 'border', and internal elements whose margins extend beyond the <div>'s bounding box. So, you could have used:
    Code:
    <!DOCTYPE html>
    <html lang='en'>
    <head>
    <title>Contained Boxes Demo</title>
    <meta charset='utf-8'>
    <style>
    * { margin:0; padding:0; border:0; outline:0; font-family:arial,sans-serif; }
    h1 { text-align:center; }
    
    .container {
    	width: 100px;
    	height: 180px; 
    	margin-top: 15px;
    	margin-left:15px;
    }
    
    .top {
    	width: 100px;
    	height: 60px;
    	background: #F00;
    }
    
    .middle {
    	width: 100px;
    	height: 60px;
    	background: #0F0;
    }
    
    .bottom {
    	width: 100px;
    	height: 60px;
    	background: #FF0; 
    }
    
    </style>
    </head>
    <body>
    <h1>Bounded Boxes</h1>
    <br>
    <div class="container">
    	<div class="top">Top.</div>
        <div class="middle">Middle.</div>
        <div class="bottom">Bottom.</div>
    </div>
    </body>
    </html>
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Dec 2012
    Posts
    81
    Thanks Rick. That's exactly what I was looking for.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles