Advertisement

05.03.2008 at 05:41AM PDT, ID: 23373740
[x]
Attachment Details

Line up divs on bottom and middle center

Asked by charlesbaldo in Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), Firefox Web Browser

First thanks to all who have helped me in my new css adventure it is cool.  I an learing it are baffled by some things.

I am trying to get text to line up in th every middle and bottom of a <div>

here is the page template
the header in black needs to have its text on the bottom in the center
I thought
#topbanner
{
....
        vertical-align:bottom;
        text-align:center;
..
}

would do it

then in the content area I want to text to be absolute middle I thought this would do it
#content
{
..
        vertical-align:middle;
        text-align:center;
}
All help is appreciated. Will check back in a couple hours

Target browser will always be firefox 2.0.0.14

Thank you
chuckStart Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<title>100X System</title>
 
<style type="text/css">
 
	body
	{
	    background-color:white;
	    margin-top: 0px;
	    margin-right: 0px;
	    margin-bottom: 0px;
	    margin-left: 0px;
	}
	
	#wrapper{
	  width: 640px;
	  height: 480px;
	  border: none;
	  background: #FFF;
	  padding: 0px 0px 0px 0px;
	  margin:0px;   	  
	}
	
	#topbanner
	{
	  width: 640px;
	  height: 100px;
	  font-family:Verdana;  
	  font-weight:bold;
	  color:white;
	  background-color:black;  
	  vertical-align:bottom;
	  text-align:center;
 
	}
	
 
	#content
	{
	  width:640px;
	  height: 310px;
	  font-family:Verdana;  
	  font-weight:bold;
	  color:white;
	  background-color:#069;  
	  vertical-align:middle; 
	  text-align:center;
	  clear: both;
	
	}
	
	#leftfooter
	{
 
	  width:300px;
	  height: 50px;
  	  padding: 10px 10px 10px 10px;  	
  	  font-family:Verdana;  
	  font-weight:bold;
	  color:white;
	  background-color:red;  
	  vertical-align:middle; 
	  text-align:left;
	  float:left; 
	}
	
	#rightfooter
	{
	  width:310px;
	  height: 60px;
  	  padding: 5px 5px 5px 5px;  	  
	  font-family:Verdana;  
	  font-weight:bold;
	  color:white;
	  background-color:orange;  
	  vertical-align:middle; 
	  text-align:right;
	  float:left;
	}
 
</style>
 
</head>
<body>
<div id="wrapper">  
    <div id="topbanner">Header</div>
    <div id="content">Content</div>
    <div id="leftfooter">04-54675-0-001 Rev. G</div>  
    <div id="rightfooter">
		<img alt="ASP" src="asplogo.gif" width="88" height="38" /></div>      
        
</div>
</body>
</html>
 
Keywords: Line up divs on bottom and middle center
Title
1 Css Centering div
2 Include div pages in breadcrumb
3 Div height in Firefox
4 Center a div using CSS?
5 problems with div's for IE and Firefox
6 DIV Scrollbar problem in FireFox...
 
Loading Advertisement...
 
[+][-]05.03.2008 at 08:09AM PDT, ID: 21492573

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), Firefox Web Browser
Sign Up Now!
Solution Provided By: bluefezteam
Participating Experts: 2
Solution Grade: A
 
 
[+][-]05.03.2008 at 08:12AM PDT, ID: 21492592

Assisted solutions are selected by the member who asked the question as a comment that contributed to their question's solution.

Start your 7-day free trial to view this Assisted Solution or ask the Experts your question.

 
[+][-]05.03.2008 at 08:14AM PDT, ID: 21492598

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628