can't get text to align in two css horizontal boxes

Question

I'm (hopefully) trying to horizontally align the text in two div boxes , but as you can see below it isn't happening for me . Please help as I can't see what I'm doing wrong

        <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.left-div {
    vertical-align:top;
    float: left;
    width: 400px;
    height: 250px;
        }
.right-div {
    vertical-align:top;
    margin-left: 400px;
  }
</style>
</head>
<body>
<div class="left-div">
<H2> Telephone:</H2>
<strong>Mobile: </strong>     123456789<br />
<strong>Office: </strong>     123456789(answer service)<br />
<strong> Email: </strong><a href="mailto:bg@hotmail.co.uk" style="text-decoration:none;">pgbathrooms@hotmail.co.uk</a>
</div>

<div class="right-div">
<H2>Address:</H2>
house<br />
town<br />
county<br />
</div>
</body>
</html>

[As in center the text?](http://jsfiddle.net/ImagineStudios/Z42XU/) — Jacob G, Jun 25 '14 at 20:26
sorry, have the text horizontally aligned across both boxes. — user2606469, Jun 25 '14 at 20:30
Judging from the answers it looks like you mean vertical alignment. — j08691, Jun 25 '14 at 20:40

score 1 · Answer 1 · edited May 23 '17 at 12:11

Here's a working Fiddle

The problem you were having was actually the margin-collapse problem, which was manifesting because your h2 has margin-top, and it was being reflected in one div and not the other.

Vertical-align does not work on block-level elements, only inline-block or inline elements.

You could do one of two things:

Remove the margin-top from your h2: div h2 {margin-top: 0;}
You could add padding to the top of the divs to give the margin something to "push off of"

Changing your css as follows takes care of the problem:

.left-div {
    float: left;
    width: 400px;
    height: 250px;
    padding-top: 1px;
}

.right-div {
    margin-left: 400px;
    padding-top: 1px;
}

can't get text to align in two css horizontal boxes

1 Answers1