getting sidebar column to extend to bottom of page - css

I am working on getting a two column layout that extends to the bottom of my page.
However, my sidebar cuts off at the container-fluid height even though I am trying to get it to extend to the whole page.
What is weird is that my content column works fine.
HTML:
<div class="container-fluid">
<div class="row-fluid columns no-margin fill">
<div id="sidebar" class="span2 columns no-margin right-edge"></div>
<div id="contentWrapper" class="span10 columns no-margin pull-right"></div>
</div>
</div>
CSS:
html, body, form {
height: 100%;
min-height: 100%;
background-image:url("../../images/lightGreyBackground.png");
background-repeat: repeat;
font-family:"Segoe UI", Helvetica, Arial, Sans-Serif;
}
.container-fluid {
margin: 0 auto;
height: auto;
padding: 0px;
}
.columns {
height: 100%;
min-height:100%;
margin: 0px;
width: 100%;
}
.fill {
position: absolute;
height: 100%;
min-height: 100%;
}
.no-margin {
margin-left: 0%;
width: 100%;
}
.right-edge {
border-right: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
#sidebar {
background-color: White;
padding-top:15px;
}


For have 2 column :
<html>
<head>
<style type="text/css">
.container-fluid { width: 100%;}
.float {
float: left;
width: 50%; /* Size colonne */
margin: 1em 0; /* Margin colonne */
}
.spacer { clear: both; }
</style>
</head>
<body>
<div class="container-fluid">
<div class="float">Colonne 1</div>
<div class="float">Colonne 2</div>
<div class="spacer"></div>
</div>
</body>
</html>
Use the framework bootstrap or 960.gs, powerful front-end framework for faster and easier web development.
With bootstrap 3 :
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
</div>
</div>

Related

CSS Ease-out blinking

