Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Vertical alignment of div

Status
Not open for further replies.
Gert74

Gert74

Technical User
Jan 26, 2001
48
NL
Does someone know how I can position an element at the bottom of the surrounding element with css. I have a leftbar with 3 areas above each other, leftbarimage, leftbarcontent and contactinformation. Contactinformation should be positioned at the bottom. It should be in line with the bottom of the contentarea (see code).

This is the code:
Code: 
<div id="secondpart">
<div id="leftbar">
	<div id="leftbarimage"><img src="images/masseur.jpg" width="173"></div>
	<div class="leftbarcontentregular" id="leftbarcontent">
	  <p>&quot;Hier komen de korte links&quot;</p>
	  <p>&quot;En nog een link&quot;</p>
	  <p>&quot;Wat is er nog verzekert in Fysiotherapieland&quot;  </p>
	</div>
	<div id="contactinformation">
		<span class="contactinformationregular">
			<strong>Contact</strong>
		</span><br>
		<span class="contactinformationregular">
			blablala<br>
			fdfdf<br>
			dfdf<br>
			4343434<br>
		</span>		
	</div>
</div>

<div id="contentarea">
  <p>Does someone know how I can position an element at the bottom of the surrounding element with css. I have a leftbar with 3 areas above each other, leftbarimage, leftbarcontent and contactinformation. Contactinformation should be positioned at the bottom. It should be in line with the bottom of the contentarea (see code).</p>
</div>
</div>

This is the css-code I use:
Code: 
#secondpart {
	height:100%;
}


#leftbar {
	margin: 0px;
	padding: 0px;
	width: 173px;
	float: left;
	height: 100%;
}

#leftbarcontent {
	padding:12px;
}

.leftbarcontentregular {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:80%;
	font-style: italic;
}

#contactinformation {
	background-color:#333333;
	padding:12px;
	vertical-align: bottom;
}

.contactinformationregular {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	color: #CCCCCC;
}

#contentarea {
	float: left;
	margin: 12px;
	height: 100%;
}

I hoped vertical-align: bottom; (in #contactinformation) would do the job, but it doesn't. I hope someone can help me with this.

Gert
 
Sort by date Sort by votes
try the ideas in this thread.

thread215-839995

Chris.

Indifference will be the downfall of mankind, but who cares?
 
Upvote 0 Downvote
Chris, I tried the bottom option, but this places the div at the bottom of the page. That's not what I want. I want the bottom of the div to be aligned with the bottom of the div contentarea. This could also be at 3/4 of the page.

Gert
 
Upvote 0 Downvote
First thing you need to do is understand how positioning works. Positioning of elements is always relative to the first positioned parent container. That basically means that your div will be positioned according to #leftbar, if that has any positioning. Since it doesn't, it try the next, #secondpart. Again nothing. When there is nothing else, positioning works in regards to document window. That is why your element gets positioned at the bottom of the window. If you add positioning to your divs, everything should work out fine. Elements are positioned relatively by default, so adding position: relative; to them shouldn't mess up your design. Hope it helps.
 
Upvote 0 Downvote
I'm sorry too ask this, but I really don't get it. I tried several things with positioning but messed up everything. I restored the situation from before. I've come to a point where I would say: "Show me the money!"

Can you have a look at
What I want is the grey box in the lower left corner of the bordered area.

This is the pagecode:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Fysiotherapiepraktijk Nieuwveen - Fysiotherapie :: Fysiosport :: Kinderfysiotherapie :: Manuele Therapie :: Bedrijfssporten</title>
<link href="css/style1.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="header">
	<div id="logo">Hier komt het logo</div>
	<div id="menu">Hier komt het menu</div>
</div>
<div id="secondpart">
<div id="leftbar">
	<div id="leftbarimage"><img src="images/masseur.jpg" width="173"></div>
	<div class="leftbarcontentregular" id="leftbarcontent">
	  <p>&quot;Hier komen de korte links&quot;</p>
	  <p>&quot;En nog een link&quot;</p>
	  <p>&quot;Wat is er nog verzekerd in Fysiotherapieland&quot;  </p>
	</div>
	<div id="contactinformation">
		<span class="contactinformationregular">
			<strong>Contact</strong>
		</span><br>
		<span class="contactinformationregular">
			Fysiotherapiepr. Nieuwveen <br>
			Teylersplein 4<br>
			2441 LE  Nieuwveen<br>
			0172-538783<br>
		</span>		
	</div>
</div>
<div>
<div id="contentarea">
  <p>Hier komt de content Content comes here Hier komt de content Content comes here Hier komt de content Content comes here Hier komt de content Content comes here Hier komt de content Content comes here Hier komt de content Content comes here Hier komt de content Content comes here Hier komt de content Content comes here vHier komt de content Content comes here Hier komt de content Content comes here </p>
</div>
</div>
</body>
</html>

This is the css-file.
Code: 
body {
	margin: 12px;
	padding: 0px;
	width: 760px;
	border: 1px solid #333333;
	position:relative;
}

#header {
	margin: 0px;
	padding: 0px;
	height: 100px;
	width: 100%;
}

#logo {
	margin: 0px;
	padding: 0px;
	width: 173px;
}

#secondpart {
	float:left;
}


#leftbar {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 173px;
}

#leftbarcontent {
	padding:12px;
}

.leftbarcontentregular {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:80%;
	font-style: italic;
}

#contactinformation {
	background-color:#333333;
	padding:12px;
}

.contactinformationregular {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 70%;
	color: #CCCCCC;
}

#contentarea {
	float:left;
	margin: 12px;
}

I would really appreciate it if someone could help me on this and show me how I can do that.

Sorry to be such a pain in the ass.

Cheers!


Gert
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
826
spamjim
spamjim
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
665
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
213
jason.lex
jason.lex
k4ghg
  • Locked
  • Question
Liquid vertical bar 1
Replies
2
Views
237
k4ghg
k4ghg
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
155
CoolBreeze007
CoolBreeze007

Part and Inventory Search

Sponsor

Back
Top