I'm creating a grid system in wordpress using Skeleton.css
The tutorial shows the following markup for the header, here you can see the logo has has a 3 classes, - five columns and clearfix
<header>
<div class="five columns clearfix">
get_template_directory_uri(); ?>/img/logo.svg"></a>
</div>
</header>
But when I look at the skellton css I cannot see a class of 'five' So i changed it to .five.columns But his make no difference, I i create a border around the class .five.columns, it does not show up am I missing something obvious?
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30.6666666667%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
}
/* Larger than mobile */
#media (min-width: 400px) {}
Many thanks
Here is a fiddle with some styling for height and color to make it obvious. Is your div 0px height? Check it with your developer tools in the browser - Chrome Developer Tools website.
https://jsfiddle.net/p1w61hmt/.
<header style="height: 100px; background: green;">
<div class="five columns clearfix" style="height: 100%;">
</div>
</header>
.five.columns { width: 39.3333333333%; }
.columns { background: red; }
Its probably some pasting errors but your HTML is not valid and your css looks like an incomplete snippet.
I have a simple layout using bootstrap which gives me 2 columns - one LEFT and one RIGHT. Using the 12 column grid format of Bootstrap - the left should be 8 wide and the right column 4 wide like below.
<div class="row">
<div class="col-md-8">Left Content</div>
<div class="col-md-4">Right Content</div>
</div>
The problem? How can i add a CONTAINER to the row so things are centered BUT give the right column a background color that stretches all the way to the edge of the browser. So if left background color is blue and right background is pink, the colors run full width whilst keeping content within them centered via the container.
BOOTPLY
Easy.
Working solution: https://jsfiddle.net/qbe2k1he/
/** Custom CSS **/
body {
background-color: #4E8FD8;
overflow-x: hidden;
}
.content, .sidebar {
border: 1px solid white;
color: white;
padding: 20px;
text-transform: uppercase;
min-height: 500px;
}
.content {
min-height: 2000px;
}
.sidebar::before {
content: '';
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
background: #DB4ECB;
z-index: -1;
margin-left: -35px;
}
#media screen and (max-width: 991px) {
.sidebar::before {
display: none;
}
}
/** Bootstrap Grid **/
#-ms-viewport {
width: device-width;
}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
#media (max-width: 767px) {
.visible-xs {
display: block !important;
}
table.visible-xs {
display: table;
}
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
}
#media (max-width: 767px) {
.visible-xs-block {
display: block !important;
}
}
#media (max-width: 767px) {
.visible-xs-inline {
display: inline !important;
}
}
#media (max-width: 767px) {
.visible-xs-inline-block {
display: inline-block !important;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.visible-sm-block {
display: block !important;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline {
display: inline !important;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline-block {
display: inline-block !important;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.visible-md {
display: block !important;
}
table.visible-md {
display: table;
}
tr.visible-md {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: table-cell !important;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.visible-md-block {
display: block !important;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline {
display: inline !important;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline-block {
display: inline-block !important;
}
}
#media (min-width: 1200px) {
.visible-lg {
display: block !important;
}
table.visible-lg {
display: table;
}
tr.visible-lg {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
display: table-cell !important;
}
}
#media (min-width: 1200px) {
.visible-lg-block {
display: block !important;
}
}
#media (min-width: 1200px) {
.visible-lg-inline {
display: inline !important;
}
}
#media (min-width: 1200px) {
.visible-lg-inline-block {
display: inline-block !important;
}
}
#media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none !important;
}
}
#media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}
.visible-print {
display: none !important;
}
#media print {
.visible-print {
display: block !important;
}
table.visible-print {
display: table;
}
tr.visible-print {
display: table-row !important;
}
th.visible-print,
td.visible-print {
display: table-cell !important;
}
}
.visible-print-block {
display: none !important;
}
#media print {
.visible-print-block {
display: block !important;
}
}
.visible-print-inline {
display: none !important;
}
#media print {
.visible-print-inline {
display: inline !important;
}
}
.visible-print-inline-block {
display: none !important;
}
#media print {
.visible-print-inline-block {
display: inline-block !important;
}
}
#media print {
.hidden-print {
display: none !important;
}
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.col, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.col, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666667%;
}
.col-xs-7 {
width: 58.33333333%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666667%;
}
.col-xs-4 {
width: 33.33333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
.col-xs-pull-12 {
right: 100%;
}
.col-xs-pull-11 {
right: 91.66666667%;
}
.col-xs-pull-10 {
right: 83.33333333%;
}
.col-xs-pull-9 {
right: 75%;
}
.col-xs-pull-8 {
right: 66.66666667%;
}
.col-xs-pull-7 {
right: 58.33333333%;
}
.col-xs-pull-6 {
right: 50%;
}
.col-xs-pull-5 {
right: 41.66666667%;
}
.col-xs-pull-4 {
right: 33.33333333%;
}
.col-xs-pull-3 {
right: 25%;
}
.col-xs-pull-2 {
right: 16.66666667%;
}
.col-xs-pull-1 {
right: 8.33333333%;
}
.col-xs-pull-0 {
right: auto;
}
.col-xs-push-12 {
left: 100%;
}
.col-xs-push-11 {
left: 91.66666667%;
}
.col-xs-push-10 {
left: 83.33333333%;
}
.col-xs-push-9 {
left: 75%;
}
.col-xs-push-8 {
left: 66.66666667%;
}
.col-xs-push-7 {
left: 58.33333333%;
}
.col-xs-push-6 {
left: 50%;
}
.col-xs-push-5 {
left: 41.66666667%;
}
.col-xs-push-4 {
left: 33.33333333%;
}
.col-xs-push-3 {
left: 25%;
}
.col-xs-push-2 {
left: 16.66666667%;
}
.col-xs-push-1 {
left: 8.33333333%;
}
.col-xs-push-0 {
left: auto;
}
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-offset-11 {
margin-left: 91.66666667%;
}
.col-xs-offset-10 {
margin-left: 83.33333333%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-8 {
margin-left: 66.66666667%;
}
.col-xs-offset-7 {
margin-left: 58.33333333%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-5 {
margin-left: 41.66666667%;
}
.col-xs-offset-4 {
margin-left: 33.33333333%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-2 {
margin-left: 16.66666667%;
}
.col-xs-offset-1 {
margin-left: 8.33333333%;
}
.col-xs-offset-0 {
margin-left: 0%;
}
#media (min-width: 768px) {
.col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: auto;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: auto;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0%;
}
}
#media (min-width: 992px) {
.col, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: auto;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: auto;
}
.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0%;
}
}
#media (min-width: 1200px) {
.col, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.col-lg-12 {
width: 100%;
}
.col-lg-11 {
width: 91.66666667%;
}
.col-lg-10 {
width: 83.33333333%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-8 {
width: 66.66666667%;
}
.col-lg-7 {
width: 58.33333333%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-5 {
width: 41.66666667%;
}
.col-lg-4 {
width: 33.33333333%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-2 {
width: 16.66666667%;
}
.col-lg-1 {
width: 8.33333333%;
}
.col-lg-pull-12 {
right: 100%;
}
.col-lg-pull-11 {
right: 91.66666667%;
}
.col-lg-pull-10 {
right: 83.33333333%;
}
.col-lg-pull-9 {
right: 75%;
}
.col-lg-pull-8 {
right: 66.66666667%;
}
.col-lg-pull-7 {
right: 58.33333333%;
}
.col-lg-pull-6 {
right: 50%;
}
.col-lg-pull-5 {
right: 41.66666667%;
}
.col-lg-pull-4 {
right: 33.33333333%;
}
.col-lg-pull-3 {
right: 25%;
}
.col-lg-pull-2 {
right: 16.66666667%;
}
.col-lg-pull-1 {
right: 8.33333333%;
}
.col-lg-pull-0 {
right: auto;
}
.col-lg-push-12 {
left: 100%;
}
.col-lg-push-11 {
left: 91.66666667%;
}
.col-lg-push-10 {
left: 83.33333333%;
}
.col-lg-push-9 {
left: 75%;
}
.col-lg-push-8 {
left: 66.66666667%;
}
.col-lg-push-7 {
left: 58.33333333%;
}
.col-lg-push-6 {
left: 50%;
}
.col-lg-push-5 {
left: 41.66666667%;
}
.col-lg-push-4 {
left: 33.33333333%;
}
.col-lg-push-3 {
left: 25%;
}
.col-lg-push-2 {
left: 16.66666667%;
}
.col-lg-push-1 {
left: 8.33333333%;
}
.col-lg-push-0 {
left: auto;
}
.col-lg-offset-12 {
margin-left: 100%;
}
.col-lg-offset-11 {
margin-left: 91.66666667%;
}
.col-lg-offset-10 {
margin-left: 83.33333333%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-offset-8 {
margin-left: 66.66666667%;
}
.col-lg-offset-7 {
margin-left: 58.33333333%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-offset-5 {
margin-left: 41.66666667%;
}
.col-lg-offset-4 {
margin-left: 33.33333333%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-offset-2 {
margin-left: 16.66666667%;
}
.col-lg-offset-1 {
margin-left: 8.33333333%;
}
.col-lg-offset-0 {
margin-left: 0%;
}
}
.clearfix,
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
content: " ";
display: table;
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
clear: both;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div id="wrapper">
<div class="container">
<div class="col-md-9">
<div class="content">
<p>left content</p>
</div>
</div>
<div class="col-md-3">
<div class="sidebar">
<p>right content</p>
</div>
</div>
</div>
</div>
You can try this, it works for me, you have to add an additional css class.
<div class="container col-md-12 nopadding">
<div class="row">
<div class="col-md-8" style="background-color:blue;">Left Content</div>
<div class="col-md-4" style="background-color:pink;">Right Content</div>
</div>
</div>
and CSS as below
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
I'm surprised I found only a few questions like this one. I had a similar requirement and I managed to solve it using a combination of absolute positioned elements and vw units.
Basically, a wrapper element has the background color of the left side to make it look like it extends to the border of the screen and an absolute positioned div with the same width of the viewport extends as background of the right side.
You can see it working in this codepen
Markup goes like this
<div class="wrapper"> <!-- to style bg without with messing with container margins -->
<div class="container">
<div class="row">
<div class="col-md-8 left"></div>
<div class="col-md-4 right">
<div class="bg"><!-- additional element that will act as background --></div>
</div>
</div>
</div>
</div>
And css:
/* Wrapper has the bg color of left side */
.wrapper,
.left {
background-color: blue;
}
/* Right container */
.right {
background-color: pink;
position: relative; /* Let it have absolute positioned children */
z-index: 0;
}
.right .bg {
background-color: pink;
/* Following will make our bg element the same size as its parent
and will put it behind it making it look like a background */
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
width: 100%; // fallback for old browsers, bg will be same size as its parent
width: 100vw; // Have the bg the same width as the screen, making the bg hang outside the screen
}
Note that as bg will hang outside the container, you will need the wrapper div or one of its parent to have its overflow-x property as hidden, otherwise horizontal scrolling bars will appear.
If you have some specific elements inside your right column you can even use css pseudo elements like :before to avoid the declaration of the bg element.
Also, you need to set the appropriate screen breakpoints to style this for smaller screen sizes.
you can try this and you can change as you wish, no need additional css.
<div class="container col-md-12">
<div class="row col-md-6 col-md-offset-3">
<div class="col-md-8" style="background-color:blue;">Left Content</div>
<div class="col-md-4" style="background-color:pink;">Right Content</div>
</div>
</div>
Demo here
<div class="_100">
<div class="container col-md-8 nopadding" style="background-color:blue;">
<div class="col-md-8 right nopadding" style="background-color:blue;border:white 1px solid;margin:5px">Left Content</div>
</div>
<div class="container col-md-4 nopadding" style="background-color:pink;">
<div class="col-md-6 nopadding" style="background-color:pink;border:white 1px solid;margin:5px">Right Content</div>
</div>
</div>
css:
.nopadding{padding: 0 !important;margin: 0 !important;}
._100 {width:100%;}
.right{float:right;}
You've got to get pretty specific with your widths, which will get finicky at breakpoint, but this will work as a starting point:
DEMO: http://www.bootply.com/F9PCGnQr6Y
<div class="container bg-grey">Example Container</div>
<div class="col-md-8 bg-info" style="height:100px">
<div class="row">
<div class="left-container bg-warning pull-right" style="height:50px">
<div class="col-xs-12">Left Content - is wider than in-container col-md-8, because it's 8/12ths of full-width</div>
</div>
</div>
</div>
<div class="col-md-4 bg-danger" style="height:100px">
<div class="row">
<div class="right-container bg-success" style="height:50px">
<div class="col-xs-12">Right Content</div>
</div>
</div>
</div>
You'll definitely need to write some custom behaviour at your breakpoint(s), and also may want the internal containers to be col-7 and col-5 since the initial col-8 ends up being very wide within, but those customizations are up to you...
Check my solution. I guess you need this one - codepen
But you need to include bootstrap 4 instead of bootstrap 3
html, body, .wrapper{
height:100%;
}
.wrapper{
padding:10px;
}
.right {
position: relative;
z-index: 0;
padding:0 !important;
}
.wrapper {
background-color: #00a2ff;
overflow-x: hidden;
}
.right:before {
content:"";
background-color: #f7469e;
height: 100%;
position: fixed;
top: 0;
width: 100%;
width: 100vw;
z-index: -1;
}
body {
background-color: #999;
color: #fff;
}
.left, .right {
outline: 1px solid #fff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-8 left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="col-4 right">Right Content -THIS CONTENT MUST NOT BE FULL WIDTH. MUST ONLY BE WIDTH OF col-md-4. THE BACKGROUND COLOR must be full-width.</div>
</div>
</div>
</div>
Here's the solution. The blocks are adaptive, you can set any height for both blocks, the height is also set automatically depending on the content. codepen
<section>
<div class="container">
<div class="block block_left">
<div class="block__content">
<p>
С другой стороны консультация с широким активом способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям.
Не следует, однако забывать, что сложившаяся структура организации требуют от нас анализа системы обучения кадров, соответствует насущным потребностям.
Товарищи! рамки и место обучения кадров требуют от нас анализа существенных финансовых и административных условий.
Товарищи! реализация намеченных плановых заданий играет важную роль в формировании системы обучения кадров, соответствует насущным потребностям.
Идейные соображения высшего порядка, а также новая модель организационной деятельности требуют от нас анализа системы обучения кадров, соответствует насущным потребностям.
Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение нашей деятельности представляет собой интересный эксперимент проверки позиций, занимаемых участниками в отношении поставленных задач.
</p>
<p>
Задача организации, в особенности же постоянный количественный рост и сфера нашей активности обеспечивает широкому кругу (специалистов) участие в формировании соответствующий условий активизации.
Не следует, однако забывать, что укрепление и развитие структуры позволяет выполнять важные задания по разработке модели развития.
Таким образом рамки и место обучения кадров требуют определения и уточнения систем массового участия.
Разнообразный и богатый опыт реализация намеченных плановых заданий играет важную роль в формировании дальнейших направлений развития.
</p>
<p>
Таким образом сложившаяся структура организации в значительной степени обуславливает создание модели развития.
Идейные соображения высшего порядка, а также дальнейшее развитие различных форм деятельности в значительной степени обуславливает создание позиций, занимаемых участниками в отношении поставленных задач.
Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании форм развития.
Повседневная практика показывает, что дальнейшее развитие различных форм деятельности способствует подготовки и реализации соответствующий условий активизации.
Идейные соображения высшего порядка, а также реализация намеченных плановых заданий требуют определения и уточнения систем массового участия.
Равным образом реализация намеченных плановых заданий позволяет выполнять важные задания по разработке систем массового участия.
</p>
<p>
Разнообразный и богатый опыт начало повседневной работы по формированию позиции представляет собой интересный эксперимент проверки новых предложений.
Таким образом новая модель организационной деятельности требуют от нас анализа системы обучения кадров, соответствует насущным потребностям.
</p>
<p>
С другой стороны реализация намеченных плановых заданий позволяет выполнять важные задания по разработке форм развития.
Товарищи! начало повседневной работы по формированию позиции требуют определения и уточнения направлений прогрессивного развития.
</p>
<p>
Таким образом сложившаяся структура организации представляет собой интересный эксперимент проверки новых предложений.
Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности требуют определения и уточнения форм развития.
</p>
</div>
</div>
<div class="block block_right">
<div class="block__content">
<p>
Таким образом сложившаяся структура организации в значительной степени обуславливает создание модели развития.
Идейные соображения высшего порядка, а также дальнейшее развитие различных форм деятельности в значительной степени обуславливает создание позиций, занимаемых участниками в отношении поставленных задач.
Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании форм развития.
Повседневная практика показывает, что дальнейшее развитие различных форм деятельности способствует подготовки и реализации соответствующий условий активизации.
Идейные соображения высшего порядка, а также реализация намеченных плановых заданий требуют определения и уточнения систем массового участия.
Равным образом реализация намеченных плановых заданий позволяет выполнять важные задания по разработке систем массового участия.
</p>
</div>
</div>
</div>
</section>
<style>
body {
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
.container {
width: 100%;
max-width: 1170px;
margin: 0 auto;
font-size: 0px;
display: flex;
flex-wrap: wrap;
}
.block {
display: inline-block;
font-size: 16px;
box-sizing: border-box;
position: relative;
color: white;
vertical-align: top;
}
.block_left {
width: 70%;
}
.block_right {
width: 30%;
}
.block::before {
content: '';
width: 150vw;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
z-index: -1;
background: #3f80cb;
min-height: 100vh;
}
.block_right:before {
background: #d55bc3;
right: auto;
left: 0px;
}
.block__content {
outline: 1px solid #ffffff91;
margin: 20px;
padding: 1px 10px;
}
#media screen and (max-width: 700px) {
.block {
width: 100%;
}
.block::before {
min-height: 0px;
}
}
</style>
I tried to search for an answer to this both within Google, and on this website.
I have a website that needs to be made responsive. It's relatively intricate, but it's definitely possible with the design we currently have.
My question is this. Is there a responsive grid system, or an example of a fully responsive grid system that does NOT rely on box-sizing: border-box. After looking at Pure & Bootstrap, it seems both rely on that property to make it work.
When thinking about it in practice, it seems to me that a box-sizing:border-box model would be required to allow the use of percentages appropriately.
Why am I unable to use this method? Support of IE7 is absolutely required for this project. I know there are polyfills and htc files that can be used to force support, however, the scale and size of this site makes these options hard to implement. From what I've read, these options should be used in moderation, and a site of this caliber, it just couldn't be used in moderation.
Thanks.
In Twitter Bootstrap 3 you can remove the box-sizing in line 293.
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Just remove this and in input declaration :)
Here is an example of the Bootstrap 2.3.x grid only using it mobile first, it kicks in at the 768 min width, you can change this value. To get this to be seen by IE7 and IE8 use Respond.js and make sure you read their docs. Basically you need to locally link (relative path) to the CSS for Respond.js.
This does not rely on box-sizing:border-box.
#media (min-width: 768px) {
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
.row {
width: 100%;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}
.row:after { clear: both }
.row [class*="span"] {
display: block;
width: 100%;
min-height: 30px;
float: left;
margin-left: 2.7624309392265194%;
*margin-left: 2.709239449864817%;
}
.row [class*="span"]:first-child { margin-left: 0 }
[class*="span"].pull-right,
.row [class*="span"].pull-right { float: right }
.row .span12 { width: 100% }
.row .span11 { width: 91.43646408839778% }
.row .span10 { width: 82.87292817679558% }
.row .span9 { width: 74.30939226519337% }
.row .span8 { width: 65.74585635359117% }
.row .span7 { width: 57.18232044198895% }
.row .span6 { width: 48.61878453038674% }
.row .span5 { width: 40.05524861878453% }
.row .span4 { width: 31.491712707182323% }
.row .span3 { width: 22.92817679558011% }
.row .span2 { width: 14.3646408839779% }
.row .span1 { width: 5.801104972375691% }
.row .offset12 { margin-left: 105.52486187845304% }
.row .offset12:first-child { margin-left: 102.76243093922652% }
.row .offset11 { margin-left: 96.96132596685082% }
.row .offset11:first-child { margin-left: 94.1988950276243% }
.row .offset10 { margin-left: 88.39779005524862% }
.row .offset10:first-child { margin-left: 85.6353591160221% }
.row .offset9 { margin-left: 79.8342541436464% }
.row .offset9:first-child { margin-left: 77.07182320441989% }
.row .offset8 { margin-left: 71.2707182320442% }
.row .offset8:first-child { margin-left: 68.50828729281768% }
.row .offset7 { margin-left: 62.70718232044199% }
.row .offset7:first-child { margin-left: 59.94475138121547% }
.row .offset6 { margin-left: 54.14364640883978% }
.row .offset6:first-child { margin-left: 51.38121546961326% }
.row .offset5 { margin-left: 45.58011049723757% }
.row .offset5:first-child { margin-left: 42.81767955801105% }
.row .offset4 { margin-left: 37.01657458563536% }
.row .offset4:first-child { margin-left: 34.25414364640884% }
.row .offset3 { margin-left: 28.45303867403315% }
.row .offset3:first-child { margin-left: 25.69060773480663% }
.row .offset2 { margin-left: 19.88950276243094% }
.row .offset2:first-child { margin-left: 17.12707182320442% }
.row .offset1 { margin-left: 11.32596685082873% }
.row .offset1:first-child { margin-left: 8.56353591160221% }
}/* end min-width */
I am looking to build a website in custom CSS and without frameworks just to increase my command over CSS. I want my entire site to retain its layout and look no matter what the device. Foundation does it with it's "smallgrid" and bootstrap with ".col-xs-". How do I do that without a framework?
Foundation and Bootstrap both use the same way to provide you flexible grids : they fix every possible column width in percents, and use media queries to switch between mobile/tablet/desktop grids (small, medium and large for Foundation, xs, sm, md and lg for Bootstrap).
Have a look on those links to learn more about this :
MDN - Media queries
CSS Wizardry Grid
Profound Grid
Bootstrap 3 Grid System
Foundation 5 Grid
...
Bootstrap 3 :
// Mobile first : Bootstrap display the content with -xs columns
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11 {
float: left;
}
.col-xs-12 { width: 100%; }
.col-xs-11 { width: 91.66666666666666%; }
.col-xs-10 { width: 83.33333333333334%; }
.col-xs-9 { width: 75%; }
.col-xs-8 { width: 66.66666666666666%; }
.col-xs-7 { width: 58.333333333333336%; }
.col-xs-6 { width: 50%; }
.col-xs-5 { width: 41.66666666666667%; }
.col-xs-4 { width: 33.33333333333333%; }
.col-xs-3 { width: 25%; }
.col-xs-2 { width: 16.666666666666664%; }
.col-xs-1 { width: 8.333333333333332%; }
// if we reach 768px, let's use -sm columns
#media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11 {
float: left;
}
.col-sm-12 { width: 100%; }
.col-sm-11 { width: 91.66666666666666%; }
...
}
// ... etc with -md and -lg columns
Foundation 5 :
// Mobile first : Foundation display the content with -small columns
#media only screen {
.column,
.columns {
position: relative;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
float: left; }
.small-1 { width: 8.33333%; }
.small-2 {width: 16.66667%; }
.small-3 { width: 25%; }
.small-4 { width: 33.33333%; }
.small-5 { width: 41.66667%; }
.small-6 { width: 50%; }
.small-7 { width: 58.33333%; }
.small-8 { width: 66.66667%; }
.small-9 { width: 75%; }
.small-10 { width: 83.33333%; }
.small-11 { width: 91.66667%; }
.small-12 { width: 100%; }
}
// If we reach 40.063em, let's use -medium columns
#media only screen and (min-width: 40.063em) {
.column,
.columns {
position: relative;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
float: left; }
.medium-1 { width: 8.33333%; }
.medium-2 {width: 16.66667%; }
...
}
// ...etc with -large columns
You can write your own grid in just a few lines. First decide how many columns you like and that create something like below which is a 4 column grid:
.col-1, .col-2, col-3, .col-4 {
float: left;
/* So that empty columns don't collapse */
min-height: 1px;
padding: 0 16px;
/* Change tje box-model to set columns size in pixels */
webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.col-1 { width: 25%; }
.col-2 { width: 50%; }
.col-3 { width: 75%; }
.col-4 { width: 100%; }
This is mostly what you need. I might want to wrap your columns and to clear the floats using the clearfix trick. If you like, I have a standalone grid system called Fluidable that just just this and a bit more.