html - Setting a responsive height to a container while vertically centering content -

-

i'm trying solve issue height of container should responsive when minimizes browser window. content in container should stay veritcally centered too.

here's have far in codepen: http://codepen.io/anon/pen/pnzzoe

the container blue box contains text. blue box should have same height dummy image when adjusting browser window size.

thanks ahead help!

code in codepen:

html

<html>  <head> </head>  <body>   <div class="grid_12 alpha omega" id="llcontentcont">      <!-- row 1 -->     <div class="llrow" id="llrow1">       <div class="llcontent">         <div class="grid_4 llfr alpha">           <div class="lltext">             <h3>header</h3>             <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nullam hendrerit tristique sem, dictum ornare lectus.</p>           </div>         </div>         <div class="grid_8 omega">           <a href="" title=""><img src="http://dummyimage.com/868x500/00e1ff/000.gif&text=dummy+image" alt=""></a>         </div>       </div>     </div>     <!-- /row 1 -->      <!-- row 2 -->     <div class="llrow" id="llrow2">       <div class="llcontent">         <div class="grid_8 alpha">           <a href="" title=""><img src="http://dummyimage.com/868x500/00e1ff/000.gif&text=dummy+image" alt=""></a>         </div>         <div class="grid_4 llfl omega">           <div class="lltext">             <h3>header</h3>             <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nullam hendrerit tristique sem, dictum ornare lectus.</p>           </div>         </div>       </div>     </div>     <!-- /row 2 -->   </div> </body>  </html>

css

body {   width: 100%;   background: #ccc; }  #llcontentcont {width: 100%;}  #llcontentcont, .llrow, .grid_4, .grid_8 {   float: left;   display: inline;   position: relative; }  .llrow {   width: 100%;   margin: 10px 0 0; }  .llcontent {   min-width: 976px;   margin: 0 auto;   max-width: 1200px;   width: 100%; }  .llcontent .grid_4 {   display: table;   height: 100%;   background: #0091ff;   width: 26%; }  .llcontent .grid_8 {   height: 100%;   width: 72.3%; }  .llcontent .grid_8 img {   width: 100%; }  .lltext {   display: table-cell;   vertical-align: middle; }

remove other display property , give display: flex; .llcontent , .llcontent .grid_4. , align-items: center; .llcontent .grid_4 work you.

css:

.llcontent {   min-width: 976px;   margin: 0 auto;   max-width: 1200px;   width: 100%;   display: flex; }  .llcontent .grid_4 {   background: #0091ff;   width: 26%;   display: flex;   align-items: center; }  .llcontent .grid_8 {   width: 72.3%; }  .llcontent .grid_8 img {   width: 100%; }

working fiddle


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more