jquery - Columns same height (part of column) + bootstrap -
i'm trying figure out how can make part of columns same height other parts in column. image clarify:
left data have column. full page this:
my html looks this:
<div class="container"> <div class="row"> <div class="col-md-5"> <div class="contacts"> <h2>business contacts</h2> <div class="infomation"> <div class="col-md-6"> <h3>industry</h3> <div class="name">joris<br> <span>vuerstaek</span></div> <div class="mail"><a href="mailto:joris.v@vkgroup.be">joris.v@vkgroup.be</a></div> </div> <div class="col-md-6"> <h3>public space</h3> <div class="name">wouter<br> <span>verhaegen</span></div> <div class="mail"><a href="mailto:wouter.v@vkgroup.be">wouter.v@vkgroup.be</a></div> </div> <div class="col-md-6"> <h3>buildings</h3> <div class="name">dirk<br> <span>slabbinck</span></div> <div class="mail"><a href="mailto:dirk.s@vkgroup.be">dirk.s@vkgroup.be</a></div> </div> <div class="col-md-6"> <h3>healthcare</h3> <div class="name">kenneth<br> <span>groosman</span></div> <div class="mail"><a href="mailto:kenneth.g@vkgroup.be">kenneth.g@vkgroup.be</a></div> </div> </div> </div> </div> <div class="col-md-7"> <div class="addresses"> <h2>belgium</h2> <div class="col-xs-6 col-md-4"> <div class="information"> <div class="address"> itech incubator 2<br> rue auguste piccard 48<br> b - 6041 charleroi </div> <div class="numbers"> <span>t</span> +32 71 15 91 30<br> <span>e</span> <a href="mailto:valerie.t@vkgroup.be">valerie.t@vkgroup.be</a> </div> <a href="#" class="direction">directions</a> </div> </div> <div class="col-xs-6 col-md-4"> <div class="information"> <div class="address"> brugsesteenweg 210<br> b - 8800 roeselare </div> <div class="numbers"> <span>t</span> +32 51 26 20 20<br> <span>f</span> +32 51 26 20 21<br> <span>e</span> <a href="mailto:roeselare@vkgroup.be">roeselare@vkgroup.be</a> </div> <a href="#" class="direction">directions</a> </div> </div> <div class="col-xs-6 col-md-4"> <div class="information"> <div class="address"> europa building<br> avenue clemenceau 87<br> b - 1070 brussels </div> <div class="numbers"> <span>t</span> +32 2 414 07 77<br> <span>f</span> +32 2 414 04 98<br> <span>e</span> <a href="mailto:bxl@vkgroup.be">bxl@vkgroup.be</a> </div> <a href="#" class="direction">directions</a> </div> </div> <div class="col-xs-6 col-md-4"> <div class="information"> <div class="address"> axxes business park<br> guldensporenpark<br> building - n° 4<br> b - 9820 merelbeke </div> <div class="numbers"> <span>t</span> +32 9 210 31 50<br> <span>f</span> +32 9 210 31 59<br> <span>e</span> <a href="mailto:gent@vkgroup.be">gent@vkgroup.be</a> </div> <a href="#" class="direction">directions</a> </div> </div> </div> <div class="addresses"> <h2>vietnam</h2> <div class="col-xs-6 col-md-4"> <div class="information"> <div class="address"> pullman hanoi, c21, level 5<br> 40 cat linh, dong da district<br> hanoi </div> <div class="numbers"> <span>t</span> +84 4 3736 9097<br> <span>e</span> <a href="mailto:vietnam@vkgroup.be">vietnam@vkgroup.be</a> </div> <a href="#" class="direction">directions</a> </div> </div> <div class="col-xs-6 col-md-4"> <div class="information"> <div class="address"> harbour view tower, level 13<br> 35 nguyen hue, district 1<br> ho chi minh city </div> <div class="numbers"> <span>t</span> +84 8 3512 2051<br> <span>e</span> <a href="mailto:vietnam@vkgroup.be">vietnam@vkgroup.be</a> </div> <a href="#" class="direction">directions</a> </div> </div> </div> </div> </div> </div> </div> what i've done give div class address fixed height of 104px. problem in second part address longer 104px. how can fix easily?
nielsv, hi there. have @ fiddle.
doing here.
gave both address , numbers classes set height. used row layout here too.
vietnam title gave little issue in stack, put each country within own rows.
resized belgium layout 2 side side. has it's own row.
have added border top/bottom lines better view here while laying out. can remove them.
when resized looks ok, may want tweek this.
content have here add smaller media breakpoint @ 320px , set each full width. remember bootstrap helps adding custom css helps too.
hope can on track here.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>starter template bootstrap</title> <!-- bootstrap core css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <style> body { padding-top: 50px; } .space { margin-top: 2%; margin-bottom: 2%; } .information { margin-bottom: 2%; } .contact { height: 190px; } .address { height: 104px; border-top: 1px solid #999; } .numbers{ height: 104px; border-bottom: 1px solid #999; } .direction{ line-height: 30px; border-bottom: 1px solid #999; } .bg-country { background-color: aliceblue; padding-left: 2% } </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top "> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand " href="#">project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">home</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container col-lg-12 space"></div> <div class="container"> <div class="row col-xs-12 col-md-5"> <div class="contacts"> <h2>business contacts</h2> <div class="infomation"> <div class="col-xs-6 col-md-6 contact"> <h3>industry</h3> <div class="name">joris<br> <span>vuerstaek</span></div> <div class="mail"><a href="mailto:joris.v@vkgroup.be">joris.v@vkgroup.be</a></div> </div> <div class="col-xs-6 col-md-6 contact"> <h3>public space</h3> <div class="name">wouter<br> <span>verhaegen</span></div> <div class="mail"><a href="mailto:wouter.v@vkgroup.be">wouter.v@vkgroup.be</a></div> </div> <div class="col-xs-6 col-md-6"> <h3>buildings</h3> <div class="name">dirk<br> <span>slabbinck</span></div> <div class="mail"><a href="mailto:dirk.s@vkgroup.be">dirk.s@vkgroup.be</a></div> </div> <div class="col-xs-6 col-md-6"> <h3>healthcare</h3> <div class="name">kenneth<br> <span>groosman</span></div> <div class="mail"><a href="mailto:kenneth.g@vkgroup.be">kenneth.g@vkgroup.be</a></div> </div> </div> </div> </div> <!--end row business contacts--> <div class="row col-xs-12 col-md-7"> <div class="row addresses"> <h2 class="bg-country">belgium</h2> <div class="col-xs-6 col-md-6"> <div class="information"> <div class="address"> itech incubator 2<br> rue auguste piccard 48<br> b - 6041 charleroi </div> <div class="numbers"> <span>t</span> +32 71 15 91 30<br> <span>e</span> <a href="mailto:valerie.t@vkgroup.be">valerie.t@vkgroup.be</a> </div> <div class="direction text-center"> <a href="#" class="btn btn-xs btn-success">directions</a> </div> </div> </div> <div class="col-xs-6 col-md-6"> <div class="information"> <div class="address"> brugsesteenweg 210<br> b - 8800 roeselare </div> <div class="numbers"> <span>t</span> +32 51 26 20 20<br> <span>f</span> +32 51 26 20 21<br> <span>e</span> <a href="mailto:roeselare@vkgroup.be">roeselare@vkgroup.be</a> </div> <div class="direction text-center"> <a href="#" class="btn btn-xs btn-success">directions</a> </div> </div> </div> <div class="col-xs-6 col-md-6"> <div class="information"> <div class="address"> europa building<br> avenue clemenceau 87<br> b - 1070 brussels </div> <div class="numbers"> <span>t</span> +32 2 414 07 77<br> <span>f</span> +32 2 414 04 98<br> <span>e</span> <a href="mailto:bxl@vkgroup.be">bxl@vkgroup.be</a> </div> <div class="direction text-center"> <a href="#" class="btn btn-xs btn-success">directions</a> </div> </div> </div> <div class="col-xs-6 col-md-6"> <div class="information"> <div class="address"> axxes business park<br> guldensporenpark<br> building - n° 4<br> b - 9820 merelbeke </div> <div class="numbers"> <span>t</span> +32 9 210 31 50<br> <span>f</span> +32 9 210 31 59<br> <span>e</span> <a href="mailto:gent@vkgroup.be">gent@vkgroup.be</a> </div> <div class="direction text-center"> <a href="#" class="btn btn-xs btn-success">directions</a> </div> </div> </div> </div> </div> <!--end row belgium--> <div class="row col-xs-12 col-md-12"> <div class=" row addresses"> <h2 class="bg-country">vietnam</h2> <div class="col-xs-6 col-md-3"> <div class="information"> <div class="address"> pullman hanoi, c21, level 5<br> 40 cat linh, dong da district<br> hanoi </div> <div class="numbers"> <span>t</span> +84 4 3736 9097<br> <span>e</span> <a href="mailto:vietnam@vkgroup.be">vietnam@vkgroup.be</a> </div> <div class="direction text-center"> <a href="#" class="btn btn-xs btn-success">directions</a> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div class="information"> <div class="address"> harbour view tower, level 13<br> 35 nguyen hue, district 1<br> ho chi minh city </div> <div class="numbers"> <span>t</span> +84 8 3512 2051<br> <span>e</span> <a href="mailto:vietnam@vkgroup.be">vietnam@vkgroup.be</a> </div> <div class="direction text-center"> <a href="#" class="btn btn-xs btn-success">directions</a> </div> </div> </div> </div> </div> <!--end row vietnam --> </div> <!--end container--> <div class="container col-lg-12 space"></div> <!-- bootstrap core javascript ================================================== --> <!-- placed @ end of document pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>
Comments
Post a Comment