CSS - Vertical Align To Bottom Of Floating Div

Hi again

could someone help me figure out why my left and right box's on thid design are not inline with the content (middle) box

thanks

see attached pic to see what i mean.


Code:

CSS CODE

body {
background:#ffffff;
color:#000000;
font:76% Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
}

/*** Main container ***/

#container {
background:#EAEAEA url() repeat-x;
color:#000000;
width:90%;
margin:5px;
min-width:770px;
padding:0;
}


/*** Content ***/

#content {
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
padding:15px 20px 5px;
height:500px;
margin:5px;
}

/*** Main Banner ***/

#Banner {
background-color:#EEEEEE;
height:55px;
border:1px solid #DEDEDE;
padding:15px 20px 5px;
margin:5px;
}

/*** Left Side Navigation ***/

#SideNav {
width:15%;
float:left;
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
min-width:200px;
padding:15px 20px 5px;
margin:3px;
}

/*** Right Side content ***/

#RightCon {
float:right;
width:15%;
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
padding:15px 20px 5px;
min-width:200px;
margin:3px;
}

Thanks

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   |
-------------------------

Is not working for me, or I'm not using it right.

Here is my problem:
http://www.kingtoad.net/development/kingtoad.net/

I want the "navigation" to align to the top even with the "content". I can't seem to get it up there though. Any suggestions would be nice.

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!

Hi,

I am trying to use the vertical-align property to make some text appear in the middle of a div (set float:left). However it is not working. Following is some sample code I have done for testing: Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>ccc</title>
  <style>

   div{

    width:16.7em;
    height:6.8em;
    border:1px solid black;
    vertical-align:middle;
    float:left;
   }

  </style>

 </head>

 <body>

  <div>hello</div>

 </body>
</html>

Is this possible?

Thanks and Regards,
Sim085

Hi I want to know if it is possible to vertical align the text in these div tags and how it's done.

Code:

<!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>
<style type="text/css" media="all">
#1 {width:15%}
#2 {width:20%}
#3 {width:25%}
#4 {width:20%}
#5 {width:20%}
#1,#2,#3,#4,#5 {
float:left;
overflow:hidden;
display:inline-block;
height:128px;
text-align:center;
}
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

<div id="1"><a href="#"><img name="" src="" width="100" height="125" alt="" /></a></div>
<div id="2"><a href="#">fffffffffffggfgf fg gd</a></div>
<div id="3"><a href="#"> dfg dfg dg d</a></div>
<div id="4"><a href="#"> dgd gd d</a></div>
<div id="5"><a href="#"> gdf gdg ddg</a></div>
</body>
</html>

Greets,
dabomb_gent

for example if there is a container div which holds an inner div, if i want the content of the inner div to appear exactly at the bottom edge of the inner div i have used the following code,
#outer{
position: relative;
float: left;
width: 900px;
height: 200px;
}
#outer .inner{
position: relative;
float: left;
width: 500px;
height: 200px;
vertical-align: bottom;
}

however the content of the inner div is starting at its default location which is top left of the inner div

instead of using margin-top or padding-top, or positioning methods for the inner div to position the content at the bottom edge can the vertical-align: bottom; be used as this will be very accurate placed at the bottom edge even if the content increases the content will always appear at the bottom edge, unlike other methods where the margin-top, padding-top, and positioning, these values will have to be changed whenever content increases or decreases.

please advice.

thanks.

How can i make #mydiv DIV (the main layout div), be
vertically aligned to middle?

http://www.dinal.ru/new/max/index2.htm

I've read a lot of docs about vertical alignment in internet, but I haven't found a good cross-browser solution, which doesnt't destroy my current layout.

Thank you in advance
Artashes

What I'm trying to do... I have some navigation links, a few pictures, and someone's name on the left hand side of the page. I want everything except for the name to be at the top.... the name is to be at the bottom. Is there a specific way to accomplish this? The content area will generally extend as high as 600 or so px, so would like the name to appear at the very bottom lined up with the content box.

