472,992 Members | 3,349 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,992 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 3155
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

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

Similar topics

by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | ...
by: Zak McGregor | last post by:
Hi all Are there any good solutions to aligning form field names and input boxes without resorting to tables? I am struggling to do this nicely at the moment. Thanks Ciao Zak
by: Neal | last post by:
Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.
by: Tammy | last post by:
What would be a good alternative to using frames? I need something that will section my webpage into two halves and can change both frames on a single click. Thanks in Advance, Tammy
by: Volker Lenhardt | last post by:
For a QApplication (PyQt) on the small screen of my Zaurus 5500 PDA I try to layout my data output in a QScrollView as the central widget. I'd prefer to use QGridLayout, but cannot add it to the...
by: Luke | last post by:
Hi. I am trying to make correct layout, here is an example of (dynamically generated content via jsp): http://localhost/www/layout.htm Most outer div is positioned absolute (if not then it...
by: Samuel Shulman | last post by:
I am looking for good guidance for positioning controls on the form.document, it is absolute nightmare and I don't know where to begin Thank you, Samuel Shulman
by: Jeff User | last post by:
Hi all I am writing program/framework to server a web site dynamically based on stored web page data with C#, .net1.1 What is the preferred means of controlling page layout, frames or...
by: Ed Sproull [MSFT] | last post by:
First I'm pretty new to ASP.NET and I'm having a simple problem. I have small website with a header, sidebar and the the content. I want my content to appear beside my sidebar which seems to be a...
by: brave1979 | last post by:
Please check out my javascript library that allows you to create any layout for your web page, nested as deep as you like, adjusting to width and height of a browser window. You just describe it in...
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...
by: SueHopson | last post by:
Hi All, I'm trying to create a single code (run off a button that calls the Private Sub) for our parts list report that will allow the user to filter by either/both PartVendor and PartType. On...

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.