How is possible to fill-in the height of a row with a cell in the following >>JSFiddle:
.x { height: 50px; }
.row { background: #eee; }
.row>:nth-child(odd) { background: lightblue; }
.row>:nth-child(even) { background: pink; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-3">fill height v</div>
<div class="col-xs-9"> <div class="x"> unknown height </div> </div>
</div>
PS. in order to be mobile compatible and also IE 11, I can't use flex
add .row{display: flex}
.x { height: 50px; }
.row {background: #eee; display: flex;}
.row>:nth-child(odd) {
background: lightblue;
}
.row>:nth-child(even) {
background: pink;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-3 cell">fill height v</div>
<div class="col-xs-9 cell">
<div class="x"> unknown height </div>
</div>
</div>
width absolute position jsfiddle.net/kth9vqhf
with display: table jsfiddle.net/kth9vqhf/1
with jQuery https://jsfiddle.net/kth9vqhf/3/
Using jQuery you can calculate the height of .x on the fly and set that as the minimum height for the cell.
$('.col-xs-3.cell').css("min-height", $('.x').height() + "px");
.x {
height: 50px;
}
.row {
background: #eee;
}
.row>:nth-child(odd) {
background: lightblue;
}
.row>:nth-child(even) {
background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-3 cell">fill height v</div>
<div class="col-xs-9 cell">
<div class="x"> unknown height </div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fill Row Height </title>
<style>
.WrapperRow{float: left; display: table; table-layout: fixed; vertical-align: top; width: 100%;}
.WrapperRow > div{display: table-cell; float: none; vertical-align: top; padding: 10px;}
.bgblue{background-color: blue;}
.cell.bgblue{width: 30%;}
.bgpink{background-color: pink;}
</style>
</head>
<body>
<div class="WrapperRow">
<div class="cell bgblue">
</div>
<div class="cell bgpink">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsa natus, vel non earum, distinctio iusto reprehenderit alias quisquam possimus, at qui nostrum ad enim totam repudiandae consectetur eius iste? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum illum, aut sunt molestias tempora amet maxime ipsum? Vero animi beatae, dicta? Ut repudiandae fugit alias quasi esse culpa. Facere, dolore?
</div>
</div>
</body>
</html>
Related
<!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.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>
<style>
#import url('https://fonts.googleapis.com/css2?family=Jost:wght#300;400;500;600;700;800&display=swap');
#import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
#categories{
text-align: center;
}
#categories h1{
margin-bottom:5rem;
}
.category-blocks h3{
font-size: x-large;
margin: 1rem 0;
}
.category-blocks{
background-color: lightgreen;}
.category-blocks p{
width: 80%;
margin: 1rem 0;
margin: auto;
text-align: justify;
margin-bottom: 1rem;
}
.category-blocks .btn-primary{
border-radius: 2rem;
background-color: transparent;
border:2px solid #03bf72;
padding: 0.7rem 1.8rem;
color: #03bf72;
}
.category-blocks .fas{
color: #03bf72;
font-size: 1.5rem;
}
</style>
<body>
<section id="categories">
<div class="row">
<div class="col-md-4 category-blocks">
<div class="col-md-12">
<i class="fas fa-bullhorn"></i>
<h3>Effective Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore architecto magni? Sed, laudantium aperiam?</p>
<button class="btn btn-primary">Learn more</button>
</div>
</div>
<div class="col-md-4 category-blocks">
<div class="col-md-12">
<i class="fas fa-bullhorn"></i>
<h3>Effective Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore architecto magni? Sed, laudantium aperiam?</p>
<button class="btn btn-primary">Learn more</button>
</div>
</div>
<div class="col-md-4 category-blocks">
<div class="col-md-12">
<i class="fas fa-bullhorn"></i>
<h3>Effective Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore architecto magni? Sed, laudantium aperiam?</p>
<button class="btn btn-primary">Learn more</button>
</div>
</div>
</div>
</section>
</body>
</html>
I need to set 3 blocks side by side in a page, so I applied 'col-md-4', unfortunately I was not getting space in middle of them even after I tried all the possible ways. Please help me out.
Why dont you do it with display: flex or maybe display: grid, with that you can do a gap: X and that will do the separation.
NOTE: the gap: X, can be diferent if you are using flex or grid, you can find it in here:
flex - https://coryrylan.com/blog/css-gap-space-with-flexbox
grid - https://developer.mozilla.org/es/docs/Web/CSS/gap
I have just created a grid layout with old techniques (float and inline elements). It works enough nicely. Briefly I have a top-level wrapper class to center and limit size content. There are 2 main sections, each one with a header (20%) ,and the remainder (80%) is subdivided in different ways. There is even an elastic gutter (in em) setted with padding. I have designed the layout with in mind a good separation between content and presentation for high code maintainability and for this rason there is some redundant tag (especially divs).
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float layout plus wrapping rows using inline-block</title>
<!-- the base styles and "housekeeping" styles are in here: -->
<link rel="stylesheet" href="css/grid-base.css">
<!-- the HTML5 shiv, to help older browsers understand styling
on newer HTML5 elements: -->
<script src="js/html5shiv.min.js"></script>
<style>
/* grid styling */
.row {
margin: 0 -.6875em;
padding: 0;
list-style: none;
}
.row:after {
content: '';
display: block;
clear: both;
}
.row-quartet > * {
width: 25%;
}
.row-trio > * {
width: 33.3333%;
}
.col {
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0 .6875em 1.375em;
}
.col:last-child {
float: right;
}
.row-wrapping {
font-size: 0;
margin: 0 -11px;
margin: 0 -.6875rem;
}
.row-wrapping > * {
float: none;
vertical-align: top;
display: inline-block;
font-size: 16px;
font-size: 1rem;
}
/* content styling */
.subcategory {
margin-top: 1.5em;
border-bottom: 1px solid #8e3339;
}
.subcategory-featured {
width: 50%;
}
.subcategory-content {
width: 80%;
}
.subcategory-header {
width: 20%;
}
.story {
padding: .6875em;
background-color: #eee;
}
.story + .story {
margin-top: 1.375em;
}
.story img {
width: 100%;
}
</style>
</head>
<body>
<header class="masthead">
<div class="wrapper">
<h1>Important News</h1>
</div>
</header>
<nav role="navigation" class="navbar">
<div class="wrapper">
<ul class="navlist">
<li>Home</li>
<li>World</li>
<li>Local</li>
<li>Sports</li>
</ul>
</div>
</nav>
<main class="wrapper">
<section class="subcategory">
<div class="row">
<header class="col subcategory-header">
<h2>Lorem ipsum</h2>
</header>
<div class="col subcategory-content">
<div class="row row-quartet">
<div class="col subcategory-featured">
<article class="story">
<img src="http://placehold.it/600x300" alt="Dummy image">
<h3>Cras suscipit nec leo id.</h3>
<p>Autem repudiandae aliquid tempora quos reprehenderit architecto, sequi repellat.</p>
</article>
</div>
<div class="col">
<article class="story">
<img src="http://placehold.it/600x300" alt="Dummy image">
<h3>Perferendis, ipsam!</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
</div>
<div class="col">
<article class="story">
<img src="http://placehold.it/600x300" alt="Dummy image">
<h3>Curabitur mattis purus nec velit.</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
</div>
</div>
<ul class="row row-quartet row-wrapping">
<li class="col">
<div class="story">
<h3>Perferendis, ipsam! Dolor sit amet consectetur</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Aliquam mattis eros id posuere.</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Proin leo felis, semper nec</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Aliquam vitae risus tortor. Sed!</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Perferendis, ipsam!</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Aliquam mattis eros id posuere.</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Proin leo felis, semper nec</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Aliquam vitae risus tortor. Sed!</h3>
</div>
</li>
</div>
</div>
</div>
</section>
<section class="subcategory">
<div class="row">
<header class="col subcategory-header">
<h2>Dolor sit amet</h2>
</header>
<div class="col subcategory-content">
<div class="row row-trio">
<div class="col">
<article class="story">
<img src="http://placehold.it/600x300" alt="Dummy image">
<h3>Ut sit amet mi massa</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
</div>
<div class="col">
<article class="story">
<h3>Nunc mollis sit amet nunc</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
<article class="story">
<h3>Duis sed ante enim. Cras</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
</div>
<div class="col">
<article class="story">
<img src="http://placehold.it/600x300" alt="Dummy image">
<h3>Animi, explicabo, ipsum</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
And the extern .css:
body {
margin: 0;
line-height: 1.375;
font-family: Georgia, Times New Roman, Times, serif;
}
h1,h2,h3,h4,h5,h6 {
font-family: Avenir Next, Avenir, Franklin Gothic, Trebuchet MS, Arial, sans-serif;
margin-top: 0;
}
a {
color: #8E3339;
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: underline;
}
/* here's our wrapper */
.wrapper {
width: 95%;
max-width: 76em;
margin: 0 auto;
}
/* masthead styling */
.masthead {
background-color: #8E3339;
}
.masthead h1 {
margin: 0;
padding: 0.5em 0;
color: #fff;
text-shadow: -.1em .1em 0 rgba(0,0,0,0.3);
}
/* navbar styling */
.navbar {
background-color: #5E2126;
margin-bottom: 1.375em;
}
nav {
display: block;
}
.navbar ul {
font-family: 'Avenir Next', Avenir, Corbel, 'Franklin Gothic', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
list-style: none;
padding: 0;
margin: 0;
background-color: #752A2F;
display: flex;
overflow: hidden;
}
.navbar li {
float: left;
text-transform: uppercase;
text-align: center;
box-sizing: border-box;
flex: 1 1 auto;
border-left: 1px solid #8E3339;
}
.navbar li:first-child {
border-left: 0;
}
.navbar li a {
display: block;
text-decoration: none;
line-height: 1.75em;
padding: 1em 2em;
color: #fff;
}
https://jsfiddle.net/36q59rav/
To improve the code I introduced in a second moment (A sort of progressive enhancement) the power of flexbox, to add several embellishments as box of equal height that is a tricky feature to have with float (in actual fact there was already flexbox for the navbar with float like fallback).
I'm using Modernizr to test specific flexbox support (class flexbox and flexwrap). I have reached an awesome result in Firefox (for my limited experience) but with my big surprise when I test the code in Google Chrome there is a visual mistake: the second nested row of first section is overlapped to first row and I'm not able to understand why.
Here is the code:
https://jsfiddle.net/rs7n8hLm/
You can see the same problem in the jsfiddle browser.
Advice is also appreciated because I'm in a blind alley, and I'm very available if some line of code is obscure.
Thanks in advance.
Here a screenshot of the problem.
https://ibb.co/jkNKRnY
How can I place an image that goes from end of .col-md-4 to the end of the screen?
Here is what I have to do by design - red lines are .container boundaries, text is aligned to the left, and on the right is an image (or slider). I can't do .col-md-8 since the image needs to go as far as the screen is wide.
Can I combine .container and .container fluid somehow? What would you suggest? Image must be visible full width across all desktop sizes.
I currently did this with position absolute but this way the image is cut out and this is not desirable. https://codepen.io/ivan-topi/pen/pGYYjj
If I remove position: relative from .row and place it on .content then I can position image nicely with right: 0 to the end of the screen, but in that case I am not sure how can I position it without overlapping text on the left?
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
</div>
<div class="img-wrapper">
<img src="https://via.placeholder.com/1300x450">
</div>
</div>
</div>
</div>
.content {
overflow: hidden;
height: 450px;
position: relative;
}
.row {
position: relative;
}
p {
font-size: 20px;
}
.img-wrapper {
left: 435px;
position: absolute;
width: 100%;
height: 450px;
overflow: hidden;
}
img {
width: 100%;
}
You can consider negative margin while using col-md-8. The trick is to add the amount space on the right as a negative margin to the container inside col-md-8 to create the overflow you want:
.content {
overflow: hidden;
height: 450px;
position: relative;
}
.row {
position: relative;
}
p {
font-size: 20px;
}
img {
width:100%;
}
#media (min-width: 768px) {
.negative {
margin-right: calc((720px - 100vw)/2 - 15px);
}
}
#media (min-width: 992px) {
.negative {
margin-right: calc((960px - 100vw)/2 - 15px);
}
}
#media (min-width: 1200px) {
.negative {
margin-right: calc((1140px - 100vw)/2 - 15px);
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
</div>
<div class="col-md-8">
<div class="negative">
<img src="https://via.placeholder.com/1300x450" class="d-block">
</div>
</div>
</div>
</div>
</div>
If i understand you, you need this:
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-4 p-0 d-flex align-items-center">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
</div>
<div class="col-md-8 p-0">
<img class="img-fluid" src="https://via.placeholder.com/1300x450">
</div>
</div>
</div>
</div>
And from .img-wrapper remove position:absolute and left: 435px;
Check it here: https://codepen.io/gionic/pen/QYoPqq
I hope it helps you.
How can I have this header 'full width'. So that the image is on the left side of the screen. But that the content inside (President Jean ...) is in the grid?
I was thinking about creating a new container.
.container--full { max-width: 1400px; width: 100%; }
My .container grid has a max-width of 1170px. So my new container is wider than .container.
And then set a background-image, position left and background color grey.
Inside that .container--full, create .container
<div class="container--full">
<div class="container">
</div>
</div>
Test with container-fluid.
<div class="container-fluid" style="background-image: url('<?php bloginfo('template_directory'); ?>/images/commission-header.png');">
<div class="container">
<div class="col-sm-3">
<div class="info">
President
</div>
</div>
<div class="col-sm-9">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime obcaecati consequatur illum dolor quasi labore molestiae voluptatum consectetur laborum vel, modi nulla totam blanditiis quam sapiente, suscipit laudantium. Necessitatibus, eos.
</div>
</div>
</div>
CSS
.commission-business {
.container-fluid {
background-color: $grey--lighter;
background-position: left top;
background-repeat: no-repeat;
}
.info {
background: red;
display: block;
padding: 1rem 2rem;
}
}
Just use bootstraps 'container-fluid' class. (learn more)
<div class="container-fluid">
<div class="row>
...
</div>
</div>
I'm using Bootstrap 3.3.2 to create two columns. Each column has a heading, a bordered div with text of an unknown length, and an image. I need the bordered divs with text to be the same height, but only when the columns are side by side. If the window is narrow enough for the columns to be stacked, they should not be the same height. How can I achieve this?
I realize I could use JavaScript to set the shortest div's height to be the same as the tallest div's height, but the problem with this method is that when the user decreases the width of their browser window, the text overflows outside of the div.
Here is my code (jsFiddle demo):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.equal {
border: 3px solid #333;
padding: 8px;
}
img {
display: block;
margin: 20px auto 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Foo</h1>
<div class="equal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. His similes sunt omnes, qui virtuti student levantur vitiis, levantur erroribus, nisi forte censes Ti. Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q. Eamne rationem igitur sequere, qua tecum ipse et cum tuis utare, profiteri et in medium proferre non audeas? Duo Reges: constructio interrete. Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Est, ut dicis, inquit; Id enim ille summum bonum eu)qumi/an et saepe a)qambi/an appellat, id est animum terrore liberum. An est aliquid, quod te sua sponte delectet?</p>
</div>
<img src="http://placehold.it/350x150" alt>
</div>
<div class="col-md-6">
<h1>Bar</h1>
<div class="equal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tum Torquatus: Prorsus, inquit, assentior; Quid, quod res alia tota est? Maximus dolor, inquit, brevis est. Nihilo beatiorem esse Metellum quam Regulum. Honesta oratio, Socratica, Platonis etiam. Duo Reges: constructio interrete.</p>
</div>
<img src="http://placehold.it/350x150" alt>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
I know this is similar to this question, but I think it's actually different.
var equal1 = $(".equal1").height();
var equal2 = $(".equal2").height();
if(equal1 < equal2 ){
$(".equal1").height($(".equal2").height());
} else {
$(".equal2").height($(".equal1").height());
}
Please, see this
Demo result
or
Demo with code.
Just with pure CSS you can solve it with flex.
You can add another class to your row class and then apply the styles on that class.
<div class="container">
<div class="row row-eq-height">
<div class="col-xs-6">
...
In the css add:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap; /*to enable responsiveness*/
}
.row-eq-height > [class*="col-"] {
display: flex;
flex-direction: column;
border: 1px solid green;
}
You can check a demo here.
Updated !
Try DEMO
Using JavaScript
$(".equal2").height($(".equal1").height());
Do Read http://www.ejeliot.com/blog/61