PDA

Click to See Complete Forum and Search --> : positioning elements w/in element

marcusami
04-28-2008, 11:35 AM
hey,
I have a container div that is going to hold 2 sub divs
leftMenu and contentArea. I want these two lined up next to eachother;
what I have appears to me that it should do what I desire, but of course it doesnt. Could you please, not just post a solution, but explain whats going on here.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>

</title>
<style type="text/css">
<!--
#container{
position:relative;
width:900px;
background-color:#d6ae84;
margin: 0 auto;
}

#leftMenu{
position:relative;
top:0%;
width:250px;
background-color:#d6ae84;

}

#left_top_Logo{
position:relative;
top:0%;
width:250px; height:265px;
background-image:url('images/leatherhead_head.gif');
margin-left:0%;
}

#contentArea{
position:relative;
top:0%;
width:650px; height:225px;
background-image:url('images/logo.gif');
margin-left:26%;
}
-->
</style>

</head>
<body>
<div id="container">
<!-- Container -->
<div id="contentArea">
<!-- Body/ Content area -->
</div>
<!-- End body /Content area-->
<div id="leftMenu">
<!-- left menu area -->
<div id="left_top_Logo">
<!-- where the logo image sits -->
</div>
<!-- lgoo sits ends -->
Menu Area<br><br>
Menu Area<br><br>
Menu Area<br><br>
</div>
<!-- Menu area ends -->

</div>
<!-- End Container -->
</body>
</html>


http://readyidea.com/leatherhead/index.php
^ is page

Thank you
Marcus
WebJoel
04-28-2008, 09:30 PM
The CSS code that you posted is incomplete, if the URL is the site in question.

This causes problems:
#product_right{
position:relative;
top:-240px;
margin-left:auto; margin-right:5px;
width:280px;
height:240px;

}because you are leaving the "#product_right" in the document flow
(due to "position:relative;"), and off-setting the visual display 'upwards' 240px, effectively leaving an actual 'gap' where the displacement occurs. This will leave a 240px 'gap' underneith. Is this what you are saying?
IL14N4
04-28-2008, 09:43 PM
Do you mean you want to align the #leftMenu top with the #contentArea top.

If so, you have to understand that <div> tags are block level elements,
meaning that like the <p> tag the next element( tag) that will go after it will appear underneath it.

Thus lets continue examining your code...

Their by the #contentArea which is contained first within the #container on your
html code would be positioned left:0%; that means it will align jut top to the #container
and because it's a block-level element
it will push any new content (element) underneath it; in this case the #leftMenu.
You also gave it a margin-left:26%; that's why it's offset 26% from the left .

Now because the #leftMenu is the next div on your code (a block-level element)
it will go on its seperate line that is 225 px down below the #contentArea
because the height of the #contentArea is 225 px.

Thus when you specify in your css style that you want the #leftMenu
positioned relative you are saying you want it positioned exactly that, relative to
it's natural flow(it's current position) within the containing box(block) that is the #container.
To be more explicit, Not from the top of the #container but within the
#leftMenu's natural flow within your html code. Having said this giving a top:0%; to the
#leftMenu will just be keeping the #leftMenu where it normally would be placed...
IL14N4
04-28-2008, 11:21 PM
Now you can align the #leftMenu to the #contentArea using relative positioning but this time around
it would go like:

#leftMenu{
position:relative;
top:-226px; /* substracting the height of the #contentArea */
width:250px;
background-color:#d6ae84;
}

Then you can either leave the #contentArea as is or you can remove the margin-left:26%;
and instead use the left property to offset the #contentArea from the left:

#contentArea{
position:relative;
top:0%;
width:650px;
height:225px;
background-image:url('images/logo.gif');
margin-left:26%; /* alternatively you can use the left property like left:26%; */
}



Or you can also use floats like:


#leftMenu{
position:relative;
top:0%;
width:250px;
background-color:#d6ae84;
}

#contentArea{
position:relative;
float:right;
top:0%;
left:-17%;
width:650px;
height:225px;
background-image:url('images/logo.gif');
/* Note when floating elements its important to specify
width and height dimensions otherwise it gets messy*/
}


Would like to know if this was of any help.