Justify + vertical align not working

[wrathican]

hey. if you take a look here:

http://www.ls12style.co.uk/projects/Wonstar/

the content of the 'filmstrip' at the bottom is mean to be justified and the vertical align is meant to be in the middle.

here is the css:

/* CSS Document */
body {
text-align:center;
background-color:#000000;
}

#container {
width: 65%;
margin: 0 auto;
text-align: left;
border-color:#FFFFFF;
border-style:solid;
color:#FFFFFF;
border-width: 2px;
}

#filmstrip {
position:relative;
height: 100px;
text-align: justify;
width: 100%;
vertical-align: middle;
}

#navigation {
position:absolute;
text-align: left;
width: 15%;
}

#bigpic {
width: 100%;
text-align: center;
padding-top: 20px;
}

img.filmstrip {
border-color:#FFFFFF;
border-style:solid;
color:#FFFFFF;
border-width: 1px;
}

img.bigpic {
border-color:#FFFFFF;
border-style:solid;
border-width: 2px;
}

[wildteen88]

verticle-align does not work the same with divs as it does with tables. If you only want the images to be vertically aligned then apply vertical-align: middle; to the .filmstrip class

[wrathican]

is there an alternative?

[wildteen88]

is there an alternative?

I re-edited my post. read above

[wrathican]

i dont see what you mean. do i need to create a new css class and use that attribute? because i already have #filmstrip with that attribute.

[wildteen88]

You have the following class in your css

img.filmstrip {
border-color:#FFFFFF;
border-style:solid;
color:#FFFFFF;
border-width: 1px;
}

That is what I meant by apply vertical-align: middle; to the img.filmstrip class

 

Added:

[code]img.filmstrip {
border-color:#FFFFFF;
border-style:solid;
color:#FFFFFF;
border-width: 1px;
        vertical-align: middle;
}

[/code]

[wrathican]

ahh gotcha. tyvm. so now they are vertically aligned.

 

what about the justification problem? should i put a table in that <div> and try it that way?

 

Thanks!