# Making one div Vertical align middle relative to other div

Page 1 of 1

## 3 Replies - 3716 Views - Last Post: 10 October 2007 - 09:26 PM

### #1 shruti2007

Reputation: 0
• Posts: 2
• Joined: 29-September 07

# Making one div Vertical align middle relative to other div

Posted 29 September 2007 - 05:03 AM

```<html>
<title>CSS 2 COLUMn LAYOUT TUTORIAL</title>
<style type="text/css">

#container {
width:600px;

}

#left {
width:200px;
float:left;
Vertical-align:middle;

}
#main {
width:400px;
float:left;

}
</style>
<body>
<div id="container">

<div id="left" style="background:yellow;float:left;text-align:center; ">

this is the left column

</div>
<div id="main" style="background:blue;float:left;">
this is right column<br/>
hello
hello
</div>
</div>

</body>
</html>
```

Is This A Good Question/Topic? 0

## Replies To: Making one div Vertical align middle relative to other div

### #2 devangnegandhi

Reputation: 3
• Posts: 40
• Joined: 23-January 06

## Re: Making one div Vertical align middle relative to other div

Posted 29 September 2007 - 09:15 PM

i dont clearly get your question!!.....are you trying to make a 'T' like structure or am i getting it wrong??

### #3 shruti2007

Reputation: 0
• Posts: 2
• Joined: 29-September 07

## Re: Making one div Vertical align middle relative to other div

Posted 29 September 2007 - 09:31 PM

devangnegandhi, on 29 Sep, 2007 - 09:15 PM, said:

i dont clearly get your question!!.....are you trying to make a 'T' like structure or am i getting it wrong??

No Actually I want label in one div and text box with error message in another div.
When data will be incorrect error message going to be displayed.
That time label should be vertically align middle to textbox and error message

### #4 serializer

Reputation: 0
• Posts: 110
• Joined: 25-June 07

## Re: Making one div Vertical align middle relative to other div

Posted 10 October 2007 - 09:26 PM

It's a really tricky one ... an approach you could try would be inline-block -- this isn't supported in Firefox however you can use the -moz-inline-box value:

```<html>
<title>CSS 2 COLUMn LAYOUT TUTORIAL</title>
<style type="text/css">
#container {
width:600px;
vertical-align:middle;
}
#left,#main {
display:-moz-inline-box;
_display:inline-block;
}
#left {
width:200px;
}
#main {
width:400px;
}
</style>
<body>
<div id="container">

<div id="left" style="background:yellow;float:left;text-align:center; ">

this is the left column

</div>
<div id="main" style="background:blue;float:left;">
this is right column<br/>
hello
hello
</div>
</div>

</body>
</html>
```

[/quote]

Note the inline blocks/boxes/whatever the browsers want to call them, are very unpredictable! If you had a lot of stuff in your columns they might go very strange.

Also note the vertical-align attribute has to be on the outer container; it specifies how items sit on the line inside it, in this case we want them to middle align with each other vertical align is quite confusing in this regard, and may even seem a little backward...

I've also used an _ underscore for implementing an IE-only hack, however there are better hacks available. I would normally put IE rules in a separate file using conditional comments, so I don't know any better hacks offhand