I am developing a website and I dont know why, my left divs with ease-out blinks always, but the right not! I dont want them to blink and I cant resolve this insue.
I saw, that this changes with the page size, like on full screen happens, when we reduce a little bit its fine, and reduce more happens again! I think its a bug.
Code from divs:
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop-code"></i>
</div>
<div class="service-text">
<h3>Web Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
.service {
position: relative;
width: 100%;
padding: 45px 0 15px 0;
}
.service .service-item {
position: relative;
margin-bottom: 30px;
display: flex;
align-items: center;
box-shadow: inset 0 0 0 0 transparent;
transition: ease-out 0.5s;
}
.service .service-item:hover {
box-shadow: inset 800px 0 0 0 #EF233C;
}
.service .service-icon {
position: relative;
width: 150px;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #EF233C;
background: #ffffff;
}
.service .service-icon i {
position: relative;
font-size: 60px;
color: #EF233C;
transition: .3s;
}
.service .service-item:hover i {
font-size: 75px;
}
.service .service-text {
position: relative;
width: calc(100% - 120px);
padding: 0 30px;
}
.service .service-text h3 {
margin-bottom: 10px;
font-size: 20px;
font-weight: 600;
transition: 1s;
}
.service .service-text p {
margin: 0;
font-size: 16px;
transition: 1s;
}
.service .service-item:hover .service-text h3,
.service .service-item:hover .service-text p {
color: #ffffff;
}
#media (max-width: 575.98px) {
.service .service-text h3 {
font-size: 16px;
margin-bottom: 5px;
}
.service .service-text p {
font-size: 14px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DevFolio - Developer Portfolio Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Free Website Template" name="keywords">
<meta content="Free Website Template" name="description">
<!-- Favicon -->
<link href="img/favicon.ico" rel="icon">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<!-- CSS Libraries -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<!-- Service Start -->
<div class="service" id="service">
<div class="container">
<div class="section-header text-center wow zoomIn" data-wow-delay="0.1s">
<p>What I do</p>
<h2>Awesome Quality Services</h2>
</div>
<div class="row">
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.0s">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop"></i>
</div>
<div class="service-text">
<h3>Web Design</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s">
<div class="service-item">
<div class="service-icon">
<i class="fa fa-laptop-code"></i>
</div>
<div class="service-text">
<h3>Web Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.4s">
<div class="service-item">
<div class="service-icon">
<i class="fab fa-android"></i>
</div>
<div class="service-text">
<h3>Apps Design</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.6s">
<div class="service-item">
<div class="service-icon">
<i class="fab fa-apple"></i>
</div>
<div class="service-text">
<h3>Apps Development</h3>
<p>
Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Service End -->
</body>
</html>
There you have my code html just with services and css! Now all are blinking when they are under each other! And I dont know why
Gif of what happens:

Align button to bottom right of form

I made a simple page using Bootstrap 4 with a contact form and would like the button to be aligned to the bottom right, rather than bottom middle, of it. How can I accomplish this?
Here's the HTML of the form:
<div class="row">
<div class="col center-block">
<div class="contact">
<h2>Contact</h2>
<form action="mailto:test#test.com" method="post" enctype="text/plain">
<div class="form-group">
<input type="text" class="form-control" id="contact-name" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="contact-email" aria-describedby="emailinfo" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="contact-message" placeholder="Your message" required>
</div>
<button type="submit" class="btn btn-dark">Send</button>
</form>
</div>
</div>
</div>
And the CSS applied to buttons and form elements:
.form-control {
width: 50%;
margin: 0 auto;
border-bottom: 1px solid #888;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-radius: 0;
padding: 10px 0px;
}
input[type=text], input[type=email] {
background-color: WhiteSmoke;
}
button {
margin-top: 1em;
margin-bottom: 2em;
}

Use this code for button:
<div class="bt-btn">
<button type="submit" class="btn btn-dark">Send</button>
</div>
CSS:
.bt-btn {
margin: 0 auto;
text-align: right;
width: 50%;
}

button {
margin-top: 1em;
margin-bottom: 2em;
float: right;
margin-right: 25%;
}
#contact { max-width: 960px; margin: 0 auto; }
form { padding: 75px 25px; }
I would also recommend adding a container around it and give it a max-width of 960px. The whole form area.

You just use d-flex class nothing else and no need to use inline CSS
<div class="d-flex flex-row-reverse">
<button type="submit" class="btn btn-dark" >Send</button>
</div>
That's it.

<div class="form-group col-md-12 text-right mt-2">
<button type="submit" class="btn btn-primary pl-4 pr-4">Submit</button>
</div>

You could do something like.
button {
margin-right: 25%;
float : right;
}
Working example:
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-family: "Playfair Display", serif;
padding-top: 0.5em;
}
h2, h5 {
text-transform: uppercase;
/* Padding used instead of margins because whereas margins add space beyond element's box and therefore won't be colored, the inverse is true for padding */
padding: 0.5em 0;
margin: 0;
}
.about p {
padding: 0 4em 2em 4em;
margin: 0;
text-align: left;
}
.nav-link {
text-transform: uppercase;
color: white;
}
.nav-link:hover {
color: white;
}
.hero-image {
background-image: url(https://image.ibb.co/jEN7CS/workspace.jpg);
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
/* Resizes background image to fill entire container */
background-size: cover;
position: relative;
}
.about {
background-color: WhiteSmoke;
}
.portfolio {
background-color: LightGrey;
}
.contact {
background-color: WhiteSmoke;
}
/* Removes white space from sides of each column */
.col {
padding: 0;
}
.footer {
position: bottom;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 0.75rem;
background-color: grey;
}
.footer-tag {
color: white;
text-align: left;
padding: 15px;
}
.fab {
float: right;
padding: 10px;
color: white;
}
.fab:hover {
color: #4d4d4d;
}
.form-control {
width: 50%;
margin: 0 auto;
border-bottom: 1px solid #888;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-radius: 0;
padding: 10px 0px;
}
input[type=text], input[type=email] {
background-color: WhiteSmoke;
}
button {
margin-top: 1em;
margin-bottom: 2em;
margin-right: 25%;
float : right;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar sticky-top navbar-expand-sm bg-dark">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="hero-image">
<div class="hero-text text-white">
<h1>Name</h1>
<h5>Web developer</h5>
<form action="mailto:test#test.com" method="post" enctype="text/plain">
<button class="btn btn-dark">Contact Me</button>
</form>
</div>
</div>
</div>
</div>
<section id="about">
<div class="row">
<div class="col">
<div class="about">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit arcu quis lectus auctor, nec laoreet augue ornare. Proin vehicula id purus ac accumsan. Aliquam eu rutrum orci. Aliquam rhoncus ipsum sed nisi porta mattis. Cras euismod sed justo a vehicula. Maecenas nibh magna, auctor nec erat in, hendrerit blandit turpis. Curabitur laoreet viverra mi at consequat. Donec mollis tortor sem, vel pharetra magna mattis quis. Praesent erat dolor, lacinia at euismod quis, sodales eu orci. Fusce ut nibh dolor. Suspendisse potenti. Proin fermentum eros condimentum hendrerit mattis. Morbi libero nibh, tempus aliquam leo sed, elementum rutrum turpis. Pellentesque et pharetra sapien. Nulla sed quam vel ex dictum egestas in tempus risus. Donec lacus magna, feugiat sed lobortis finibus, bibendum vel magna.</p>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="row">
<div class="col">
<div class="portfolio">
<h2>Portfolio</h2>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="row">
<div class="col center-block">
<div class="contact">
<h2>Contact</h2>
<form action="mailto:test#test.com" method="post" enctype="text/plain">
<div class="form-group">
<input type="text" class="form-control" id="contact-name" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="contact-email" aria-describedby="emailinfo" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="contact-message" placeholder="Your message" required>
</div>
<button type="submit" class="btn btn-dark">Send</button>
</form>
</div>
</div>
</div>
</section>
</div> <!-- End of container-fluid -->
<div class="footer">
<i class="fab fa-linkedin fa-2x"></i>
<i class="fab fa-github fa-2x"></i>
<i class="fab fa-codepen fa-2x"></i>
<div class="footer-tag">
<p>Created by Name.</p>
</div>

you need to make the width of your form 50% with margin:auto to keep it centered , and the inputs inside it 100% to fill the width of the form, wrap you button in a form-group and add text-align:right to it, this will keep the responsiveness ,
here's a fiddle : https://jsfiddle.net/takius/j730vdmp/21/
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-family: "Playfair Display", serif;
padding-top: 0.5em;
}
h2,
h5 {
text-transform: uppercase;
/* Padding used instead of margins because whereas margins add space beyond element's box and therefore won't be colored, the inverse is true for padding */
padding: 0.5em 0;
margin: 0;
}
.about p {
padding: 0 4em 2em 4em;
margin: 0;
text-align: left;
}
.nav-link {
text-transform: uppercase;
color: white;
}
.nav-link:hover {
color: white;
}
.hero-image {
background-image: url(https://image.ibb.co/jEN7CS/workspace.jpg);
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
/* Resizes background image to fill entire container */
background-size: cover;
position: relative;
}
.about {
background-color: WhiteSmoke;
}
.portfolio {
background-color: LightGrey;
}
.contact {
background-color: WhiteSmoke;
}
/* Removes white space from sides of each column */
.col {
padding: 0;
}
.footer {
position: bottom;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 0.75rem;
background-color: grey;
}
.footer-tag {
color: white;
text-align: left;
padding: 15px;
}
.fab {
float: right;
padding: 10px;
color: white;
}
.fab:hover {
color: #4d4d4d;
}
.form-control {
width: 100%;
margin: 0 auto;
border-bottom: 1px solid #888;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-radius: 0;
padding: 10px 0px;
}
input[type=text],
input[type=email] {
background-color: WhiteSmoke;
}
button {
margin-top: 1em;
margin-bottom: 2em;
}
form {
width: 50%;
margin: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- Grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar sticky-top navbar-expand-sm bg-dark">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="hero-image">
<div class="hero-text text-white">
<h1>Name</h1>
<h5>Web developer</h5>
<form action="mailto:test#test.com" method="post" enctype="text/plain">
<button class="btn btn-dark">Contact Me</button>
</form>
</div>
</div>
</div>
</div>
<section id="about">
<div class="row">
<div class="col">
<div class="about">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit arcu quis lectus auctor, nec laoreet augue ornare. Proin vehicula id purus ac accumsan. Aliquam eu rutrum orci. Aliquam rhoncus ipsum sed nisi porta mattis. Cras euismod sed
justo a vehicula. Maecenas nibh magna, auctor nec erat in, hendrerit blandit turpis. Curabitur laoreet viverra mi at consequat. Donec mollis tortor sem, vel pharetra magna mattis quis. Praesent erat dolor, lacinia at euismod quis, sodales
eu orci. Fusce ut nibh dolor. Suspendisse potenti. Proin fermentum eros condimentum hendrerit mattis. Morbi libero nibh, tempus aliquam leo sed, elementum rutrum turpis. Pellentesque et pharetra sapien. Nulla sed quam vel ex dictum egestas
in tempus risus. Donec lacus magna, feugiat sed lobortis finibus, bibendum vel magna.</p>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="row">
<div class="col">
<div class="portfolio">
<h2>Portfolio</h2>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="row">
<div class="col center-block">
<div class="contact">
<h2>Contact</h2>
<form action="mailto:test#test.com" method="post" enctype="text/plain">
<div class="form-group">
<input type="text" class="form-control" id="contact-name" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="contact-email" aria-describedby="emailinfo" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="contact-message" placeholder="Your message" required>
</div>
<div class="form-group" style="text-align:right;">
<button type="submit" class="btn btn-dark">Send</button>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
<!-- End of container-fluid -->
<div class="footer">
<i class="fab fa-linkedin fa-2x"></i>
<i class="fab fa-github fa-2x"></i>
<i class="fab fa-codepen fa-2x"></i>
<div class="footer-tag">
<p>Created by Name.</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Split a bootstrap list-group-item into two columns

If I have a Bootstrap 3 list-group of <a> elements. I would like one of them split in half so that within the group it looks similar to a button group as shown in the snippet.
How can I do this?
.container {
width: 75%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="list-group">
Left Side
Right Side
Dapibus ac facilisis in
Vestibulum at eros
</div>
<p>How to divide list-group-items .left-side and .right-side so they appear on the same line but seperated similar to this:
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<a type="button" class="btn btn-default">Left Side</a>
<a type="button" class="btn btn-default">Right Side</a>
</div>
</div>

Class your special case so we can target the items with the correct specificity
Notice the .clearfix that will put the floats back where they should be once finished.
.container {
width: 75%;
}
.list-group-item.left-side,
.list-group-item.right-side {
margin: 0 0 -1px;
float: left;
width: 50%;
border-bottom-width:0px;
}
.split-items .list-group-item.left-side{
border-top-right-radius:0px;
border-bottom-right-radius:0px;
}
.split-items .list-group-item.right-side{
border-top-left-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border-top-right-radius:4px;
border-left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br>
<div class="container">
<div class="list-group">
<div class="clearfix split-items">
Left Side
Right Side
</div>
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
</div>
</div>

Why don't you just float the a tags?
Add float:left and width:50% to your .list-group-item CSS:
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
width: 50%;
float: left }

Order right column between two divs on left column in Foundation

With mobile-first in mind, I have an html structure that stacks 3 divs (when on mobile) vertically.
JSFiddle: https://jsfiddle.net/danbrellis/mozez66k/1/
<div class="row">
<div class="small-12 large-3 columns">
<div class="panel small-12 columns googleMapFormContainer">
<h3 class="googleMapFormContainer-title">Find a Group Near You</h3>
<form class="googleMapForm" id="near-group-search">
<div class="row">
<div class="small-6 large-6 columns">
<label>ZIP Code
<input id="zip" type="text" name="zip" placeholder="ZIP Code" />
</label>
</div>
<div class="small-6 large-6 columns">
<label>Radius (mi)
<select id="radius" name="radius">
<option value=10>10</option>
</select>
</label>
</div>
</div>
<div class="row">
<div class="small-12 columns googleMapForm-submitButtonContainer">
Search
</div>
</div>
</form>
</div>
</div>
<div class="small-12 large-9 columns">
<div style="margin-bottom: 20px;">
<img src="http://via.placeholder.com/1071x520" />
</div>
</div>
<div class="small-12 large-3 large-pull-9 columns ">
<div class="panel">
<p class="small-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales ex risus, ac lacinia tellus lobortis ut. Suspendisse quis tellus eget neque varius pretium. Praesent rutrum luctus volutpat</p>
<p class="small-text">Quisque sit amet pulvinar urna. Praesent at convallis libero. Ut egestas ac orci quis sollicitudin.</p>
</div>
</div>
</div>
Mobile display:
However, when on desktop, I need the middle div to be in a right column. Here's what I want:
I'm using foundation's pull-large-9 class on div 3 to get it to the left, but it clears div 2 so I end up with div 3 spaced too far below div 1.
What I'm getting:
Btw, I'm using Foundation 5 and compiling the scss. I appreciate any thoughts or input. Open to using JS but would prefer a css/html solution if possible.

When I had a similar issue (shown below),
This is what I did to fix it:
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: column;
height: 312px;
}
.box1 {
background-color: red;
width: 555px;
height: 312px;
}
.box2 {
background-color: blue;
width: calc(100% - 555px);
height: 200px;
}
.box3 {
background-color: green;
width: calc(100% - 555px);
height: 112px;
;
}
/* MOBILE RWD */
#media all and (max-width: 750px) {
.wrapper {
flex-direction: row;
}
.wrapper .box1 {
width: 100%;
order: 0;
}
.wrapper .box2 {
width: 100%;
order: -1;
}
.wrapper .box3 {
width: 100%;
}
}
<div class="wrapper">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>

Card flip animation in flexbox layout

I have a two-part issue. First, I'm struggling to implement a card flip animation to cards in an existing flexbox grid layout since all of the solutions I've come across apply position: absolute on the cards, which breaks the layout and makes the rows overlap each other as they have almost no height. I also can't manually set the heights as it's based on variable content/viewports.
Secondly, I also can't get the animation itself working. I'm going for CSS approach triggered in jQuery. I tried the plugin jQuery Flip, but that also had the positioning issue.
Basically, I'm looking for a card flip animation solution that doesn't need the cards to be set to position: absolute, or does, but allows for multiple rows that don't have a fixed height. I don't mind using jQuery.
CSS:
.events-row {
display: flex;
justify-content: space-between;
margin: 0 auto;
max-width: 1280px;
}
.card {
flex-basis: 31.3%;
position: relative;
padding: 15px 0;
}
.card .card-flip-cont {
padding: 15px;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.card .card-front,
.card .card-back {
position: absolute; /* Need to get rid of */
-webkit-backface-visibility: hidden;
}
.card .card-back {
-webkit-transform: rotatex(-180deg);
}
.card-flip-cont .card-flipped {
-webkit-transform: rotatex(-180deg);
}
Layout:
<div class="events-row">
<div class="card">
<div class="card-flip-cont">
<div class="card-face card-front">
<div class="card-img four-three-img">
<img src="http://i.imgur.com/gsnJi.jpg" />
</div>
<div class="card-info">
<h2>Event title</h2>
<h3>Event date</h3>
<h3>Event venue</h3>
<p>
Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
</p>
<div class="button-cont">
<div class="button purple-button">Buy Tickets</div>
</div>
</div>
</div>
<div class="card-face card-back">
<div class="card-img four-three-img">
<img src="http://i.imgur.com/gsnJi.jpg" />
</div>
<div class="card-info">
<h2>Event title2</h2>
<h3>Event date2</h3>
<h3>Event venue2</h3>
<p>
Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
</p>
<div class="button-cont">
<div class="button purple-button">Buy Tickets</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery:
$('.card-front .button').on('click', function() {
$(this).parents('.card-flip-cont').addClass('flipped');
});
Demo: http://codepen.io/ourcore/pen/oBeXzq

Resources