1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Putting boxes next to each other with DIV's and CSS

Discussion in 'CSS' started by Pandemix, Aug 31, 2007.

0
  1. #1
    Hi,

    I made a table recently with 3 headings, 3 content boxes and 3 bottom pieces. Like this:

    [​IMG]

    I want those tables to space out by an "x" number of pixels and I can't do that with a table. I know you need to do it with DIVs and CSS to do what I want.

    I made one box with CSS and DIVs, and I want to add a second and third box next to it, but everytime I add in the HTML code to put the second box next to the first box, it goes below it instead of next to it.

    How can I get these boxes to go next to each other? Help is very appreciated here. :)
     
    Pandemix, Aug 31, 2007 IP
  2. nwk

    nwk Well-Known Member

    Messages:
    385
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    158
    #2
    Firstly If you want to put space between the boxes, you can do it by using tables also. eg. "cellspacing=4"

    Also if you want to implement using divs and css, you need to float the divs.
    Here's a few tips :
    float the first div to left.
    float the 2nd div to right.(this div is goin to be the right most div)
    lastly float the 3rd div in the middle..

    Here's a sample code for your work..
    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="box">
<div id="left">&nbsp;</div>
<div id="right">&nbsp;</div>
<div id="middle">&nbsp;</div>
</div>
</body>
</html>
    Code (markup):
    CSS is here
    #box{
    border: 0px solid #000;
    width: 700px;
    margin: 0 auto;
    }
    #left{
    width: 100px;
    height: 40px;
    float: left;
    border: 1px solid #000;
    }
    #right{
    width:100px;
    height: 40px;
    float: right;
    border: 1px solid #000;
    }
    #middle{
    width: 500px;
    height: 40px;
    margin: 0 auto;
    border: 1px solid #000;
    }

    Also you have to put Transitional DTD at the head of your html file..
    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    Code (markup):
    and your code will not work properly without it.

    Hope it helps..:D
     
    nwk, Aug 31, 2007 IP
  3. jamesicus

    jamesicus Peon

    Messages:
    477
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #3
    jamesicus, Aug 31, 2007 IP
  4. Pandemix

    Pandemix Well-Known Member

    Messages:
    954
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    120
    #4
    Thank you both very much. I got it. :)
     
    Pandemix, Aug 31, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    And now it's time to throw a monkey wrench into the whole thing.

    In what order do you want those three boxes to appear in the HTML source code and what order do you want them to appear when rendered?
     
    Dan Schulz, Aug 31, 2007 IP
  6. jamesicus

    jamesicus Peon

    Messages:
    477
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Well, that is no monkey wrench in the "floating left" box model -- they appear in the order they are coded - left to right.
     
    jamesicus, Aug 31, 2007 IP
  7. Pandemix

    Pandemix Well-Known Member

    Messages:
    954
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    120
    #7
    Oh, its all solved now.
     
    Pandemix, Aug 31, 2007 IP
  8. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Not always - especially once negative margins and (when appropriate) relative positioning enter the picture.
     
    Dan Schulz, Aug 31, 2007 IP
  9. jamesicus

    jamesicus Peon

    Messages:
    477
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #9
    The basic model prevails unless it is manipulated as you suggest - that holds for any layout scheme - relative positioning is anamalous to the floating box model.
     
    jamesicus, Aug 31, 2007 IP
  10. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Relative positioning just moves the "appearance" of the location of an element without actually changing its location or removing it from the flow.

    It's a visual effect, nothing more.
     
    Dan Schulz, Aug 31, 2007 IP
  11. jamesicus

    jamesicus Peon

    Messages:
    477
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Yes, you can use it as you please.
     
    jamesicus, Aug 31, 2007 IP
  12. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #12
    james, I think he means, when you use floats to place stuff, you may find that your page looks really cool and logically placed-- but then if you look at the page with CSS and images off, perhaps a sidebar (or both sidebars) appear first before the content. Doesn't bother us with mice and graphics and clear columns, but with screen readers (or Lynx), it can get pretty tedious to listen to the whole menu or list of links or whatever on every single page before getting to the content. Easily remedied, it's just that one has to keep that in mind when they're floating stuff.

    What the heck is float: middle? I thought there was only right, left, and none.
     
    Stomme poes, Sep 3, 2007 IP
  13. Pandemix

    Pandemix Well-Known Member

    Messages:
    954
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    120
    #13
    There is no float:middle. Only left and right.
     
    Pandemix, Sep 3, 2007 IP