Results 1 to 3 of 3

Thread: [RESOLVED] [CSS] Vertically Stack DIVs

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    Resolved [RESOLVED] [CSS] Vertically Stack DIVs

    I'm having an issue with vertically stacking two DIV elements. In one DIV I have two forms which I want to be horizontally aligned and in the other I have DIV elements which I want to be vertically aligned. Here is my HTML:
    Code:
    <div id='main'>
    	<h3>Search</h3>
    	
    	<div>
    		<form>
    			<legend>Criteria</legend>
    			<div class='radioButton'><input name='for' type='radio' value='criteria'>Name</div>
    			<div class='radioButton'><input name='for' type='radio' value='criteria'>Estate</div>
    			<div class='radioButton'><input name='for' type='radio' value='criteria'>Business/Organization</div>
    			<div class='radioButton'><input name='for' type='radio' value='criteria'>Policy</div>
    			<div class='radioButton'><input name='for' type='radio' value='criteria'>Phone</div>
    			<div class='radioButton'><input name='for' type='radio' value='criteria'>Email</div>
    		</form>
    		
    		<form>
    			<legend>For</legend>
    			<div class='radioButton'><input name='for' type='radio' value='customer'>Customer</div>
    			<div class='radioButton'><input name='for' type='radio' value='prospect'>Prospect</div>
    		</form>
    	</div>
    	
    	<div>
    		<div id='required'>
    			<h4>Required</h4>
    			<div class='ruler'></div>
    			<label id='lblRequired'></label><input id='txtRequired' placeholder='' type='text' />
    		</div>
    
    		<div id='optional'>
    			<h4>Optional</h4>
    			<div class='ruler'></div>
    			<label id='lblRequired'></label><input id='txtRequired' placeholder='' type='text' />
    		</div>
    	</div>
    Here is the CSS:
    Code:
    #main {
    	display: block;
    	height: 100%;
    	left: 16%;
    	position: absolute;
    	width: 84%;
    }
    
    #main div {
    	margin: 15px 25px;
    	width: 100%;
    }
    
    #main form {
    	display: inline;
    	float: left;
    }
    This is how I'm wanting it to look like:
    Name:  properties_window.png
Views: 857
Size:  6.7 KB

    But for some reason I can't get it to work. What's happening is my bottom DIV in the <div id='main'> is to the right of the top DIV.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2
    Hyperactive Member coothead's Avatar
    Join Date
    Oct 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    284

    Re: [CSS] Vertically Stack DIVs

    Hi there dday9,

    does this help...
    Code:
    
    <!DOCTYPE html>
    <html  lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style media="screen">
    #main {
        width: 84%;
        margin:auto;
     }
    #main form {
        float:left;
        margin:1% 1% 1% 0;
     }
    #main form fieldset {
        padding:1em;
        white-space:nowrap;
     }
    #main form label {
        display:block;
        margin:0.5em 0;
     }
    #main form input {
        margin-right:1.25em;
     }
    #required {
        clear:both;
     }
    </style>
    
    </head>
    <body>
    
    <div id="main">
    
    <h3>Search</h3>	
    	
    <form action="#">
     <fieldset>
      <legend>Criteria</legend>
      <label><input name="for" type="radio" value="criteria">Name</label>
      <label><input name="for" type="radio" value="criteria">Estate</label>
      <label><input name="for" type="radio" value="criteria">Business/Organization</label>
      <label><input name="for" type="radio" value="criteria">Policy</label>
      <label><input name="for" type="radio" value="criteria">Phone</label>
      <label><input name="for" type="radio" value="criteria">Email</label>
     </fieldset>
    </form>
    		
    <form action="#">
     <fieldset>
      <legend>For</legend>
       <label><input name="for" type="radio" value="customer">Customer</label>
       <label><input name="for" type="radio" value="prospect">Prospect</label>
     </fieldset>
    </form>
    
    <div id="required">
     <h4>Required</h4>
     <label class="lblRequired"><input class="txtRequired" placeholder="" type="text"></label>
    </div>
    
    <div id="optional">
     <h4>Optional</h4>
     <label class="lblRequired"><input class="txtRequired" placeholder="" type="text"></label>
    </div>
    
    </div>
    
    </body>
    </html>


    ~ the original bald headed old fart ~

  3. #3

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    Re: [CSS] Vertically Stack DIVs

    Thanks for the input coothead, but I actually decided to go with a different layout over the weekend.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

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



Click Here to Expand Forum to Full Width