/    Sign up×
Community /Pin to ProfileBookmark

positioning elements w/in element

Copy linkTweet thisAlerts:
Apr 28.2008

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.

[code=html]
<!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>
[/code]

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

Thank you
Marcus

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelApr 29.2008 — The CSS code that you posted is incomplete, if the URL is the site in question.

This causes problems:
#product_right{

[B]position:relative;[/B]

[B]top:-240px;[/B]

margin-left:auto; margin-right:5px;

width:280px;

height:240px;

}[/QUOTE]because you are leaving the "#product_right" [I]in the document flow

([/I]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?
Copy linkTweet thisAlerts:
@IL14N4Apr 29.2008 — Do you mean you want to align the [B][FONT="Courier New"]#leftMenu[/FONT][/B] top with the [B][FONT="Courier New"]#contentArea[/FONT][/B] top.

If so, you have to understand that [B]<div> [/B]tags are [I]block level[/I] elements,

meaning that like the [B][FONT="Courier New"]<p>[/FONT][/B] tag the next element( tag) that will go after it will appear underneath it.

Thus lets continue examining your code...

Their by the [B][FONT="Courier New"]#contentArea[/FONT][/B] which is contained first within the [FONT="Courier New"][B]#container[/B][/FONT] on your

html code would be positioned [FONT="Courier New"][B]left:0%;[/B][/FONT] that means it will align jut top to the [FONT="CourierNew"][B]#container[/B][/FONT]

and because it's a [I]block-level[/I] element

it will push any new content (element) underneath it; in this case the [FONT="Courier New"][B]#leftMenu[/B][/FONT].

You also gave it a [FONT="Courier New"][COLOR="Magenta"]margin-left:26%;[/COLOR][/FONT] that's why it's offset 26% from the left .

Now because the [FONT="Courier New"][B]#leftMenu[/B][/FONT] is the next div on your code (a [I]block-level element[/I])

it will go on its seperate line that is 225 px down below the[FONT="Courier New"] [B]#contentArea[/B][/FONT]

because the height of the [FONT="Courier New"][B]#contentArea[/B][/FONT] is 225 px.

Thus when you specify in your css style that you want the [FONT="Courier New"] [B]#leftMenu[/B][/FONT]

positioned relative you are saying you want it positioned exactly that, [B]relative [/B]to

it's natural flow(it's current position) within the containing box(block) that is the [FONT="Courier New"][B]#container[/B][/FONT].

To be more explicit, Not from the top of the [FONT="Courier New"][B]#container[/B][/FONT] but within the

[FONT="Courier New"][B]#leftMenu[/B][/FONT]'s natural flow within your html code. Having said this giving a [COLOR="Magenta"]top:0%;[/COLOR] to the

[FONT="Courier New"][B]#leftMenu[/B][/FONT] will just be keeping the [FONT="Courier New"][B]#leftMenu [/B][/FONT] where it normally would be placed...
Copy linkTweet thisAlerts:
@IL14N4Apr 29.2008 — Now you can align the [FONT="Courier New"][B]#leftMenu[/B][/FONT] to the [FONT="Courier New"][B]#contentArea[/B][/FONT] using relative positioning but this time around

it would go like:

[CODE]#leftMenu{
position:relative;
top:-226px; [COLOR="Silver"]/* substracting the height of the #contentArea */[/COLOR]
width:250px;
background-color:#d6ae84;
}[/CODE]

Then you can either leave the [FONT="Courier New"][B]#contentArea[/B][/FONT] as is or you can remove the [COLOR="Magenta"]margin-left:26%;[/COLOR]

and instead use the left property to offset the #contentArea from the left:
[CODE]
#contentArea{
position:relative;
top:0%;
width:650px;

height:225px;
background-image:url('images/logo.gif');
margin-left:26%; [COLOR="Silver"]/* alternatively you can use the left property like[/COLOR] [COLOR="Magenta"]left:26%;[/COLOR] [COLOR="Silver"] */[/COLOR]
}[/CODE]



Or you can also use floats like:


[CODE]#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');
[COLOR="Silver"]/* Note when floating elements its important to specify
width and height dimensions otherwise it gets messy*/[/COLOR]
}[/CODE]


Would like to know if this was of any help.
×

Success!

Help @marcusami spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.30,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...