Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Making DIVS stack on top of each other

    Hi, a total CSS noob here so sorry for the no doubt basic question...

    I want to have my DIVs to be one on top of the other.
    I have my Header Div at the top and then the MenuDiv underneath it but then the Main (content) Div is next to the Menu Div when I would like it to again be underneath it.
    Basically I want all 3 Divs to stack 1 on top of the other.

    I have put the basic code below (just removed all the content).
    Is it here that I need to make a change or in the .css file?
    Code:
    <body <!--tmpl:bodyAttrib-->>
    <div id="wrapper">
    	<div id="header">
    		<h1><a href="http://mysite.com">MySite</a></h1>
    		<h2>Site Details</h2>
    		<h3>Extra Details</h3>
    	</div>
    	<div id="menu">
    	  <table width="500" border="0" cellspacing="0" cellpadding="0">
    	    <tr>
    	      <td>Menu 1</td>
    	      <td>Menu 2</td>
    	      <td>Menu 3</td>
    	      <td>Menu 4</td>
            </tr>
    	    <tr>
    	      <td>TEST</td>
    	      <td>TEST</td>
    	      <td>TEST</td>
    	      <td>TEST</td>
            </tr>
          </table>
        </div>
    	<div id="main">
    	<div id="info">
    	<!--tmpl:info-->
    	</div>  
    	<!--tmpl:body-->
    </div>

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    We need to see some CSS. Divs are block-level elements. By default, they should be on top of one another, not next to each other.

    But (assuming this is the entire segment of code) I can see something wrong with your code.

    You have an unclosed div. I'm assuming that the "#main" div was accidentally left unclosed.
    My signature :)

  • Users who have thanked ttkim for this post:

    Wardy7 (08-13-2013)

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ttkim View Post
    We need to see some CSS. Divs are block-level elements. By default, they should be on top of one another, not next to each other.

    But (assuming this is the entire segment of code) I can see something wrong with your code.

    You have an unclosed div. I'm assuming that the "#main" div was accidentally left unclosed.
    Sorry for my very slow reply, I posted my query and then went away, I should have waited before posting it really!
    Thanks for the reply!
    Yes I think when I posted the basic code I accidently left out the "#main" close DIV for it.

    OK, here is the CSS
    Code:
    *
    {
    	padding: 0;
    	margin: 0;
    }
    
    body
    {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    
    #header a
    {
        text-decoration: none;
        color: #fff;
    }
    
    #header
    {
    	background: #fff url(/img/top.jpg) repeat-x top; 
    	height: 121px;
    }
    
    #visitorInfo
    {
    	float: right;
    	color: #fff;
    	margin-bottom: 30px;
    }
    
    #header h1
    {
    	color: #fff;
    	font-size: 150%;
    	font-weight: normal;
    	padding-top: 30px;
    	padding-left: 30px;
    }
    
    #header h2
    {
    	color: #aaa;
    	font-size: 65%;
    	font-weight: normal;
    	padding-left: 30px;
    	clear: none;
    	width: 30%;
    	float: left;
    }
    
    #header h3
    {
    	color: #aaa;
    	font-size: 65%;
    	font-weight: normal;
    	padding-left: 30px;
    	padding-right: 30px;
    	text-align: right;
    	clear: none;
    	width: 55%;
    	float: right;
    }
    
    #header h3 span
    {
    	font-weight: bold;
    }
    
    #menu 
    {
    	padding-left: 1em;
    	float: left;
    	width: 197px;
    }
    
    #main 
    {
    	margin-left: 250px;
    }
    
    #main h1
    {
    	font-size: 110%;
    }
    
    .vidBlock
    {
    	margin-top: 4em;
    	text-align: center;
    	margin-left: 250px;
    }
    
    .menu a 
    {
    	border:none;
    	font-weight:normal;
    }
    
    .menu, .menu ul 
    {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    
    .menu 
    {
    	width:200px;
    }
    
    .menu li 
    {
    	display:block;
    	margin:0;
    	padding:0;
    	margin-bottom:1px;
    }
    
    .menu a 
    {
    	display:block;
    	padding: 0.5em;
    	color:#ddd;
    	background:#303030;
    	text-decoration:none;
    }
    
    .menu a:hover
    {
    	background: #606060;
    }
    
    .menu a:active, .menu a:focus
    {
    	background: #b0b0b0;
    }
    
    .menu ul li 
    {
    	padding-left:10px;
    }
    
    .menu ul a 
    {
    	background:#fff; 
    	color: #000;
    	font-size: 0.8em;
    	padding: 0.25em;
    	margin-top: 1px;
    }
    
    .menu ul a:hover
    {
    	background:#c0c0c0;
    }
    
    .hidden {display:none;}
    
    #ads
    {
    	margin-bottom: 1em;
    	text-align: left;
    }
    
    #main
    {
        font-size: 95%;
    }
    
    #info
    {
    	font-size: 90%;
    	margin-bottom: 1em;
    	background: url(/image/info.png) no-repeat top left;
    	padding-left: 25px;
    	padding-bottom: 1em;
    }
    
    #results
    {
    	margin-top: 1em;
    }
    
    .browserInfo td, th
    {
        font-size: 80%;
        border: 1px solid #ccc;
        padding: 0.25em;
    }
    
    .browserInfo th
    {
        text-align: left;
    }
    
    .subDivide
    {
        background-color: #303030;
        color: #fff;
    }
    
    .browserInfo
    {
        border-collapse: collapse;
    }
    
    #rFrame
    {
        border: none;
        width: 100%;
        height: 600px;
    }
    
    .error
    {
        color: #993333;
    }
    
    .ok
    {
        color: #336633;
    }
    
    #error
    {
        color: #993333;
        margin-top: 1em;
        font-weight: bold;
    }
    
    .larger
    {
        font-size: 120%;
    }
    
    #passwords label
    {
        display: block;
        width: 120px;
        float: left;
        text-align: right;
        margin-right: 1em;
    }
    
    #passwords input
    {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }
    
    #map
    {
    	margin-left: 2em;
    
    }

  • #4
    New Coder
    Join Date
    Feb 2013
    Location
    Liverpool
    Posts
    68
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Just put borders around your divs and see where they are naurally aligning, they should, as stated earlier, sit on top of each other. If you are using floats and widths then be sure to set your width's to 100% and clear:left the following div (that comes after a div that has been float: left) - this way it puts the div onto a new line
    Working for Edge Three Sixty doing Drupal Development

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    These line are in the header div, move them to the menu div
    Code:
    <table width="500" border="1" cellspacing="0" cellpadding="0">
    <h3>Extra Details</h3>
    in the #menu remove width: 197px;
    in the #main add clear:both;

    Should do it.
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

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