1

I originally had floating divs and i wanted content inside these floats to be vertically aligned.

This was giving me troubles so i had to remove floats.

I came around this fiddle referred in this post.

And used the fiddle to get desired layout. But i am facing troubles vertically aligning divs.

I tried,

vertical-align:middle;
display:table-cell;

For parent containers and 

display: inline-block;

for child contents.

1) In this fiddle. I want the right to be vertically aligned inside right-container.

To say in other words. I want to have two divs vertically aligned inside a main div, and divs inside each of two divs need to be vertically alined.

2) How can i achieve the vertical alignment inside the floats? So i may not change my original layout. Say in the fiddle right and left are floats.

Need some pointers.

Edit:

This might be simpler with tables. But i am looking for div based solutions.

Community
  • 1
  • 1
hitesh israni
  • 1,742
  • 4
  • 25
  • 48

1 Answers1

1

Is that what you want?

Added: <div id="right" style="display:table-cell;vertical-align:middle;"> RIGHT </div>

jsFiddle update: http://jsfiddle.net/5vpA3/157/

Davit
  • 1,394
  • 5
  • 21
  • 47
  • This will work if you are not worried about support IE v5.5, 6, or 7. – Matthew Cox Nov 04 '12 at 20:55
  • Oh! no. I want the inner div `right` in the middle of `right-container`. so following the fiddle red needs to aligned inside green and the green should seem to be floated right of blue. – hitesh israni Nov 04 '12 at 20:55
  • @MatthewCox, i might not be worried about Ie < 7 Support. But i would like to know the hack for them. I would check that out. :) – hitesh israni Nov 04 '12 at 21:01
  • @tmpmember. I just edited the height and width of the main container in your fiddle. Looks like it broke. Please check http://jsfiddle.net/5vpA3/159/ – hitesh israni Nov 04 '12 at 21:07
  • @Mashit you need to change the widths of the other divs to reflect your changes: http://jsfiddle.net/RTGfU/ I used percentages but you could use pixels, if you that's the way you prefer. – Devin M Nov 04 '12 at 21:41
  • thnx @akaDevo, but left(the one in blue) and right(green) are still not aligned. i just changed height of green to 80% of the main. can you please check. http://jsfiddle.net/RTGfU/1/ – hitesh israni Nov 05 '12 at 06:31