Thanks.

Not sure exactly what code you need to see, but here's the left hand column:

CSS:
Code:

body {width:770px;
height:100%;
}

.nav_links {vertical-align:top; width:150px; }

.nav_links a{display:block; border-top:1px solid black; text-decoration:none;}

HTML:
Code:

<!-- Left Nav Menu -->
<div class="nav_links">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
<!-- End Left Nav Menu -->

<!-- Misc. Pictures (Left Column)-->
<div>
<div style="float:right;">
<img src="images/left_pic_1.jpg" alt="Pic1" style="width:50px; margin-bottom:10px;" /><br />
<img src="images/left_pic_2.jpg" alt="Pic2" style="width:50px;" />
</div>
</div>
<div style="clear:both;">
<div style="float:right;">
<img src="images/left_pic_3.jpg" alt="Pic3" style=" width:50px; margin-bottom:10px;" /><br />
<img src="images/left_pic_4.jpg" alt="Pic4" style="width:50px;" />
</div>
</div>

<!-- End Misc. Pictures (Left Column) -->
<!-- Name -->
<div class="name" style="vertical-align:bottom;">
First M. Last
</div>
<!-- End Name -->

ok so i have a photo gallery and the images vary in height. and so instead of having them defaulted to top aligned, i'm try to figure out how to get them to bottom align. anyone have any ideas or articles i can check out?

thx

I have three divs.
The main div contains the background color and border.
The second div has text, and
The third has an img.
What I want is for the image to sit at the bottom of the main div and stay there when the font-size is increased. I want the text to stick to the top of the main div.
Can someone please help me.

I have attached the code below it is all messed up cause I have been trying everything I can think of.

".abouttestcontainer
{
width : 100%;
float : left;
border-top : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
color : #001F56;
background-color : #DDEADE;
border : 1px solid black;
}
.abouttest
{
float : left;
width : 450px;
height : 100%;
padding : 10px 50px 0px 10px;
text-align : left;
font-size : 12px;
border : 1px solid black;
margin-right : 10px;
}
.aboutimage
{
border : 1px solid black;
position : relative;
display : inline;
vertical-align : bottom;
}"

Hi there,

I am having trouble aligning 2 divs to the bottom. I have a left and right side div for a header area, however the right side is taller than the left, so it is leaving a gap at the bottom of both sides.

This is my CSS:

PHP Code:
#nav_wrapper{


}

#nav_left{
width: 620px;
padding-left: 20px;
float:left;

}


#nav_right{
float:right;
text-align: right;
padding-right: 20px;


}

#member_login{
width: 180px;
padding: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #373737;
font-size: 11px;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
background-color: #f6f6f6;
line-height: 200%;
}

#member_login a{
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #373737;
font-size: 11px;
font-weight:bold;
text-decoration:underline;
} 





and this is my HTML:

PHP Code:
<div id="nav_wrapper">
    
        <div id="nav_left">
        
       left content        
        <div id="nav_right">
        
        <div id="member_login">
        right content
        </div>
        
        </div>
    

    
    </div> 





Any ideas?

Hello all,

Is there a good way to have the text in a select box be vertically aligned? I have the following:

Code:

<select style="height: 12em; width: 12em;">
  <option value="a">A</option>
  <option value="b">B</option>
</select>

Which puts the text in the upper left but I would like it to be in the dead center. I tried vertical-align but it did not work.

How exactly can i vertically align text in css, i can't seem to find an easy way to do it, i basically want my text to be in the middle of a divs height, so much easier in tables heh.

Tried padding but that then adds to the height, making it pointless for this use

i really need to vertical align a div to always be at the bottom of a main div...


Code:

<div class="container">
<div class="menu"></div>
 </div>
 

i want .menu to always be at the bottom of .container .... no matter the height of the container div