8 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 5 years 3 days ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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 :

Link

jackR
jackR's picture
Offline
Regular
Denver
Last seen: 6 years 8 weeks ago
Denver
Timezone: GMT-6
Joined: 2009-04-13
Posts: 44
Points: 46

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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&#39;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&#39;s happened to
      me?</q> he thought.</p>
    </blockquote>
  </div>
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 5 years 3 days ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

unbeleivable !!!!!!

@gary your a masterblaster ! Thank you ........ That was simply IN--CRE---DE--B--L--E Laughing out loud :D

@JackR , Thanks a Ton dude . will try ur solution too Laughing out loud

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 5 years 3 days ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

@gary

@gary u cheated lol , i needed the floats Sad(( Sad( anyways thanks for the help Laughing out loud :D

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

gautamz07 wrote: @gary u

gautamz07 wrote:

@gary u cheated lol , i needed the floats Sad(( Sad( anyways thanks for the help Laughing out loud :D

Why?

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 5 years 3 days ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

@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 Laughing out loud

Thanks though . Hope wht i'am saying is not too complicated .

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 28 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 5 years 3 days ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

@gary thanks

Thanks @gary ...........