471,582 Members | 1,468 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

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

CSS Div Layout


I'm trying to make a div layout for a blog site I'm starting, but I've run into problems. I'm trying to put my background image in one div and then add other divs over the top which will contain the text of a page. I am also trying to center everything on the page and make it re-sizable, which is why I'm not just absolute positioning it.

At the moment, I have the background image and then the blocks of text further down the page.

Here is my code:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>
  4. Oliver's Blog
  5. </title>
  7. <style type="text/css">
  9. body            {background: #00A5DE;}
  10. div.content        {z-position: 1; display: block; margin-left: auto; margin-right: auto; width: 700px; height: 750px; border: 1px solid #000000}
  11. div.nav            {z-position: 2; relative; top: 200px; height: 475px; width: 195px; border: 1px solid #000000}
  12. div.blog        {z-position: 2; relative; top: 200px; left: 250px; height: 375px; width: 475; border: 1px solid #000000}
  14. </style>
  15. </head>
  17. <body>
  19. <div class="content">
  20. <img src="Layout\blog_layout.png">
  22. <div class="nav">
  23. this is a piece of test writing
  24. </div>
  26. <div class="blog">
  27. This is another piece of test writing
  28. </div>
  30. </body>
  31. </html>
Thankyou for any help :)
Aug 29 '07 #1
5 3078
173 Expert 100+
Hi Oliver,

Welcome to TSDN...

Firstly have you declared the DOCTYPE for the document, if you don't then IE will go into quirks mode which can cause all sorts of problems with CSS.

Secondly it does not look like the content div is closed, this would cause a validation error.

If you are using a background it is generally better to put it in the styling as the background instead of in the HTML. Something like this:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3.   <head>
  4.     <title>
  5.       Oliver's Blog
  6.     </title>
  7.     <style type="text/css">
  8.       body{background: #00A5DE;}
  9.       div.content  {z-position: 1; display: block; margin-left: auto; margin-right: auto; width: 700px; height: 750px; border: 1px solid #000000;background:#FFFFFF Layout\blog_layout.png no-repeat top center}
  10.       div.nav{z-position: 2; relative; top: 200px; height: 475px; width: 195px; border: 1px solid #000000}
  11.       div.blog{z-position: 2; relative; top: 200px; left: 250px; height: 375px; width: 475; border: 1px solid #000000}
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <div class="content">
  16.       <div class="nav">
  17.         this is a piece of test writing
  18.       </div>
  19.       <div class="blog">
  20.         This is another piece of test writing
  21.       </div>
  22.     </div>
  23.   </body>
  24.  </html>
The background rule is setting the background colour to white (the part not covered by the image, setting the background image to the URL of the image, setting no repeat on the image and positioning the image in the top centre of the content div. A good page for explanation of the background property is here
Aug 29 '07 #2
Thankyou for your fantastic reply :) I knew I'd be doing things the hard way :P
Was wondering if you could help me with my other problem:
I'm trying to position the divs that contain my content now, but how can I do this without using absolute positioning? I want my page to be re-sizable in different sized browser windows and absolute positioning fixes the divs in place. Also when I set the positioning to relative and set the left-margin as 20% and the right-margin as 80% it works on my displays well in my maximised browser window but when i resize it the divs misalign themselves from the background image. What can I do?!
Thankyou :)
Aug 29 '07 #3
7,435 Expert 4TB
here is no such thing as 'z-position' and all values must have a unit value such as 'width: 50px'. You probably wanted 'z-index'.

Absolute positioning does not fix anything into place. You can use relative positioning with percent, ems, or anything just as with any other method.

It is not necessary to use 'display:block' for divs since <div> is a block level element.

Much of your css is invalid. Here is a fixed version but it doesn't do what you want:
Expand|Select|Wrap|Line Numbers
  1.       body{background: #00A5DE;}
  2.       div.content  {
  3.           margin:0 auto; 
  4.           width: 700px; 
  5.           height: 750px; 
  6.           border: 1px solid #000000;
  7.           background: #fff url(layout/blog_layout.png) no-repeat top center
  8.           }
  9.       div.nav{
  10.           top: 200px; 
  11.           height: 475px; 
  12.           width: 195px; 
  13.           border: 1px solid #000000
  14.           }
  15.       div.blog{
  16.           top: 200px; 
  17.           left: 250px; 
  18.           height: 375px; 
  19.           width: 475px; 
  20.           border: 1px solid #000000
  21.           }
Note the forward slash vs the one you used in the url.
Aug 30 '07 #4
Thankyou so much for all your help. I've attempted to clean up my CSS and I've added a DOCTYPE etc. Last pestering question I promise.....
I've got my two div frames now, and they're positioned perfectly in a container which allows the windows to be scaled etc. But when they're both put into the container, the first one declared in the body 'pushes' the second one out of the container. I want them side by side, but nothing I seem to do gets them there. Here's my CSS:

Expand|Select|Wrap|Line Numbers
  2. "http://www.w3.org/TR/html4/strict.dtd">
  4. <html>
  5. <head>
  6. <title>
  7. Oliver's Blog
  8. </title>
  10. <style type="text/css">
  12. body {
  13.     background: #00A5DE; 
  14.     background-image: url('Layout/blog_layout.png');
  15.     background-repeat: no-repeat;
  16.     background-position: top center;
  17.     }
  19. div.content{
  20.     margin-left: auto;
  21.     margin-right: auto;
  22.     width: 700px;
  23.     height: 750px;
  24.     border: 1px solid #000000;
  25.     }
  27. div.nav     {
  28.     position: relative;
  29.     z-index: 1; 
  30.     height: 475px;
  31.     width: 195px; 
  32.     top: 245px;
  33.     border: 1px solid #000000;
  34.     }
  36. div.blog {
  37.     position: relative;
  38.     z-index: 1;
  39.     height: 450px;
  40.     width: 467px;
  41.     top: 230px;
  42.     left: 226px;
  43.     border: 1px solid #000000;
  44.     }
  46. </style>
  47. </head>
  49. <body>
  51. <div class="content">
  53. <div class="blog">
  54. This is another piece of test writing
  55. </div>
  57. <div class="nav">
  58. This is a piece of test writing
  59. </div>
  61. </div>
  63. </body>
  64. </html>
Aug 31 '07 #5
7,435 Expert 4TB
When you position an element 'relative' it does not vacate the space it originally occupied and that space will not be filled in automatically.

Perhaps what you want to do can be accomplished by changing that to float:left on one and float:right on the other, removing position:relative.
Aug 31 '07 #6

Post your reply

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

Similar topics

39 posts views Thread by Zak McGregor | last post: by
47 posts views Thread by Neal | last post: by
20 posts views Thread by Tammy | last post: by
10 posts views Thread by Volker Lenhardt | last post: by
3 posts views Thread by Samuel Shulman | last post: by
5 posts views Thread by Jeff User | last post: by
5 posts views Thread by Ed Sproull [MSFT] | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by lumer26 | last post: by
1 post views Thread by lumer26 | last post: by
reply views Thread by lumer26 | last post: by

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.