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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Divs directly next to eachother

    Hello. I have an assignment for a class to create the image bellow using divs and css. The boxes are supposed to have a border and have the same thickness everywhere (ie the lines of the two bottom divs are supposed to look as if there's one). To me it would be much simpler to do this with a table but that's not an option. Any help would be appreciated.


  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    From a purely graphic standpoint the CSS code is actually much more simple than a table would be. If the eventual goal is a more complete page, study some of these layouts for CSS tips.

    What do you have so far in the way of code? Have you tried anything? You should know that a request for help for a school project with only the description of the assignment makes it sound an awful lot like you want us to do your assignment for you, something both your professor and the folks here would likely frown upon.
    matt | design | blog

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your response msuffern.

    Sorry I was not trying to be a leech I just needed a little direction. The templates you pointed me to got me on the right foot but I do still need a little help. Here's what I got so far:

    Code:
    <html>
    <head>
    <title>zomg it's a title</title>
    <link rel="stylesheet" type="text/css" href="css/css.css"/>
    </head>
    
    
    <body>
      <div class="top"></div>
      <div class="br"></div>
      <div class="bl"></div>
    </body>
    </html>
    And my CSS:
    Code:
    div.top {
      width:600px;
      height:200px;
      background: #333;
      color: #FFF
    }
    
    div.bl {
      background:#B9CAFF;
      width:300px;
      height:250px;
    }
    
    
    div.br {
      background:#FF8539;
      width:300px;
      height:250px;
    }
    What I need is for the orange box, div.br, to be to the right of the blue one, div.bl, directly next to each other. I believe I need to use the float property but when I apply a float right it is shifted all the way to the absolute right of the browser window. Is there a way to specifically tell it to be directly next to the left box?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Have a look at this - http://css.maxdesign.com.au/floatutorial/


    By giving it a DocType we can, hopefully, ensure it renders the same in all browsers. See the link about DocTypes in my sig below.
    By putting your 3 divs in a container div we can either move the container to the middle of the browser window or just margin it over from the edge.
    bl is floated left.
    br is margined over the width of bl.

    When you go to add your border, things will change. Border counts when totaling width, as do margin/padding. Have a look at the box model.
    Last edited by Excavator; 02-25-2009 at 09:28 AM. Reason: deleted code - didn't realize it was homework
    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


  •  

    Posting Permissions

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