Hi, I made a table recently with 3 headings, 3 content boxes and 3 bottom pieces. Like this: 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.
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"> </div> <div id="right"> </div> <div id="middle"> </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..
.......... or float all three Divs left. Ref: http://forums.digitalpoint.com/showthread.php?p=4322340#post4322340 And use HTML 4.01 Strict (or less desireably XHTML 1.0 Strict served as HTML). James
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?
Well, that is no monkey wrench in the "floating left" box model -- they appear in the order they are coded - left to right.
Not always - especially once negative margins and (when appropriate) relative positioning enter the picture.
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.
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.
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.