No table layout problens, cant vert align!

[lotuzwine]

Hi guys, I am new to designing web sites without tables. I am making some new layout for my site using divs only, but I am sure there are a lot of problens with it. Could you guys check and give some hints? Also, I am having big problens with vertical alignment. I cant see to make vert align to work without using tables! I read some articles about it but they didnt helped me.

Here are the codes: <div id="container">

<div id="header">
<span><a href="http://www.previdencia.gov.br" target="_blank"><img src="../imagens/top_logo.gif" alt="www.previdencia.gov.br" width="100" height="44" border="0"></a></span>
<span><img src="../Imagens/top_dtp.gif"></span>
</div>

<div id="header2">
<span style="margin-left:5px; float:left" class="sub">DRD - Diretoria de Relacionamento, Desenvolvimento e Informa&ccedil;&otilde;es</span>
<span style="float: right; margin-right:10px; word-spacing:4px" class="sub">Home | Intraprev | DTPnet | Fale Conosco</span>
</div>

</div>

CSS: #container {
margin: 0 0 0 0;
position: absolute;
display: block;
width: 100%;
height: 100%;
}

#header {
position:relative;
height: 48px;
width: 100%;
border-bottom: #FFFFFF 1px solid;
background-color: #669966;
}

#header2 {
display: block;
background-color: #CCCC99;
height:18px;
width: 100%;
vertical-align: middle;
}


Anything would be helpfull

[lotuzwine]

I also need it to be simples, I am not expert, and my website designing knowage is not the best.

Thanks!

[drhowarddrfine]

vertical-align is for inline elements while a div is a block element.

[Centauri]

From your code, I'm assuming you are trying to vertically centre the text within the tan #header2 div? First thing is to make sure there is enough room for the text - you specified a height of 18px, but have not specified a default font size. Better to specify the height of the div in em units to allow the text to always fit. Vertically centering the single line of text is the done by setting line-height equal to div height.

Not sure what you are trying to achieve with the #container div - unless you intend to do something else with it later, it has no effect at all at the moment and can be deleted. If you were trying to get rid of the gaps between top and sides of the screen and your layout, these are caused by default margins and paddings that browsers apply to elements, and varies between browsers. Zeroing these out as shown below gives a clean starting point.

A non-floated div will fill its container horizontally by default, so there is no need for the width:100% declarations.
* {
margin: 0;
padding: 0;
}

#header {
height: 48px;
border-bottom: #FFFFFF 1px solid;
background-color: #669966;
}

#header2 {
display: block;
background-color: #CCCC99;
height:1.3em;
line-height: 1.3em;
}

Cheers
Graeme

[lotuzwine]

Ok, the line-height atribute worked well. now how to horizontal align, for example, in the right, the same div, within the same line??

[Centauri]

Not sure what you mean... The text (probably to become links) on the right is positioned with the margin-right styling of its span.

Cheers
Graeme