469,270 Members | 1,449 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,270 developers. It's quick & easy.

Positioning two divs side by side

How do I do it? I've been trying to work it out for ages but no amount of google searches have lead me to the answer. I have two divs, and when they're put in the container on their own they position perfectly, but as soon as I add the second div, everything DIES!!!!!! :(

Here's my code:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3.  
  4. <html>
  5. <head>
  6. <title>
  7. Oliver's Blog
  8. </title>
  9.  
  10. <style type="text/css">
  11.  
  12. body {
  13.     background: #00A5DE; 
  14.     background-image: url('Layout/blog_layout.png');
  15.     background-repeat: no-repeat;
  16.     background-position: top center;
  17.     }
  18.  
  19. div.content{
  20.     margin-left: auto;
  21.     margin-right: auto;
  22.     width: 700px;
  23.     height: 750px;
  24.     border: 1px solid #000000;
  25.     }
  26.  
  27. div.nav     {
  28.     position: relative;
  29.     z-index: 1; 
  30.     height: 475px;
  31.     width: 195px; 
  32.     top: 245px;
  33.     float: left;
  34.     border: 1px solid #000000
  35.     }
  36.  
  37. div.blog {
  38.     position: relative;
  39.     z-index: 1;
  40.     height: 450px;
  41.     width: 467px;
  42.     top: 230px;
  43.     left: 226px;
  44.     border: 1px solid #000000
  45.     }
  46. </style>
  47. </head>
  48.  
  49. <body>
  50.  
  51. <div class="content">
  52.  
  53. <div class="nav">
  54. This is a piece of test writing
  55. </div>
  56.  
  57. <div class="blog" style="clear: both">
  58. This is another piece of test writing
  59. </div>
  60.  
  61. </div>
  62.  
  63. </body>
  64. </html>
  65.  
Any help?
Thankyou :)
Aug 31 '07 #1
6 24471
spacix
12
use spans inside your content div instead of more divs if you want them to be side-by-side and then they wont line break (span and div are mostly the thing except for the break at end) and you won't need the z-index anymore too!

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3.  
  4. <html>
  5. <head>
  6. <title>
  7. Oliver's Blog
  8. </title>
  9.  
  10. <style type="text/css">
  11.  
  12. body {
  13.     background: #00A5DE; 
  14.     background-image: url('Layout/blog_layout.png');
  15.     background-repeat: no-repeat;
  16.     background-position: top center;
  17.     }
  18.  
  19. div.content{
  20.     margin-left: auto;
  21.     margin-right: auto;
  22.     width: 700px;
  23.     height: 750px;
  24.     border: 1px solid #000000;
  25.     }
  26.  
  27. div.nav     {
  28.     position: relative;
  29.     height: 475px;
  30.     width: 195px; 
  31.     top: 245px;
  32.     float: left;
  33.     border: 1px solid #000000
  34.     }
  35.  
  36. div.blog {
  37.     position: relative;
  38.     height: 450px;
  39.     width: 467px;
  40.     top: 230px;
  41.     left: 226px;
  42.     border: 1px solid #000000
  43.     }
  44. </style>
  45. </head>
  46.  
  47. <body>
  48.  
  49. <div class="content">
  50.  
  51. <span class="nav">
  52. This is a piece of test writing
  53. </span>
  54.  
  55. <span class="blog" style="clear: both">
  56. This is another piece of test writing
  57. </span>
  58.  
  59. </div>
  60.  
  61. </body>
  62. </html>
  63.  
Aug 31 '07 #2
gregerly
192 Expert 100+
I think the best way to position to div elements side by side is by the use of a float. The code could look like this:

[HTML]<div id='div1'></div>
<div id='div2'></div>[/HTML]

Expand|Select|Wrap|Line Numbers
  1. #div1{float:left; width:400px;}
This would make div1 400px wide, with div2 placed directly to the side of div1.

Greg
Aug 31 '07 #3
Yeah, thats what I've tried. In the div.nav, there's the float: left; attribute. But it doesn't seem to be doing anything. What am I doing wrong?
Thankyou!
Aug 31 '07 #4
spacix
12
but if you just switch to spans (the code I posted tested fine in FF and IE for me) you can allow for auto sizing for people with large resolutions and increased text sizes, tho floating it on top will work too for a fixed position. It only matters on how you want it to look, but the swap to inline span's would be my preference / method...

I can see why you didn't know/find the answer to this with google as what you wanted to do needed diffrent tag.

more info on span:
HTML <span> tag
Definition and Usage

The <span> tag is used to group inline-elements in a document.
Differences Between HTML and XHTML

NONE
Tips and Notes

Tip: Use the <span> tag to group inline-elements to format them with styles


HTML <div> tag
Definition and Usage

The <div> tag defines a division/section in a document.
Differences Between HTML and XHTML

The "align" attribute of the div element was deprecated in HTML 4.01.

The "align" attribute of the div element is not supported in XHTML 1.0 Strict DTD.
Tips and Notes

Note: Browsers usually place a line break before and after the div element.

Tip: Use the <div> tag to group block-elements to format them with styles.
Aug 31 '07 #5
drhowarddrfine
7,435 Expert 4TB
I believe I solved this in your other post. I should merge the two.
Aug 31 '07 #6
Thankyou very much spacix, I've got it sorted now. Yay :)
Aug 31 '07 #7

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by Poonam | last post: by
2 posts views Thread by Egon Pasztor | last post: by
4 posts views Thread by Aaron | last post: by
15 posts views Thread by red | last post: by
3 posts views Thread by Oddball | last post: by
jhardman
3 posts views Thread by jhardman | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.