CSS Help

Fehm · 13-07-2009, 05:54 PM

Right, I've only just begun coding very basic CSS. And i was wondering whether anyone could help me.

How do I position two div's so that they are on top of each other e.g

theres a navigation box and another underneath?

Thanks for any help! +rep!

=]

Fehm · 13-07-2009, 06:29 PM

Bump. I really need this as soon as possible

Would be extremely grateful to anyone!! =D!

Zhris · 13-07-2009, 06:55 PM

You have asked quite a broad question considering xhtml and css development is usually based on nested structures.

If you are using divs then in your xhtml should look something like...

<div id="div1">
<div id="div2">

</div>
</div>

Div 2 is nested within (and in front of) div 1.

Then you would then use css to style each of the 2 divs so that they are displayed how you want.

You mentioned navigation menus, could you explain a little more what you are trying to achieve?

Chris

BoyBetterKnow · 13-07-2009, 07:03 PM

erm. Well if u are just doing a div ontop of another div, to force it onto a "new line" you would use clear:both;

But it's good to have a navigation container and have a width set on it, but i always use clear:both just incase.

Fehm · 13-07-2009, 07:24 PM

[IMG]

[/IMG]

Thats the sorta layout I want.... Just the layout not what I want it to look like. Trying to achieve using pure CSS

Zhris · 13-07-2009, 07:42 PM

I've got to go but I very quickly made a template based on your image, although this structure was used on the link I showed you. Its very rough and would need work i.e the widths, heights etc

Save this as index.htm

<html>
<head>
<style type="text/css">
#wrapper{
padding:10px;
width:1000px;
height:1000px;
border:1px solid black;
}
#left{
float

eft;
width:300px;
height:1000px;
}
#right{
width:674px;
height:1000px;
border:1px solid black;
}
#upper{
width:290px;
height:200px;
border:1px solid black;
}
#lower{
margin-top: 10px;
width:290px;
height:790px;
border:1px solid black;
}

</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<div id="upper">
</div>
<div id="lower">
</div>
</div>
<div id="right">
</div>
</div>
</body>
</html>

BoyBetterKnow · 13-07-2009, 08:14 PM

A good idea would be to do something like

Code:

<div id="left">
    Content for left.
</div>

<div id="right">
</div>

And float left both of them and set a width on them. Then inside them u can have, for instance "navHeader" and set clear:both that to dodge potential side elements (but it obviously won't dodge the right div, the navHeader will only dodge the stuff in it's parent div.

Fehm · 13-07-2009, 08:20 PM

hmmm.... Now I've done that but the like second box (the one underneath the small one) just goes to the right of small one, How would I make it go underneath without it ruining the big content one?

=D

BoyBetterKnow · 13-07-2009, 08:33 PM

Originally Posted by Obulus

hmmm.... Now I've done that but the like second box (the one underneath the small one) just goes to the right of small one, How would I make it go underneath without it ruining the big content one?

=D

clear:both ?

Jam-ez · 13-07-2009, 08:34 PM

I'd say (based on my low CSS knowledge...)

Code:

<div id="wrapper">

     <div id="left_wrapper">
          
          <div id="left_top"></div>
          <div id="left_bottom"></div>
          
     </div>

     <div id="right_wrapper">
          
          <div id="right_content">
               
          </div>
          
     </div>
     
</div>

Then float right_wrapper right, left wrapper left, and clear: both; the left_bottom.

Thread: CSS Help

Thread Tools

CSS Help

Hey

Hey again

Posting Permissions