New Box Layout

  gibbs1984 18:47 30 Aug 2006


I have been playing around with my website for the last couple of hours and decided that I didn't really need all the space I had so I decided to make a sort of box style in the middle of the browser, I'm pretty new to CSS so if anyone can tell me if I've positioned things wrong then it would be much appreciated, also any views of the new layout are welcome.

Do the colours go together ???

Is it in the right position ???

etc etc

Please bear in mind I haven't added any content yet as I just wanted to make sure that the layout was ok, I have added it to my original site as a sort of secret page that can only be found at this address click here



  ade.h 19:08 30 Aug 2006

It looks like you haven't centred the div in your style sheet, but I'm not sure.

  gibbs1984 19:18 30 Aug 2006

Ok, I see what your saying, positioning the box so that it is in the center without positioning it exactly from the top and left but how do I do this though.

#box {
position: absolute, fixed, inherit, relative, static; ???

If you see what I mean.


  ade.h 19:27 30 Aug 2006

body {
margin: 0;
padding: 0;
text-align: center;
min-width: 800px;

  ade.h 19:29 30 Aug 2006

By the way; don't use absolute positioning because IE doesn't support it. If you need to position objects and text areas, use relative positioning.

  gibbs1984 21:14 30 Aug 2006

ade.h thanks for the reply, I have changed a couple of bits but if I was to make the browser window smaller it doesn't center the box.

Is there anyway to do this ???

This is the style that I have to position the box, it is set to relative.

#box {
font-family: Verdana, Helvetica, Arial, sans-serif;
width: 620px;
height: 600px;
border: 5px #7DA5D8 solid;
top: 100px;
left: 317px;
background-color: #BED8F3;


  ade.h 21:36 30 Aug 2006

You need to put a div around your body content, inside the body tags. Call it wrapper if you like.

#wrapper {
text-align: justify;
width: 796px;
margin-left: auto;
margin-right: auto;
padding-top: 5px;

That's what mine looks like. My test page is click here but bear in mind the trouble that I am having with my footer position. It's not supposed to be stuffed under a text area, but I can't get the layout to scroll. slightlymad is on the case for me though! (See my other thread).

  gibbs1984 21:59 30 Aug 2006

ade.h your a top man, it works a treat.

I can't thank you more, I would have been there for ever playing around with it, even went to css zen gardens and looked at their CSS but still couldn't figure it out.

slightlymad will fix it for you as well, she's a top girl ;o).

Thanks again.


  ade.h 22:10 30 Aug 2006

She is indeed!

I've been teaching myself using the Sitepoint books. They are better than any CSS website that I have ever seen because they explain it all very well and are clearly written. There are a few things that I want to know that the books don't cover, but that's to be expected. click here

  gibbs1984 22:15 30 Aug 2006

Yep I used the Sitepoint book "Build your own website the right way using HTML and CSS" and have just bought a new one which I haven't read yet "XML web development with PHP".

The CSS one was quality, you actualy designed a website as you went through the book which is much better than just explaining what each bit does.

As with everything there's bits you learn better than others and there's always something to learn.

  gibbs1984 20:42 04 Sep 2006

Right my new website is up and running.

What is peoples opinions ???

Just need to fill in, two pages and it's completely finished.

I haven't validated it yet but will do.


This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Fujitsu Lifebook P727 laptop review

Lightwell software lets you create mobile apps without using code

Best value Mac: Which is the best £1249 Mac to buy

Comment désactiver les programmes qui s'exécutent au démarrage de Windows 10 ?