CSS - Newbie Question About Vertical-align

I have a div with this ID:

#sml_image_container {
margin: 2px;
padding: 2px;
height: 70px;
width: 70px;
border: 1px dashed #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-weight: bold;
vertical-align: middle;
}

I'd like to have a div work like a cell in a table that is 70px by 70px - with the text centered both horiz. and vert.. But I can't get it. Is the above the correct use of the "vertical-align"?

I need the CSS equivilent to <td align="center" valign="middle"> in a DIV.

Hello and thanks for your patience.

I have a page here that is having a positioning problem for "sidebar2".

I can't seem to get it to stick to that right side of the page in a fixed position.

Code:

@charset "UTF-8";
* {
	margin: 0px;
	padding: 0px;
}
body {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #32240C;
	line-height: 1.5em;
}
a:link {
	color:#C42617;
}
a:hover {
	color: #687ABB;
}
a:visited {
	color:#C42617;
}
a:active {
	color: #687ABB;
}
h2 {
	font-size: 1.2em;
	line-height: 2.3em;
	color: #34260b;
	border-left-width: thin;
	border-left-style: double;
	border-left-color: #34260b;
	text-indent: 10px;
	background-repeat: no-repeat;
	}
	
#clear {
	clear: both;
}

#welcome {
	color: #325084;
	float: left;
	width: 590px;
	text-align: left;
	padding: 15px;
	border: thin solid #D0DAEF;
	background-color: #FFF;
	margin-left: 25px;
	margin-right: 5px;
}
#welcome h2 {	
	padding-left: 2px;
}
#welcome p {
	padding-left: 2px;

}
input {
width: 185px;
}
/* reset width for non-text inputs */
input.radio, input.checkbox, input.submit, input.dropdown {
width:auto;
}
/* display labels next to form elements add a class for when you want them to stack */
label {
	float: left;
	margin-right: 1em;
	}
label.top {
	display: block;
	float: none;
	}

.sidebar2 {
	position:absolute;
	top:182px;
	right: 150px;
	text-align:left;
	width: 255px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 10px;
	margin-top: 0px;
}
.sidebarheader {
	color:#D75500;
	padding-bottom: 5px;
	font-weight: bold;
	font-style: italic;
	font-size: 16px;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

img {
    border: none;
} 
/*- Menu 3--------------------------- */
	
#menu3 {
	width: 250px;
	border-style: solid solid none solid;
	border-color: #BCD2E6;
	border-size: 1px;
	border-width: 1px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
	font-size: 12px;
	}
	
#menu3 li a {
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	}	
	
#menu3 li a:link, #menu3 li a:visited {
	color: #325084;
	display: block;
	background:  url(menu3.gif);
	padding: 8px 0 0 10px;
	}
	
#menu3 li a:hover {
	color: #627EB7;
	background:  url(menu3.gif) 0 -32px;
	padding: 8px 0 0 10px;
	}
#affiliates {
	color: #325084;
	float: left;
	width: 580px;
	text-align: left;
	margin-left: 25px;
	margin-right: 15px;
}
#affiliates table td {
	padding: 15px;
}

Can you tell me how format that div?

Hi,

Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables.

My page is on:
http://www.3003online.com/demos/ecoceylon/v2/

You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox.

Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this?


Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions).

The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately

[ this is a follow up to my previous thread
http://forums.devshed.com/showthread.php?t=270438

Any help would be greatly appreciated.

Thanks very much.

I'm trying to put a line of text on the bottom of a box.

Code:

<div style="width:500px;height:500px;background:black;vertical-align:bottom;">
This is a black box
</div>

<div style="width:500px;height:500px;background:black;vertical-align:baseline;">
This is a black box
</div>

What the above code displays:

Code:

-------------------------
| This is a black box   |
|                       |
|                       |
|                       |
|                       |
|                       |
|                       |
|                       |
-------------------------

What I want it to display:

Code:

-------------------------
|                       |
|                       |
|                       |
|                       |
|                       |
|                       |
|                       |
| This is a black box   |
-------------------------

Hello to all of you,

I am doing my first steps in respect to CSS programming and wonder if I can get some hint here.

I have created a table, with two different line colors, and a changing line background color with hover. Basically everything works as expected - just the vertical-align command does not respond at all. Am I doing something wrong? What could be the reason, and how can I continue investigating?

I am using the CSS stylesheet, in connection with a Joomla 1.5 CMS. Please see the code below:

Code:

table.general {
    text-align: left;
    vertical-align: top;
    width: 100%;
    border-collapse: collapse;
}
table.general th {
    text-align: center;
    font-size: 15px;
    color: white;
    font-style:bold;
    height: 30px;
    background-color:#95B3D7;
    border: 3px solid #FFFFFF;
}
table.general tr.row1 {
    background-color: #f1f1f1;
}
table.general tr.row2 {
    background-color: #e0e0e0;
}
table.general tr.row1:hover {
    background-color: #CCCCCC;    
}
table.general tr.row2:hover {
    background-color: #CCCCCC;
}    
table.general td {
    border: 3px solid #FFFFFF;
    padding: 4px;
}

The classes are being used in the following form:
Code:

<table style="width: 320px;" class="general">
<col span="4" width="80"></col> 
<tbody>
<tr>
<th>head A</th> <th>head B</th> <th>head C</th> <th>Alface</th>
</tr>
<tr class="row1">
<td>Topic A</td>
<td>65</td>
<td>215</td>
<td>35</td>
</tr>
<tr class="row2">
<td>Topic B</td>
<td>2</td>
<td>2,3</td>
<td>1,2</td>
</tr>
<tr class="row1">
<td>Topic C</td>
<td>68</td>
<td>55</td>
<td>13</td>
</tr>
<tr class="row2">
<td>Topic D</td>
<td>44</td>
<td>50</td>
<td>33</td>
</tr>
<tr class="row1">
<td>etc.</td>
<td>494</td>
<td>611</td>
<td>238</td>
</tr>
</tbody>
</table>

Thank you in advance for your kindness!