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
    Aug 2009
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to position div(s) within a div?

    Hi,
    I'm a CSS and HTML noob.

    This is my code:
    Code:
    #DIV1 {width: 770px;height: x;border-width: 1px; border-style:solid; border-color: #00000;background-color: #FFFFFF}
    
    #DIV2 {width: 200px;height: auto;background-color: #FFFFFF; text-align:center;}
    
    
    #DIV3 {width: 560px;height: auto;background-color: #FFFFFF; text-align:center;}
    
    <div align="center"><div id="DIV1"><p>
    <h1>Introductions</h1><b>texttexttext</b>
    
    <div align="right"><div id="DIV2">
    <h2>testing</h2>
    text <b>bold</b> <i>italic</i> <u>underline</u></div></div>
    
    
    <div align="left"><div id="DIV3">
    <h2>Testing</h2>
    text <b>bold</b> <i>italic</i> <u>underline</u></div></div>
    Looks like this:


    How do I make it look something like this:

    (I used paint to edit this, it's hard to express what I want in words so I just do pictures)

    Please help.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    combustion (09-02-2009)

  • #3
    New Coder
    Join Date
    Aug 2009
    Location
    Coastal North Carolina
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think that your DIV 1 is too wide and therefore pushing it to the bottom. Try only having the DIV 1 be 760 px wide.

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    The align attribute is depreceated an can be re=created with CSS.

    Use float:left; float:right To align DIV's to the left and right
    And use margin: 0 auto; to center a DIV with an assigned width
    or text-align:center; to center in-line elements, e.g span img a

  • #5
    New Coder
    Join Date
    Aug 2009
    Posts
    94
    Thanks
    0
    Thanked 16 Times in 16 Posts
    <html>
    <head>
    <style>
    #DIV2 {
    float:left;
    margin-top:0px;
    width: 560px;height: auto;background-color: #FFFFFF; text-align:center;
    }
    #DIV3 {
    float:left;
    width: 200px;height: auto;background-color: #FFFFFF; text-align:center;
    margin-left: 10px;
    }

    #DIV1 {
    width: 780px; border: 2px solid black;
    background-color: #53868B;
    padding: 0px;
    margin: 0px;
    }

    #main_container{
    width: 780px;
    margin: auto;
    }

    #DIV1 span{
    font: bold 28px "BRUSH SCRIPT MT", "Lucida Grande", "Verdana", "Arial", sans-serif;
    }

    #DIV2 h2{
    border-bottom: 2px solid #53868B;
    text-align:left
    }

    #DIV3 h2{
    border-bottom: 2px solid #53868B;
    text-align:left
    }
    </style>

    </head>
    <body>
    <div align="center">
    <div id="DIV1">
    <span>Introductions</span>
    </div>
    <b>texttexttext</b>
    </div>
    <div id = "main_container">
    <div id = "DIV2">
    <h2>Testing</h2>
    text <b>bold</b> <i>italic</i> <u>underline</u>
    </div>
    <div id ="DIV3">
    <h2>testing</h2>
    text <b>bold</b> <i>italic</i> <u>underline</u>
    </div>
    </div>
    </body>
    </html>

  • Users who have thanked jolly_nikki for this post:

    combustion (09-02-2009)


  •  

    Posting Permissions

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