473,372 Members | 1,200 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 software developers and data experts.

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 25346
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

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

Similar topics

5
by: Poonam | last post by:
Hi there. How can i maintain the spacing between to divs if palced side by side with 10px spacing between them.. Not using any tables. And atleast making one of the div relative positioning. ...
9
by: Preston Crawford | last post by:
I know this is probably a dumb question so please be patient with me. I've been doing HTML since 1994, but mostly for projects that had to be as completely compatible as possible and mostly...
2
by: Egon Pasztor | last post by:
Hi. I'm new at CSS, so maybe this is obvious, but I've looked around quite a bit looking for a solution. I'm playing with the vertical positioning of elements in a 2-column layout. The...
4
by: Aaron | last post by:
I have the following divs: <div style="background-image: url(images/house_01.jpg); width: 249px; height: 346px;"></div> <div style="background-image: url(images/house_02.jpg); width: 251px;...
15
by: red | last post by:
How do I center two side by side divs ? I've been writing css pages for a while but there's one thing tha still eludes me. I can center a div with margin auto. I can place two divs side by side...
1
by: no0bodyhome | last post by:
Why am I having so much trouble positioning divs? Am I in a tables mindset here? Why doesn't content flow below or alongside where it is suppose to? I created the example below to give you...
3
by: Oddball | last post by:
I have a problem with the positioning of two divisions. They are containined within a content division in which all the page content happens (ie not the menus, etc.). The behavior I would like...
10
by: S | last post by:
Hello I have a (fairly) simple layout, part of which you folks so kindly helped me with already (thank you all). This layout contains: - A header area (100% width across top) - A nav area...
1
by: modermo | last post by:
I was having a little think to myself the other day. Could I place javascript inside a div, and then manipulate/ or position the div usin css? Or is it best to position via javascript? I tried...
3
jhardman
by: jhardman | last post by:
I'm almost to the point of using tables to position my elements. That is how bad this is. So here's the rundown. I have an old page (created by someone else) that I was trying to update to...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.