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 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2009
    Location
    Maryland
    Posts
    47
    Thanks
    21
    Thanked 0 Times in 0 Posts

    How to add another div directly below rightdiv?

    Hi,

    I am making this website for a friend: http://www.ventime.com and I am trying to add another separate div right below my rightdiv which holds the text and heading of, "how it works." I am lost on how to add another div directly below my rightdiv without messing up what I have. I've tried adding another div, but it doesn't show up right under the rightdiv like I need it to.

    This is the code for my three white background divs on the page. (The top ad holder div, the left div and the right div.)
    Code:
     
     #adstop{
    	width:600px;
    	float:right;
    	background-color: #FFF;
    	padding: 10px;
    	margin-top:10px;
    	border: 1px solid #000;
    	height: 100%;
    	
     }
    
    #leftdiv{width:420px; float:left;   background-color: #FFF;
    padding: 10px;
    margin-top:30px;
    border: 1px solid #000;height: 100%;
     }
    
    #rightdiv{width:275px; float:right; padding:0 5px 0 13px; background-color: #FFF;
    border: 1px solid #000;
    margin-top:30px;}
    If I wanted to add another div, same width as the rightdiv, directly under the rightdiv, can someone explain to me how I would code that? I'm having a problem getting it to show up directly below. I think it has something to do with how I have the divs set up and the floating... Agh!

    Thanks in advance again!
    ~Liz

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello WebLizzard,
    In your CSS, change #rightdiv to a class, .rightdiv, so you can re-use it. See class vs div here.

    Then, to get floats to work, they need to be in the right order. Move your #leftdiv up so it comes first and make these extra changes highlightedin red -
    Code:
    " height="60" scrolling="no" width="468"></iframe></ins></ins></p>
    </div>
      
        
    <div id="leftdiv">
     
        	<h2>venTime</h2>
        
                    <p><em>Welcome to venTime! Consider this your venting spot where you can come to let it all out. Is there no one to talk to, the boss creeping by, or a gripe burning a hole in your back pocket? Well, don't stress anymore - we're here to listen! So take a deep breath, let it out, and get on with your day. At venTime, the grass is always greener!</em></p>
    
        <hr>
     <h2>try it out: </h2>
    
    <p></p><div class="fb-comments  fb_iframe_widget" data-href="www.venTime.com" data-num-posts="8" data-width="380"><span><iframe src="https://www.facebook.com/plugins/comments.php?channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df2a91f0f507f17c%26origin%3Dhttp%253A%252F%252Fwww.ventime.com%252Ff3b1779e6976ce2%26relation%3Dparent.parent%26transport%3Dpostmessage&amp;href=www.venTime.com&amp;locale=en_US&amp;numposts=8&amp;sdk=joey&amp;width=380" class="fb_ltr" style="border: medium none; overflow: hidden; height: 1912px; width: 380px;" name="f2c00ef2337c96" id="f6d408c4866f18" scrolling="no"></iframe></span></div><p></p>
    <hr>
    
    </div>
    <div class="rightdiv">
        <h2>how it works</h2>
        <p><em>To air your grievances,  simply click on the “Add a comment” button. If you have already logged into  Facebook, you’ll find that your profile picture is to the left of the comment  box and you’re ready to post. If you have not already logged in, you will be  asked to do so once you click the “Comment using…” button. Simply click on  Facebook and it will bring you to a login page. Unfortunately, the Facebook comment  box does not currently allow users to log in through the other options listed.  We’re looking into it!</em></p>
        <p>&nbsp;</p>
        <p><em>Additionally, vents  may be sorted chronologically as well as by the user’s social rank. The drop  down menu to sort comments may be found directly beneath the words “try it out”  to the left of this box: just click on the small blue downwards facing arrow.  Reverse chronological will sort vents so that the most recent ones appear at  the top, while chronological will start with the very first vents.</em>    </p>
       
        <p>&nbsp;</p>
      
                    
      </div>
    <div class="rightdiv">
    Now you've made another div here.
    </div>
      
    
    </div>
    <div id="footerinfo">
      <div id="footerinfospan">
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    WebLizzard (12-15-2011)

  • #3
    New Coder
    Join Date
    Aug 2009
    Location
    Maryland
    Posts
    47
    Thanks
    21
    Thanked 0 Times in 0 Posts

    Smile Thank you Excavator!

    Got it! Thank you so much again Excavator - you have helped me so much. I am learning a lot too. This is a great forum to get help and also learn! XO
    ~LizZard


  •  

    Tags for this Thread

    Posting Permissions

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