Two column of responsive height

Developer
Laura Moraiti
Size
2,908 Kb
Views
40,480
  1. Two column of responsive height Previews
  2. Two column of responsive height HTML Codes
  3. Two column of responsive height CSS Codes

How do I make an two column of responsive height?

Two columns of unknown height (using display: table-cell). The first column displays a div (of variable height as well) centered vertically using the :before method. . What is a two column of responsive height? How do you make a two column of responsive height? This script and codes were developed by Laura Moraiti on 27 August 2022, Saturday.

Two column of responsive height Previews
IQ Test

Two column of responsive height - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Two column of responsive height</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap"> <div class="left"> <article>	<div class="img-wrap"><img src="http://sfoxwriting.files.wordpress.com/2013/11/star_wars_logo.png"></div>	<div class="music-bars"></div>	<div class="content"> <h3>Star Wars</h3> <ul> <li>Darth Vader</li> <li>Obi Wan Kenobi</li> <li>Luke Skywalker</li> </ul> <div class="btn">Read more</div> </div> <div class="clear"></div>	</article> </div> <div class="right"> <strong>Star Wars is an American epic space opera franchise centered on a film series created by George Lucas.</strong> <p>The film series, consisting of two trilogies, has spawned an extensive media franchise called the Expanded Universe including books, television series, computer and video games, and comic books.</p><p> These supplements to the franchise resulted in significant development of the series' fictional universe, keeping the franchise active in the 16-year interim between the two film trilogies.</p><p> The franchise depicts a galaxy described as far, far away in the distant past, and it commonly portrays Jedi as a representation of good, in conflict with the Sith, their evil counterpart.</p><p> Their weapon of choice, the lightsaber, is commonly recognized in popular culture. The franchise's storylines contain many themes, with strong influences from philosophy and religion.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Two column of responsive height - Script Codes CSS Codes

* { box-sizing: border-box;
}
.clear:after { content: ""; display: table; clear: both;
}
.wrap { width: 100%;
}
.left { width: 40%; background-color: #CCC; display: table-cell; text-align: center; background: url(http://media.moddb.com/images/mods/1/21/20368/auto/1360149072star_wars_battlefront_elite_squadron-normal.jpg) no-repeat center center; background-size: cover; padding: 1em;
}
.left:before {	content: '';	display: inline-block;	height: 100%;	vertical-align: middle;	margin-right: -0.25em;	} .left article { background-color: #FFF; border-radius: 5px; padding: 1em; display: inline-block;	vertical-align: middle; } .left article ul { margin: 1em 0; padding: 0; list-style: none; } .left article .img-wrap { width: 200px; height: 200px; background-color: #000; border-radius: 100%; overflow: hidden; line-height: 200px; margin: 0 auto 1em; } .left article .img-wrap img { width: 200px; height: auto; vertical-align: middle; }
.btn {	display: inline-block;	border: none;	font-weight: 700;	background-color: #CCC;	text-decoration: none;	cursor: hand;	cursor: pointer;	transition: all .3s ease-in;	text-transform: uppercase;	padding: .7em 1.8em;	font-size: .9em; border-radius: 2em; background-color: #A5DE37; color: #FFF;
} .btn:hover {	background-color: #91C03D;	}
.right { width: 60%; background-color: #FFF; display: table-cell; padding: 2em; vertical-align: top; font-family: 'Consolas', monospace; line-height: 1.5; color: #333;
}
@media (max-width: 600px) { .left { display: block; width: 100%; } .left article { display: block; text-align: left; } .left article .img-wrap { float: left; } .left article .content { float: left; padding: 1em 1em 1em 3em; }
}
Two column of responsive height - Script Codes
Two column of responsive height - Script Codes
Home Page Home
Developer Laura Moraiti
Username Fixie
Uploaded August 27, 2022
Rating 3
Size 2,908 Kb
Views 40,480
Do you need developer help for Two column of responsive height?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Laura Moraiti (Fixie) Script Codes
Name
Text and headings flow for a health site, on the making
Simple gallery jquery
WIP
Responsive and friendly table
Edit inline text and hidden input with jQuery
Horizontal infinite loop newsticker
Unconventional slideshow
Fluid section title with border on both sides
Breadcrumb made with jQuery
Music equalizer bars with jQuery
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!