...

View Full Version : Can't get text to align to bottom of DIV



bigbadroo
02-13-2008, 06:08 AM
Hi

I'm working with a nested DIV - I'd like the text to align right down at the bottom. The DIV is called 'artist_name'

Here's the CSS:

---------------------

#artist_title {


width: 320px;
height: 35px;
background-color:#FFFFFF;
margin-bottom:7px;

}

#artist_title_inside_left {

width: 50px;
height:18px;
float:left;
padding-left:10px;
padding-top:12px;
vertical-align:bottom;
}

#artist_name {
width:190px;
height:28px;
position:relative;
float:left;
}

#artist_title_inside_right {

width: 260px;
height: 35px;
float:right;

}

-----------------------

Here's the html:
------------------------

<div class="style1" id="artist_title">
<div id="artist_title_inside_left"><img src="http://www.bigbadroo.com.au/popbeat/Website/images/artist.gif" style="float: left;" alt="Artist" />

</div>




<div id="artist_title_inside_right"><div id="artist_name">
<h2 class="style2"><span class="style9">.</span><br />
Mike Mathieson</h2>
</div>
<h1>Solo<br/>
Band<br/>
Tribute Show </h1>
</div>
</div>
-------------------------


as it is, the text sits near the top of the DIV.

What am I doing wrong?

Cheers

Shaun

_Aerospace_Eng_
02-13-2008, 07:20 AM
Your question is confusing. So you want artist_name to be at the very bottom of the containing div? Also your content exceeds the height you have set. I think this is what you want

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#artist_title {
width: 320px;
background-color:#FFF;
margin-bottom:7px;
}
#artist_title_inside_left {
width: 50px;
padding-left:10px;
padding-top:12px;
}
#artist_name {
width:190px;
height:28px;
position:absolute;
bottom:-35px;
right:0;
}
#artist_title_inside_right {
width: 260px;
float:right;
position:relative;
}
</style>
</head>
<body>
<div class="style1" id="artist_title">
<div id="artist_title_inside_left"><img src="http://www.bigbadroo.com.au/popbeat/Website/images/artist.gif" alt="Artist"></div>
<div id="artist_title_inside_right">
<div id="artist_name">
<h2>.<br>Mike Mathieson</h2>
</div>
<h1>Solo<br>
Band<br>
Tribute Show </h1>
</div>
</div>
</body>
</html>

bigbadroo
02-13-2008, 07:52 AM
Hi

Thanks for the info.

I just want any text that's within <div id="artist_name"></div> to be aligned at the bottom of it - how do I do that? I've tried the vertical align attribute, but it deosn't work.

Cheers

Shaun

awatson
02-13-2008, 08:46 PM
try putting "position: relative;" on the artist_name div. Then put a div around the text and set it to:


position: absolute;
bottom: 0px;

bigbadroo
02-14-2008, 12:10 AM
Cheers - still no joy though.

If you view the page in Firefox at:

http://www.bigbadroo.com.au/popbeat/Website/acts/solos/mike_mathieson/mike_mathieson.php

And choose 'view style information' from the CSS, you may get a better idea of what's going on with the DIVs - I don't understand why I can't get the content of artist_name to vertically align at the bottom.

Cheers

Shaun



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum