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 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    61
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question using DIV's as background

    I currently use DIVs on my site to place text within its own background and the CSS and HTML looks like this
    Code:
    #left {
    height:auto;
    font-size:12px;
      float: left;
      width: 15%;
      background-color:#9BD2F1;
      color:#000000;
       
    }
    #right {
    height:auto;
    font-size:16px;
    font-weight:bold
      float: right;
      width: 85%;
      background-color: black;
      color:#9BD2F1;
    }
    #container {
    width:80.5%;
      padding: 3px;
      background-color:#9bd2f1;
      overflow: hidden;
    }
    Code:
    <div id="container">
      <div id="left">Text Here</div>
      <div id="right">Text here</div>
    </div>
    The "Container" DIV gives me a perfect rectangle. Is there a way of doing this so the corners are rounded?

    Also, if the "right" DIV contains a lot more text than the "left" DIV, how can I get both heights to adjust together so I dont have two boxes at different heights?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Check the Nifty Corners
    Also, if the "right" DIV contains a lot more text than the "left" DIV, how can I get both heights to adjust together so I dont have two boxes at different heights?
    by faux-columns
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Oct 2008
    Posts
    61
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I dont get it, I've tried to put that in and it doesn't work.
    I want a box shape 150px wide and 200px high. I want the border color to be #9bd2f1 and the main area to be #808080.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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:

    blackwolf (10-24-2008)

  • #5
    New Coder
    Join Date
    Oct 2008
    Posts
    61
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I need to get 3 small boxes next to each other but when I put the DIVs on the page, they are huge and they are below each other.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You'd need to apply floats to place more than one block level element in same line
    Code:
    #wrap{
    border:1px solid red;
    }
    
    #wrap div{
    float:left;
    height:100px;
    width:30&#37;;
    }
    Code:
    <div id="wrap">
     <div>A</div>
     <div>B</div>
     <div>C</div>
    </div>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    div {
    border:5px solid #4FFFA1;
    padding:30px;
    background:#F6FFA1;
    width:250px;
    border-radius:25px;
    }
    Source: CSS rounded corners box

    vayne


  •  

    Posting Permissions

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