Making one div Vertical align middle relative to other div

How to make first div vertically align middle relative to other Div

Page 1 of 1

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

#1 shruti2007  Icon User is offline

  • New D.I.C Head

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

Making one div Vertical align middle relative to other div

Post icon  Posted 29 September 2007 - 05:03 AM 

<html>
<head>
<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>
</head>
<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  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • 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??
Was This Post Helpful? 0
  • +
  • -

#3 shruti2007  Icon User is offline

  • New D.I.C Head

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

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

Posted 29 September 2007 - 09:31 PM

View Postdevangnegandhi, 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
Was This Post Helpful? 0
  • +
  • -

#4 serializer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • 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>
<head>
<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>
</head>
<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 :)
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1