views:

258

answers:

4

Hi there,

i am trying to create a website with div's and css styleing, what i want to do is sit 2 divisions one on top of the other, but centered to the middle of the page, so the top box will be called container, and the bottom box will be called quicklinks

an example of what im trying to achieve is http://www.whirlpool.net.au/ so i have two div boxes the top container will contain all the page info, and the bottom will have an extrernal styleing to make editing links easyier as it will be placed on each page of the website, but im not sure if its possible this way?

both div's will be 900px wide the container will have a height of 0 auto; so it grows with the content placed inside. the quicklinks div will have a height of 60px and will obviously move up and down the page under the container box when the content inside grows or shrinks.

i used the

<stlye type="text/css">

.container{<br>
position:absolute: <br>
left: 50%;<br>
width: 900px;<br>
height: 0 auto;<br>
top: 0%;<br>
margin-left: -450px;<br>
}

.quicklinks{<br>
position:static; <br>
left: 50%;<br>
width: 900px; <br>
height: 60px; <br>
margin-left: -450px; <br>
}
</style>

</head>

<body>

<div class="container"></div><br>
<div class"quicklinks"></div><br>
</div>

</body> <br>
</html>

and this code above will bring the container box to the very center of the page but the quicklinks div will sit over the top of this and i need it to fall under it.

<stlye type="text/css">

.container{<br>
width: 900px;<br>
height: 0 auto;<br>
top: 0%;<br>
}

.quicklinks{<br>
position:static; <br>
width: 900px; <br>
height: 60px; <br>
}
</style>

</head>

<body>

<div class="container"></div><br>
<div class"quicklinks"></div><br>
</div>

</body> <br>
</html>

this code above will bring the quicklinks div under the container but both will sit at the top left corner, i can get it to look like its in the center but i want it to acturley find the center per browser.

so could any one please help with this,

  1. am i usign the correct way of scripting to achieve this, and if so
  2. what am i missing out to correct the problem?

cheers paul

A: 

To achieve this effect you need something like this

body {text-align:center;}
#wrapper {margin-left:auto;margin-right:auto; text-align:left;width:900px;}
#container{}
#quicklinks{}

<div id="wrapper">
  <div id="container">
  </div>
  <div id="quicklinks">
  </div>
</div>

Once you have established the page width and centering with a wrapper the default behaviour for divs is to appear one below the other.

wheresrhys
thanks for your advice wheresrhys
+2  A: 

I used your top example and spelt style correctly and assigned the class quicklinks also.

Then margin:auto for both divs worked a treat. I also removed the position:static, didn't think it was needed.

.container{
  width: 900px;
  height: 0 auto;
  top: 0%;
  margin: auto;
}

.quicklinks{
  width: 900px; 
  height: 60px; 
  margin: auto; 
}

Phil

Phil Carter
cheers phil, i cant believe how simple it was to work, haha.
You might, if it works, want to accept the answer? Just a thought... =)
David Thomas
A: 

maybe this could help you:

http://css.maxdesign.com.au/floatutorial/

http://webdesign.about.com/od/advancedcss/a/aa010107.htm

and specially this :

http://www.w3schools.com/css/pr_class_float.asp

try to use "float" on your css file

thanks very much pearlon this will come in handy.
A: 

This is a rather simple task to achieve, all you need to do is to set margin:0 auto; to both div's this will center them both.

The code example below is a very simple example of this.

<style>
    .box {width:900px; margin:10px auto; padding:10px; border:5px solid #000;}
</style>

<div class="box">Top Box</div>
<div class="box">Bottom Box</div>

An even better way to achieve this would be to use a containing DIV which you use to fix the width and center

<style>
    .container {width:900px; margin:0 auto; padding:10px; border:5px solid #99cc00; }
    .box {margin-top:10px; padding:10px; border:5px solid #000;}
</style>
<div class="container">
    <div class="box">Top Box</div>
    <div class="box">Bottom Box</div>
</div>
Phunky