My page contains a collection of elements, each element is a fixed height row. Within the row, the content block should fill only part of the row. This could be the entire row, only the left part, only the right part, or somewhere in the middle.
To draw this with html I was thinking of using two buffer divs (left and right side of the content). Note how wide the buffers are will be set programmatically (with angular) so does not need to be set on the CSS. This can just be hardcoded in the PLNKR with inline styles.
Here is my starting plnkr.
I asked a similar question here, but was only needing 3 variations for rows (left half, right half, full width), now I need more flexibility.
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me full width</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating left</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating right</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me in the middle</p>
</div>
<div class="right-buffer"></div>
</div>
The output will be similar to below, but in addition to having the option of floating the element to the right or left, it could float in the middle.
Used floats to put it right / left and margin:auto to center the div using:
.left{
float: left;
width: 33.33%;
}
.right{
float: right;
width: 33.33%;
}
.center{
margin: auto;
width: 33.33%;
}
.right-buffer {
clear:both;
}
(Added some border / padding for illustration)
/* Styles go here */
.employee-container {
margin-bottom: 6px;
margin-top: 6px;
border: 1px solid lightsteelblue;
}
.employee-container > div.content {
padding: 15px;
background-color: lightsteelblue;
}
.left{
float: left;
width: 33.33%;
}
.right{
float: right;
width: 33.33%;
}
.center{
margin: auto;
width: 33.33%;
}
.right-buffer {
clear:both;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me full width</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content left">
<p>Show me floating left</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content right">
<p>Show me floating right</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content center">
<p>Show me in the middle</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I hope I understood well your request. I've made it in Plunker with flexbox.
http://plnkr.co/edit/IxCupfRaXUWYlkVhsqga
<style>
.flex{display:flex;}
.flex > *{flex:1;padding:2px}
</style>
<body>
<h1>Hello Plunker!</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me full width</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="flex">
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating left with a very big text nd it will adjust automatically</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating right</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me in the middle small text</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
</div>
</div>
</body>
Here is my Code and plunker link may be it can help you -
Link Plunker
HTML Code
<body>
<h1>Hello Plunker!</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me full width</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="employee-container leftDiv">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating left</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="employee-container rightDiv">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating right</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 centeredDiv">
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me in the middle</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS Code
.employee-container {
margin-bottom: 6px;
margin-top: 6px;
}
.employee-container > div {
padding: 3px;
background-color: lightsteelblue;
}
.centeredDiv{
position:relative;
}
.centeredDiv > .employee-container{
position:absolute;
width:50%;
left:25%;
}
.rightDiv{
width:50%;
float:right;
}
.leftDiv{
width:50%;
float:left;
}
Related
I'd like to find a way to select all the makes of cars except those that are inside a div with the class discontinued or scrapped. Here's my markup:
div:not(.discontinued):not(.scrapped) > .make {
color: green;
}
<div class="car">
<div class="make">NISSAN</div>
<div class="model">MICRA</div>
</div>
<div class="discontinued">
<div class="car">
<div class="make">FORD</div>
<div class="model">MONDEO</div>
</div>
</div>
<div class="scrapped">
<div class="car">
<div class="make">SEAT</div>
<div class="model">IBIZA</div>
</div>
</div>
<div class="scrapped">
<div class="preowned">
<div class="car">
<div class="make">BMW</div>
<div class="model">100</div>
</div>
</div>
</div>
<div class="car">
<div class="make">HONDA</div>
<div class="model">INTEGRA</div>
</div>
</div>
<div class="car">
<div class="make">PEUGEOT</div>
<div class="model">206</div>
</div>
<div class="car">
<div class="make">TOYOTA</div>
<div class="model">COROLLA</div>
</div>
As you can see above, I tried the following:
div:not(.discontinued):not(.scrapped) > .make
...but this still included FORD, SEAT, and BMW.
Unfortunately CSS selectors cannot traverse up parent elements, so if you are just trying to style them differently you may want to reverse your thought process and select ones that are .discontinued or .scrapped and apply overriding styles:
.model {
padding-left: 10px;
}
.make {
color: green;
}
.scrapped .make,
.discontinued .make {
color: red;
}
<div class="car">
<div class="make">NISSAN</div>
<div class="model">MICRA</div>
</div>
<div class="discontinued">
<div class="car">
<div class="make">FORD</div>
<div class="model">MONDEO</div>
</div>
</div>
<div class="scrapped">
<div class="car">
<div class="make">SEAT</div>
<div class="model">IBIZA</div>
</div>
</div>
<div class="scrapped">
<div class="preowned">
<div class="car">
<div class="make">SEAT</div>
<div class="model">IBIZA</div>
</div>
</div>
</div>
<div class="car">
<div class="make">HONDA</div>
<div class="model">INTEGRA</div>
</div>
<div class="car">
<div class="make">PEUGEOT</div>
<div class="model">206</div>
</div>
<div class="car">
<div class="make">TOYOTA</div>
<div class="model">COROLLA</div>
</div>
Why don't you try this style code,
div.make:not(.discontinued .make):not(.scrapped .make) {
color: green;
}
So I have a "mostly" functional system that works right now as a CMS: The user goes into an editor and chooses from one of four templates. Within the template they click on a section where they can add images, text or both.
I have a preview screen that shows them what they're making but the issue is that they can create something here where it looks like the image is fitting the space but when it's saved and shown on a huge display it creeps to the top and has a ton of white space below.
So I'm using TinyMCE and when the user saves the info it's saved as HTML in the database, and on my display page (code below) I have that database-driven html coming through a JSON object.
My thing is this: How can I use existing Bootstrap to make sure that regardless of which layout I'm using below (either full width, 2 half width, or a half width with 2 quarter-height half divs) the content within can be more responsive and flexible? I'm trying to get the displayed content to match more closely to what they see on the editor so that regardless of what computer they use to make it, it will be more responseive on the display
This is all of my css and html
html,
body {
height: 100vh;
width: 100vw;
overflow: hidden;
}
iframe{
height:100% !important;
width:100% !important;
}
.middle p{
max-height:100%;
}
.my-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
width:100vw;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #778899 ;
color: white;
text-align: center;
}
.my-container>.middle {
flex-grow: 1;
padding:30px;
/*background-image: url('images/bg_green.svg');*/
background-size: cover;
}
.my-container>.middle>* {
}
<div class="container-fluid my-container d-flex h-100">
<div class="row top">
<?php include 'banner.php'?>
</div>
<div class="row middle" id="middle" style="background-image: url();">
<!-- Full Page Divs -->
<div class="col-lg-12" id="fullColumn">
<div class="fullContent" id="fullContent" style="height: 100%; ">
</div>
</div>
<!-- End Full Page Divs -->
<!-- Half Page Divs -->
<div class="col-lg-6 leftColumn " id="leftColumn" style="align-items: center;">
<div class="leftContent" id="leftContent" style=" margin:auto; height: 100%; ">
</div>
</div>
<div class="col-lg-6 rightColumn" id="rightColumn">
<div class="rightContent" id="rightContent" style=" height: 100%; ">
</div>
</div>
<!-- End Half Page Divs -->
<!-- Quarter Page Divs -->
<!-- Left -->
<div class="col-lg-6" id="leftColumnQtr">
<div class="row" style="height:50%; padding-bottom: 15px;">
<div class="col-lg-12" style="height:100%;">
<div id="topLeftContent" style=" height: 100%; ">
</div>
</div>
</div>
<div class="row" style="height:50%; padding-top: 15px;">
<div class="col-lg-12" style="height:100%;">
<div id="bottomLeftContent" style=" height: 100%;">
</div>
</div>
</div>
</div>
<div class="col-lg-6" id="rightColumnQtrHalf" >
<div id="rightQtrContent" style=" height: 100%; ">
</div>
</div>
<!-- right -->
<div class="col-lg-6" id="rightColumnQtr">
<div id="leftQtrContent" style="height: 100%;">
</div>
</div>
<div class="col-lg-6" id="leftColumnQtrHalf" >
<div class="row" style="height:50%; padding-bottom: 15px;">
<div class="col-lg-12" style="height:100%;">
<div id="topRightContent" style=" height: 100%;">
</div>
</div>
</div>
<div class="row" style="height:50%; padding-top: 15px;">
<div class="col-lg-12" style="height:100%;">
<div id="bottomRightContent" style=" height: 100%;">
</div>
</div>
</div>
</div>
<!-- End Quarter Page Divs -->
</div>
<!-- End Row Middle -->
<div class="row bottom">
<?php include 'ticker.php';?>
</div>
</div>
Here's a solution based on what I could get about what you wanted. One thing I'd Strongly recommend is not setting width and height before the initial layout is structured. once the skeleton is ready you can start messing with it.
NOTE: I used bootstrap 4.2.1 for testing this.
"//maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
-- SOLUTION --
I removed all your styles to make things simpler, the styles below are for display purpose only. Feel free to play with it.
<style>
div {
background-color: #00333333;
margin: 0;
padding: 5px;
min-height: 20px;
}
div.row {
background-color: #ff000033;
}
</style>
HTML code
<div class="container-fluid">
<div class="row top">
<h2>something in top</h2>
</div>
<div id="middle">
<div class="row">
<!-- Full Page Divs -->
<div class="col-sm-12">
<h1> FULL PAGE </h1>
</div>
</div>
<!-- End Full Page Divs -->
<!-- Half Page Divs -->
<div class="row">
<div class="col-sm-6">
<h1> left half </h1>
</div>
<div class="col-sm-6">
<h1> right half </h1>
</div>
</div>
<!-- End Half Page Divs -->
<!-- Quarter Page Divs -->
<!-- Left -->
<div class="row">
<div class="col-sm-6" id="leftColumnQtr">
<div class="row">
<div class="col-sm-12">
<h1>topLeftContent</h1>
</div>
<div class="col-sm-12">
<h1>bottomLeftContent</h1>
</div>
</div>
</div>
<div class="col-sm-6" id="rightColumnQtrHalf">
<div class="col-sm-12">
<h1>Right half</h1>
</div>
</div>
</div>
<!-- right -->
<div class="row">
<div class="col-sm-6" id="rightColumnQtrHalf">
<div class="col-sm-12">
<h1>Left half</h1>
</div>
</div>
<div class="col-sm-6" id="leftColumnQtr">
<div class="row">
<div class="col-sm-12">
<h1>top right Content</h1>
</div>
<div class="col-sm-12">
<h1>bottom right Content</h1>
</div>
</div>
</div>
</div>
<!-- End Quarter Page Divs -->
<!-- BONUS: may be this is what you wanted too -->
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<div class="col-sm-12">
<h1>top Left Content</h1>
</div>
<div class="col-sm-12">
<h1>bottom Left Content</h1>
</div>
</div>
<div class="col-sm-6" id="rightColumnQtrHalf">
<div class="col-sm-12">
<h1>Right half</h1>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<div class="col-sm-12">
<h1>Left half</h1>
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-12">
<h1>top right Content</h1>
</div>
<div class="col-sm-12">
<h1>bottom right Content</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Row Middle -->
<div class="row bottom">
<h2>something in bottom</h2>
</div>
</div>
Let me know if this is what you intended.
I have a table structure with only divs and float left. I want it to be responsive (I know I have to add media queries). There is something wrong in my code. For now I want to reduce the window it changes to horizontal scroll which I tried and it doesn't work.
Here is my code:
<div style="">
<div style="border: 2px solid green;height:100px;width:100%;">
<div style="width:6rem;background:aqua;top: 4.2rem;position:absolute;">FM</div>
<div style="width:6rem;float:left;background:aqua;position: relative;top:2.4rem;">TNT</div>
<div style="text-align:center;float:left;border:1px solid;">
<div style="background:red;">Alarmes</div>
<div style="width:100%;">
<div style="float: left;width:6rem;background:pink;">Criticité</div>
<div style="float: left;width:6rem;background:pink;">Sans Sup</div>
<div style="float: left;width:6rem;background:pink;">Non nominale</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">(chart)</div>
<div style="float: left;width:6rem;background:gold;">2</div>
<div style="float: left;width:6rem;background:gold;">5</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">(chart)</div>
<div style="float: left;width:6rem;background:gold;">10</div>
<div style="float: left;width:6rem;background:gold;">1</div>
</div>
</div>
<div style="text-align:center;float:left;border:1px solid;">
<div style="background:red;">TICKETS</div>
<div>
<div style="float: left;width:6rem;background:pink;">Non nominale</div>
<div style="float: left;width:6rem;background:pink;">A suivre</div>
<div style="float: left;width:6rem;background:pink;">Clôs</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">5</div>
<div style="float: left;width:6rem;background:gold;">-</div>
<div style="float: left;width:6rem;background:gold;">2</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">9</div>
<div style="float: left;width:6rem;background:gold;">-</div>
<div style="float: left;width:6rem;background:gold;">0</div>
</div>
</div>
<div style="text-align:center;float:left;border:1px solid;">
<div style="background:red;">SITES</div>
<div>
<div style="float: left;width:6rem;background:pink;">Perte HF</div>
<div style="float: left;width:6rem;background:pink;">-3DB</div>
<div style="float: left;width:6rem;background:pink;">Décro HS</div>
<div style="float: left;width:6rem;background:pink;">Alarme RX</div>
<div style="float: left;width:6rem;background:pink;">Alarme RX</div>
<div style="float: left;width:6rem;background:pink;">GE</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">-</div>
<div style="float: left;width:6rem;background:gold;">8</div>
<div style="float: left;width:6rem;background:gold;">3</div>
<div style="float: left;width:6rem;background:gold;">7</div>
<div style="float: left;width:6rem;background:gold;">1</div>
<div style="float: left;width:6rem;background:gold;">6</div>
</div>
<div>
<div style="float: left;width:6rem;background:gold;">-</div>
<div style="float: left;width:6rem;background:gold;">5</div>
<div style="float: left;width:6rem;background:gold;">4</div>
<div style="float: left;width:6rem;background:gold;">8</div>
<div style="float: left;width:6rem;background:gold;">0</div>
<div style="float: left;width:6rem;background:gold;">2</div>
</div>
</div>
</div>
</div>
Step 1. Remove all the styles from the divs
Step 2 use inline-block instead of float.
Step 3 make each table-row enclosed in its own div with display: block except the ones you want alongside each other, which should be inline-block
Step 4 add a width to the parent div and overflow-x: auto;
Step 5 add a non-wrapping parent div around the two sections you want side-by-side, and put each of those in its own div
(if you want to only have the scrolling on the sites section, put that inside the div with class container)
HTML
<div class="container">
<div class="no-wrap">
<div class="side-by-side">
<div class="row">
<div> </div>
</div>
<div class="row">
<div> </div>
</div>
<div class="row">
<div class="aqua">FM</div>
</div>
<div class="row">
<div class="aqua">TNT</div>
</div>
</div><!--/side-by-side-->
<div class="side-by-side">
<div class="row">
<div class="red">Alarmes</div>
</div>
<div class="row">
<div class="pink">Criticité</div>
<div class="pink">Sans Sup</div>
<div class="pink">Non nominale</div>
</div>
<div class="row">
<div class="gold">(chart)</div>
<div class="gold">2</div>
<div class="gold">5</div>
</div>
<div class="row">
<div class="gold">(chart)</div>
<div class="gold">10</div>
<div class="gold">1</div>
</div>
</div>
<div class="side-by-side">
<div class="row">
<div class="red">TICKETS</div>
</div>
<div class="row">
<div class="pink">Non nominale</div>
<div class="pink">A suivre</div>
<div class="pink">Clôs</div>
</div>
<div class="row">
<div class="gold">5</div>
<div class="gold">-</div>
<div class="gold">2</div>
</div>
<div class="row">
<div class="gold">9</div>
<div class="gold">-</div>
<div class="gold">0</div>
</div>
</div>
<div class="side-by-side">
<div class="row">
<div class="double-red">SITES</div>
</div>
<div class="no-wrap">
<div class="side-by-side">
<div class="row">
<div class="pink">Perte HF</div>
<div class="pink">-3DB</div>
<div class="pink">Décro HS</div>
</div>
<div class="row">
<div class="gold">-</div>
<div class="gold">8</div>
<div class="gold">3</div>
</div>
<div class="row">
<div class="gold">-</div>
<div class="gold">5</div>
<div class="gold">4</div>
</div>
</div>
<div class="side-by-side">
<div class="row">
<div class="pink">Alarme RX</div>
<div class="pink">Alarme RX</div>
<div class="pink">GE</div>
</div>
<div class="row">
<div class="gold">7</div>
<div class="gold">1</div>
<div class="gold">6</div>
</div>
<div class="row">
<div class="gold">8</div>
<div class="gold">0</div>
<div class="gold">2</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--/container-->
CSS
.pink {
display: inline-block;
width:6rem;
background:pink;
}
.gold {
display: inline-block;
width:6rem;
background:gold;
}
.aqua {
width:6rem;
display: inline-block;
background:aqua;
}
.red {
background-color: red;
color: #fff;
width: 18.5rem;
}
.double-red {
background-color: red;
color: #fff;
width: 37.25rem;
}
.container {
width: 18.5rem;
overflow: auto;
}
.row {
display: block;
}
.side-by-side {
display: inline-block;
}
.no-wrap {
width: 37.25rem;
white-space: nowrap;
}
CodePen here: https://codepen.io/vogelbeere/pen/awxQMW
There are three 33% divs next to eachother. The 1st is an empty div, the 2nd a div containing four images, and the 3rd empty div.
How do I responsively keep these 3 blocks the same height? I'm using Foundation 6.
.block {
background: grey;
}
.block, .imgBlock {
height: 200px;
}
.imgBlock .row .column{
padding: 0;
}
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>
<div class="row small-up-3">
<div class="column block">
</div>
<div class="column imgBlock">
<div class="row small-up-2">
<div class="column">
<img src="http://placekitten.com/200/150"/>
</div>
<div class="column">
<img src="http://placekitten.com/200/150"/>
</div>
<div class="column">
<img src="http://placekitten.com/200/150"/>
</div>
<div class="column">
<img src="http://placekitten.com/200/150"/>
</div>
</div>
</div>
<div class="column block">
</div>
</div>
Use foundation equalizer js. Here is your code using foundation equalizer:
Code:
$(document).foundation();
.block {
background: grey;
}
.block,
.imgBlock {
height: 200px;
}
.imgBlock .row .column {
padding: 0;
}
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/plugins/foundation.equalizer.js"></script>
<div class="row small-up-3" data-equalizer>
<div class="column block" data-equalizer-watch>
</div>
<div class="column imgBlock" data-equalizer-watch>
<div class="row small-up-2">
<div class="column">
<img src="http://placekitten.com/200/150" />
</div>
<div class="column">
<img src="http://placekitten.com/200/150" />
</div>
<div class="column">
<img src="http://placekitten.com/200/150" />
</div>
<div class="column">
<img src="http://placekitten.com/200/150" />
</div>
</div>
</div>
<div class="column block" data-equalizer-watch>
</div>
</div>
I'm sure I'm overcomplicating this in my head, but is the following layout possible using the standard bootstrap 3 grid system?
Header and sub header can fill 12 columns. Then Image, probably fixed height, spans 8-col then a side bar which spans 4-col. The problem is the side bar has an undefined height and the underneath of the image is content.
So far got something like:
<div class="col-xs-12">
<h1>Header</h1>
</div>
<div class="row">
<div class="col-md-8">
image
</div>
<div class="col-md-4">
Navigation down right
</div>
<div class="col-sm-8">
Content
</div>
</div>
Layout
According to your image
You should use the following layout (Click the "Full page" button to see it in action. Also, ignore the CSS. It's just for testing purposes):
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
[class*='col-'] > div:not(.row) {
background: #DDD;
margin: 0.25em 0;
padding: 0.5em;
text-align: center;
height: 5em;
}
.red [class*='col-'] > div:not(.row) {
background: #C55;
color: #FFF;
height: auto;
}
[class*='col-sm-4'] > div:not(.row) {
height: 9em;
}
<div class="container">
<div class="red row">
<div class="col-sm-12">
<div>HEADER</div>
</div>
<div class="col-sm-8">
<div>SUB HEADER</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-12">
<div>IMAGE</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div>LEFT COL</div>
</div>
<div class="col-sm-6">
<div>RIGHT COL</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div>SIDEBAR</div>
</div>
</div>
</div>
Essentially you want a nested row with 6 wide columns for a 12 column grid layout.
Bootstrap row has only twelve spans. I see that 8 + 4 + 8 = 20 > 12, so the "content" div will be at a new line...
And you can't put col-sm-x with col-md-x in the same row...
My suggestion: split into two rows
<div class="col-xs-12">
<h1>Header</h1>
</div>
<div class="row">
<div class="col-md-8">
image
</div>
<div class="col-md-4">
Navigation down right
</div>
</div>
<div>
<div class="col-sm-8">
Content
</div>
</div>
But If you want all of it in the same row:
<div class="col-xs-12">
<h1>Header</h1>
</div>
<div class="row">
<div class="col-md-5">
image
</div>
<div class="col-md-2">
Navigation down right
</div>
<div class="col-md-5">
Content
</div>
</div>
And if you want a side section, you can cascade rows:
<div class="col-xs-12">
<h1>Header</h1>
</div>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
Image
</div>
</div>
<div class="row">
<div class="col-md-12">
Content
</div>
</div>
</div>
<div class="col-md-4">
Navigation down right
</div>
</div>