Mon, 2015-01-19 13:39
Hey guys ! wass'up . i had asked a similar question in the past here about vertically aligning stuff and gary had given a great answer to my question .
But i have a similar situation , but this time with floats . and the table and table-cell solution does't seem to be working .
heres my HTML :
<div class="container"> <div class="col-6"> <img src="http://images2.fanpop.com/image/photos/9400000/Random-random-9449476-1680-1050.jpg" alt=""> </div> <div class="col-6"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. </div> </div>
and heres the CSS :
.container{ background: red; width: 100%; height: 800px; overflow: auto; display: table; } .col-6{ width: 50%; float: left; background: yellow; display: table-cell; vertical-align: center; } img{ width: 100%; }
all clean and neat , i have reduced it to the minimal code .
BTW , heres my earlier question :
Mon, 2015-01-19 18:26
#1
Here is what I did to get you
Here is what I did to get you divs and it's content to align veritcally:
CSS:
.container{ background: red; width: 100%; height: 800px; overflow: auto; display: table; } .col-6{ width: 50%; float: left; background: yellow; display: table-cell; vertical-align: center; /*I would remove this, it's not helping*/ height: 614px; /*Set height so the divs have the same height*/ } /*Use to adjust your paragraph text veritically*/ .text-adjust { padding: 150px 0; height: 314px; } img{ width: 100%; }
HTML
<div class="container"> <div class="col-6"> <img src="http://images2.fanpop.com/image/photos/9400000/Random-random-9449476-1680-1050.jpg" alt=""> </div> <div class="col-6 text-adjust"> <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought.</p> <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought.</p> </div> </div>
This is probably one of the simplier ways to align you content vertically.
Hope this helps.
Mon, 2015-01-19 22:15
#2
The general solution
First things first; always.
Use semantic markup on your content. Class and id tokens should reflect their contents, not some silly grid system coding. Are you still using that silly Foundation crap, or whatever it's called? Well, stop it. It will only stunt your growth.
Text belongs in p tags, as does an img or object or other inline replaced element. In this case, your text is a quote and should be wrapped within blockquote tags. Note, too, the inline quote; it should be marked up with the q tag.
Now, back on topic. jackR's solution will work on his browser, at his viewport width, with his default font family and his default font size. Everyone else is SOL. When you make an element float, its display is automagically made block, overriding the table-cell value.
Below, find the general solution.
<!DOCTYPE HTML> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Test document</title> <style type="text/css"> /*<![CDATA[*/ #container { display; table; width: 100%; } .text, .figure { display: table-cell; padding: 1px 1em; width: 50%; vertical-align: middle; } .figure img { width: 100%; } /*]]>*/ </style> </head> <body> <div class="figure"> <p><img alt="a way too large random j image" src= "http://images2.fanpop.com/image/photos/9400000/Random-random-9449476-1680-1050.jpg"></p> </div> <div class="text"> <blockquote> <cite>Franz Kafka, ‘Metamorphisis’</cite> <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. <q>What's happened to me?</q> he thought.</p> </blockquote> <blockquote> <cite>Franz Kafka, ‘Metamorphisis’</cite> <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. <q>What's happened to me?</q> he thought.</p> </blockquote> </div> </body> </html>
cheers,
gary
Tue, 2015-01-20 05:02
#3
unbeleivable !!!!!!
@gary your a masterblaster ! Thank you ........ That was simply IN--CRE---DE--B--L--E 
:D
@JackR , Thanks a Ton dude . will try ur solution too
Tue, 2015-01-20 20:50
#4
@gary
@gary u cheated lol , i needed the floats 
(( ( anyways thanks for the help :D
Tue, 2015-01-20 22:41
#5
gautamz07 wrote: @gary u
@gary u cheated lol , i needed the floats (( ( anyways thanks for the help :D
Why?
g
Thu, 2015-01-22 09:12
#6
@gary
never mind ,
i used a media query of min-width(992px) and but all the display:table style's inside that , also , added
col-md-6{
float:none;
}
than once the page is below 992px in width , the two col-md's get the
col-md-6{
float:left;
}
and take 100% screen width , problem solved
Thanks though . Hope wht i'am saying is not too complicated .
Thu, 2015-01-22 16:57
#7
Too complicated?
col-md-6 {float:none;} is unnecessary if you don't use float in the first place.
Instead of setting float on smaller screens, simply reset col-md-6 to {display: block;).
Solved.
cheers,
gary
Thu, 2015-01-22 18:27
#8
@gary thanks
Thanks @gary ...........