javascript - large gap underneath floated columns? -

-

i have created typical 3 column layout. reason, middle column creating large , unwanted gap between top 3 , bottom three. there way make gap between of container same?

jsfiddle

* {  	margin: 0;  	padding: 0;  	box-sizing: border-box;	  }    html, body {  	font-family: 'lato', sans-serif;  }    column-container {  	width: 100%;  	background: #eeeeee;  }    wrapper-container {  	width: 80%;	  	margin: auto;  }    column-three {  	padding: 25px;  }    .container {  	background: #ffffff;  	border-radius: 2px;  	box-shadow: 0px 2px 1px 1px rgba(0,0,0,0.05);  }    .container h2 {  	padding: 25px;  	font-size: 18px;  	text-align: center;	  	font-weight: bold;  	color: #22313f;  }    .container:hover h2 {  	color: #22313f;  }    .container .image {  	margin: auto;  	width: 150px;  	height: 150px;  	border-radius: 100%;  	background: #22313f;	  }    .container .text {  	padding: 25px;  	font-weight: 400;  	line-height: 30px;	  }    .buy-button {  	padding-left: 25px;  	padding-right: 25px;  	padding-bottom: 25px;	  }    .buy-button {  	display: inline-block;  	width: 100%;  	text-align: center;  	padding: 15px 25px;	  	text-decoration: none;  	background: #4ecdc4;  	color: #ffffff;  	border-radius: 2px;  }    .buy-button a:hover {  	background: #45b5ad;	  }    column-container,  wrapper-container,  column-three {  	display: block;  }    column-three {  	float: left;  }    column-container {  	overflow: hidden;  }    wrapper-container {  	overflow: hidden;	  }    column-three {  	width: 33.33%;	  }      @media screen , (max-width: 960px) {  	  	column-three {  		width: 50%;	  	}  		  }    @media screen , (max-width: 768px) {  	  	column-three {  		width: 100%;	  	}  	  }    @media screen , (max-width: 480px) {  	  	wrapper-container {  		width: 90%;	  	}  	  	.container .text {  		display: none;	  	}  	  	.buy-button {  		margin-top: 25px;	  	}  	  }
<column-container>  	<wrapper-container>          <column-three>          	<div class="container">              	<h2>warcraft i</h2>                  <div class="image"></div>                  <div class="text">for ages, fallen titan sargeras plotted scour life azeroth. end, sargeras possessed human sorcerer medivh.</div>                  <div class="buy-button">                  	<a href="#">buy now</a>                  </div>              </div>          </column-three>          <column-three>          	<div class="container">              	<h2>warcraft ii</h2>                  <div class="image"></div>                  <div class="text">the human nation of stormwind had fallen before horde. knight champion anduin lothar gathered scattered remnants of human army , led refugees north</div>                  <div class="buy-button">                  	<a href="#">buy now</a>                  </div>              </div>          </column-three>          <column-three>          	<div class="container">              	<h2>warcraft iii</h2>                  <div class="image"></div>                  <div class="text">the demonic burning legion prepare launch long-awaited assault on mortal world. survival matter of strategy.</div>                  <div class="buy-button">                  	<a href="#">buy now</a>                  </div>              </div>          </column-three>          <column-three>          	<div class="container">              	<h2>warcraft i</h2>                  <div class="image"></div>                  <div class="text">the demonic burning legion prepare launch long-awaited assault on mortal world. survival matter of strategy.</div>                  <div class="buy-button">                  	<a href="#">buy now</a>                  </div>              </div>          </column-three>          <column-three>          	<div class="container">              	<h2>warcraft ii</h2>                  <div class="image"></div>                  <div class="text">the demonic burning legion prepare launch long-awaited assault on mortal world. survival matter of strategy.</div>                  <div class="buy-button">                  	<a href="#">buy now</a>                  </div>              </div>          </column-three>          <column-three>          	<div class="container">              	<h2>warcraft iii</h2>                  <div class="image"></div>                  <div class="text">the demonic burning legion prepare launch long-awaited assault on mortal world. survival matter of strategy.</div>                  <div class="buy-button">                  	<a href="#">buy now</a>                  </div>              </div>          </column-three>      </wrapper-container>  </column-container>

you have use <wrapper-container> every 3 <column-three> issue not come

* {  	margin: 0;  	padding: 0;  	box-sizing: border-box;	  }    html, body {  	font-family: 'lato', sans-serif;  }    column-container {  	width: 100%;  	background: #eeeeee;  }    wrapper-container {  	width: 80%;	  	margin: auto;  }    column-three {  	padding: 25px;  }    .container {  	background: #ffffff;  	border-radius: 2px;  	box-shadow: 0px 2px 1px 1px rgba(0,0,0,0.05);  }    .container h2 {  	padding: 25px;  	font-size: 18px;  	text-align: center;	  	font-weight: bold;  	color: #22313f;  }    .container:hover h2 {  	color: #22313f;  }    .container .image {  	margin: auto;  	width: 150px;  	height: 150px;  	border-radius: 100%;  	background: #22313f;	  }    .container .text {  	padding: 25px;  	font-weight: 400;  	line-height: 30px;	  }    .buy-button {  	padding-left: 25px;  	padding-right: 25px;  	padding-bottom: 25px;	  }    .buy-button {  	display: inline-block;  	width: 100%;  	text-align: center;  	padding: 15px 25px;	  	text-decoration: none;  	background: #4ecdc4;  	color: #ffffff;  	border-radius: 2px;  }    .buy-button a:hover {  	background: #45b5ad;	  }    column-container,  wrapper-container,  column-three {  	display: block;  }    column-three {  	float: left;  }    column-container {  	overflow: hidden;  }    wrapper-container {  	overflow: hidden;	  }    column-three {  	width: 33.33%;	  }      @media screen , (max-width: 960px) {  	  	column-three {  		width: 50%;	  	}  		  }    @media screen , (max-width: 768px) {  	  	column-three {  		width: 100%;	  	}  	  }    @media screen , (max-width: 480px) {  	  	wrapper-container {  		width: 90%;	  	}  	  	.container .text {  		display: none;	  	}  	  	.buy-button {  		margin-top: 25px;	  	}  	  }
<column-container>  	<wrapper-container>          <column-three>          	<div class="container">              	<h2>warcraft i</h2>                  <div class="image"></div>                  <div class="text">for ages, fallen titan sargeras plotted scour life azeroth. end, sargeras possessed human sorcerer medivh.</div>                  <div class="buy-button">                  	<a href="#">buy now</a>                  </div>              </div>          </column-three>          <column-three>          	<div class="container">              	<h2>warcraft ii</h2>                  <div class="image"></div>                  <div class="text">the human nation of stormwind had fallen before horde. knight champion anduin lothar gathered scattered remnants of human army , led refugees north</div>                  <div class="buy-button">                  	<a href="#">buy now</a>                  </div>              </div>          </column-three>          <column-three>          	<div class="container">              	<h2>warcraft iii</h2>                  <div class="image"></div>                  <div class="text">the demonic burning legion prepare launch long-awaited assault on mortal world. survival matter of strategy.</div>                  <div class="buy-button">                  	<a href="#">buy now</a>                  </div>              </div>          </column-three>        </wrapper-container>        <wrapper-container>          <column-three>          	<div class="container">              	<h2>warcraft i</h2>                  <div class="image"></div>                  <div class="text">the demonic burning legion prepare launch long-awaited assault on mortal world. survival matter of strategy.</div>                  <div class="buy-button">                  	<a href="#">buy now</a>                  </div>              </div>          </column-three>          <column-three>          	<div class="container">              	<h2>warcraft ii</h2>                  <div class="image"></div>                  <div class="text">the demonic burning legion prepare launch long-awaited assault on mortal world. survival matter of strategy.</div>                  <div class="buy-button">                  	<a href="#">buy now</a>                  </div>              </div>          </column-three>          <column-three>          	<div class="container">              	<h2>warcraft iii</h2>                  <div class="image"></div>                  <div class="text">the demonic burning legion prepare launch long-awaited assault on mortal world. survival matter of strategy.</div>                  <div class="buy-button">                  	<a href="#">buy now</a>                  </div>              </div>          </column-three>      </wrapper-container>  </column-container>


Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more