I have a requirement where I have to create 2 fixed width panels, one on right and one on left and I have to keep the center component responsive according to bootstrap classes.
I did something like this
Styles file
.c-row {
max-width: 100%;
margin: 0 auto;
}
.c-row .c-col-left {
width: 260px;
}
.c-row [class^='c-'] {
float: left;
height: 90vh;
background-color: white;
}
.c-row .c-col-center {
background-color: #e6e7fb;
width: calc(100% - (260px + 350px));
}
.c-row .c-col-right {
width: 350px;
}
Markup
<div class="c-row">
<div class="c-left">content</div>
<div class="c-center">
<div class="row">
<div class="col-md-6">c1</div>
<div class="col-md-6">c2</div>
</div>
</div>
<div class="c-right">content</div>
</div>
So my problem here is: The grid inside center class isn't working, it works fine if I remove the style width: calc(100% - (260px + 350px)); from center column.
is there any way I can still make it work without changing the custom grid outside?
Use flexbox which is integral to Bootstrap 4
.c-row {
max-width: 100%;
margin: 0 auto;
display: flex;
}
.c-row .c-left {
flex: 0 0 260px;
background: pink;
}
.c-row [class^='c-'] {
height: 90vh;
}
.c-row .c-center {
background-color: #e6e7fb;
flex: 1;
}
.c-row .c-right {
flex: 0 0 350px;
background: lightblue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="c-row">
<div class="c-left">content</div>
<div class="c-center">
<div class="row">
<div class="col-md-6">c1</div>
<div class="col-md-6">c2</div>
</div>
</div>
<div class="c-right">content</div>
</div>
Codepen Demo
You can do it without custom flexbox use but only with the Bootstrap grid.
.col,
[class*="col-"] {
min-height: 90vh !important;
}
.c-left {
width: 260px !important;
background: lightpink;
}
.c-center-1 {
background-color: lightcoral;
}
.c-center-2 {
background-color: lightskyblue;
}
.c-right {
width: 350px !important;
background: lightblue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="c-row row flex-nowrap">
<div class="col-auto c-left">content</div>
<div class="col c-center">
<div class="row">
<div class="col-md-6 c-center-1">c1</div>
<div class="col-md-6 c-center-2">c2</div>
</div>
</div>
<div class="col-auto c-right">content</div>
</div>
</div>
(some !important just because how SO snippets work, see codepen demo)
Codepen Demo
Related
I want the div which displays "D" to appear beneath that one which displays "A" so that divs with matching background colours appear stacked over one another. However, I am getting this:
Where exactly in my CSS code must I clear my float?
#container {
background-color: #333333;
width: 990px;
}
#left {
background-color: red;
width: 300px;
float: left;
}
#splitter {
background-color: green;
width: 90px;
float: left;
}
#right {
background-color: blue;
width: 200px;
float: left;
}
<div id="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div id="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
You have to deal with floats and for this you need to understand what floats and BFC are :
a few ways to do this, that you should understand once you been reading a bit about floats, clearing and Block formating context.
(last example in the snippet below, oldish, even avoids the floats but does the layout)
/* DEMO purpose : Show the id or class being used on that container*/
section:before {
content: attr(id)' 'attr(class);
display: table;
background: #177EE5;
padding: 5px;
margin: 5px;
color: #fff;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
letter-spacing: 1px;
font-variant: small-caps;
}
/* your css turned into class to be valid since used for many tags */
.container {
background-color: #333333;
width: 990px;
}
.left {
background-color: red;
width: 300px;
float: left;
}
.splitter {
background-color: green;
width: 90px;
float: left;
}
.right {
background-color: blue;
width: 200px;
float: left;
}
/* wrapper for each examples */
section {
clear: both;
overflow: hidden;
margin: 1em;
}
/* different ways shown, usefull for testing only if you read about floats and dig a bit */
/* table */
.table .container {
display: table;
}
/* overflow */
.overflow .container {
overflow: hidden;
}
/* float */
.float .container {
float: left;
}
/* flex */
.flex .container {
display: flex;
}
/* inline-block */
.inline-block .container {
display: inline-block;
vertical-align: top;
}
/* last examples without floats */
/*no float & ie8 */
#table div {
float: none
}
#table #first-row,
#table > div {
display: table-row;
}
#table > div > div {
display: table-cell;
}
#table {
background-color: #333333;
width: 990px;
table-layout: fixed;
}
#left {
width: 300px;
}
#splitter {
width: 90px;
}
#right {
width: 200px;
}
#table > div > div {
background-color: red;
}
#table > div > div + div {
background-color: green;
}
#table > div > div + div + div {
background-color: blue;
}
#table:before {
display: table-caption;
width: 100%;
margin: 0;
}
#table > div:after {
content: "Notice there's a gap to fill here since cols do not cover the 990px";
display: table-cell;
}
<section class="your CSS :-: no BFC involved">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="table">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="overflow">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="float">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="flex">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="inline-block">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<p>another way without float including IE8 ?</p>
<section id="table" class="table">
<div id="first-row">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</section>
There could be more examples from the same chunks of code and floatting children.
Clear the floats in the container.
You have 3 simple ways to do that:
1. Float
#container {
clear: both;
}
2. Overflow
#container {
overflow: hidden;
}
3. Micro clearfix hack
Link
Here is what you want done bro..
this one is by using display:inline-block https://jsfiddle.net/p4domjrb/
this one is by using float:left https://jsfiddle.net/p4domjrb/1/
.container {
background-color: #333333;
width: 990px;
display: block;
position: relative;
}
.left {
background-color: red;
width: 300px;
display: inline-block;
margin-left: -4px;
}
.splitter {
background-color: green;
width: 90px;
display: inline-block;
margin-left: -4px;
}
.right {
background-color: blue;
width: 200px;
display: inline-block;
margin-left: -4px;
}
don't use id I suggest use class isntead because idis called only once.
<style>
.container{
background-color: #333333;
width:990px;
display:block;
clear:both;
}
#left{
background-color: red;
width:300px;
float:left;
}
#splitter{
background-color: green;
width:90px;
float:left;
}
#right{
background-color: blue;
width: 200px;
float:left;
}
</style>
<body>
<div class="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div class="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
</body>
result is
I want to have two columns which fills up every time the full page size unattached from the given content.
The problem is that my solutions work until I began to scroll the page.
Example
html,body {
height: 100%;
min-height: 100%;
}
.left-content {
background: red;
}
.right-content {
background: green;
}
.container-fluid {
height: 100%;
}
.row {
height: 100%;
}
[class^="col-"] {
height: 100%;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 left-content">
LEFT COLUMN
</div>
<div class="col-sm-6 right-content">
RIGHT COLUMN
</div>
</div>
</div>
Anyone have a solution for this problem?!
How about adding col-xs-6 that accommodates extra small screens as well:
html,body {
height: 100%;
min-height: 100%;
}
.left-content {
background: red;
}
.right-content {
background: green;
}
.container-fluid {
height: 100%;
}
.row {
height: 100%;
}
[class^="col-"] {
height: 100%;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-6 left-content">
LEFT COLUMN
</div>
<div class="col-md-6 col-xs-6 right-content">
RIGHT COLUMN
</div>
</div>
</div>
I'm building a site that has two section sizes.
The sizes are:
Full screen (height: 100%;)
Half screen (height: 50%;)
See screenshots:
Note the section with three columns (green, pink, blue).
This works before the columns collapse at col-md-4.
Once the columns collapse, they overflow their container (height: 50%) and then theres 3 columns at 50% height (150%) the extra 100% covers up the last section (100%).
How can I get the height to expand if the container overflows?
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #fff4fd;
}
.wrapper {
height: 100%;
width: 100%;
position: relative;
}
.wrapper .content {
height: 100%;
width: 100%;
}
.home {
background-color: red;
background-attachment: fixed;
}
.what-we-do {
background-color: blue;
}
.our-work {
background-color: #93A8FF;
}
.our-ethos {
background-color: yellow;
}
.case-studies .row {
height: 100%;
margin: 0;
}
.case-studies .row > div {
height: 100%;
}
.case-studies .row > div.case-study-1 {
background-color: #D1F3F0;
}
.case-studies .row > div.case-study-2 {
background-color: #FFEBF1;
}
.case-studies .row > div.case-study-3 {
background-color: #D7EEF9;
}
.page.page-full {
height: 100%;
}
.page.page-half {
height: 50%;
}
/*# sourceMappingURL=app.css.map */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="bower_components/modernizr/modernizr.js"></script>
<div class="wrapper">
<div class="content">
<div class="page page-full home"></div>
<div class="page page-half what-we-do"></div>
<div class="page page-half our-work"></div>
<div class="page page-half case-studies">
<div class="row">
<div class="col col-md-4 case-study-1"></div>
<div class="col col-md-4 case-study-2"></div>
<div class="col col-md-4 case-study-3"></div>
</div>
<div class="cleafix"></div>
</div>
<div class="cleafix"></div>
<div class="page page-full our-ethos clearfix"></div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="bower_components/jquery/dist/jquery.min.js"><\/script>')
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
See screenshot:
My page is divided in rows with limited width. (<div class='row'>)
I would like to apply a background (color) to each row, but I would like the back ground not to take into consideration the width limit of the div, is there a way to achieve this ?
Thanks!
Were you going for something like this? It'd be easier to answer your question if you provided a fiddle or atleast some code so we can help you with your problem.
I came to this solution:
<div class="row1">
...
</div>
<div class="row2">
...
</div>
.row1 {
background-color: red;
width: 100%;
height: 50%;
}
.row2 {
background-color: pink;
width: 100%;
height: 50%;
}
You can run it here: JSFiddle
This is possible with a pseudo-element, no need for additional HTML.
.wrapper {
width: 50%;
margin: auto;
}
[class^=row] {
height: 50px;
position: relative;
margin-bottom: 10px;
}
[class^=row]:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
width: 100vw;
background: purple;
z-index: -1;
}
.row1 {
background-color: red;
}
.row2 {
background-color: pink;
}
<div class="wrapper">
<div class="row1">...</div>
<div class="row2">...</div>
</div>
You may be better to place each row inside a .container-fluid div with a {min-width: 100%} and a custom class for the colour you need
.container-fluid {
min-width: 100%
}
.row {
max-width: 300px;
margin: 0 auto;
padding: 10px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="container-fluid red">
<div class="row">
<p>Row Content 1</p>
</div>
</div>
<div class="container-fluid green">
<div class="row">
<p>Row Content 2</p>
</div>
</div>
<div class="container-fluid blue">
<div class="row">
<p>Row Content 3</p>
</div>
</div>
I know this is a rather simple question, but I can't figure it out for the life of me. I have two links which I've applied a background image to. Here's what it currently looks like (apologies for the shadow, just a rough sketch of a button):
However, I want those two buttons to be side by side. I can't really figure out what needs to be done with the alignment.
Here's the HTML
<div id="dB"}>
Download
</div>
<div id="gB">
Gallery
</div>
Here's the CSS
#buyButton {
background: url("assets/buy.png") 0 0 no-repeat;
display:block;
height:80px;
width:232px;
text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}
#galleryButton {
background: url("images/galleryButton.png") 0 0 no-repeat;
display:block;
height:80px;
width:230px;
text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}
Beware float: left… 🤔
…there are many ways to align elements side-by-side.
Below are the most common ways to achieve two elements side-by-side…
Demo: View/edit all the below examples on Codepen
Basic styles for all examples below…
Some basic css styles for parent and child elements in these examples:
.parent {
background: mediumpurple;
padding: 1rem;
}
.child {
border: 1px solid indigo;
padding: 1rem;
}
Using the float solution my have unintended affect on other elements. (Hint: You may need to use a clearfix.)
html
<div class='parent'>
<div class='child float-left-child'>A</div>
<div class='child float-left-child'>B</div>
</div>
css
.float-left-child {
float: left;
}
html
<div class='parent'>
<div class='child inline-block-child'>A</div>
<div class='child inline-block-child'>B</div>
</div>
css
.inline-block-child {
display: inline-block;
}
Note: the space between these two child elements can be removed, by removing the space between the div tags:
html
<div class='parent'>
<div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>
css
.inline-block-child {
display: inline-block;
}
html
<div class='parent flex-parent'>
<div class='child flex-child'>A</div>
<div class='child flex-child'>B</div>
</div>
css
.flex-parent {
display: flex;
}
.flex-child {
flex: 1;
}
html
<div class='parent inline-flex-parent'>
<div class='child'>A</div>
<div class='child'>B</div>
</div>
css
.inline-flex-parent {
display: inline-flex;
}
html
<div class='parent grid-parent'>
<div class='child'>A</div>
<div class='child'>B</div>
</div>
css
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr
}
Apply float:left; to both of your divs should make them stand side by side.
keep it simple
<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>
.section {
display: flex;
}
.element-left {
width: 94%;
}
.element-right {
flex-grow: 1;
}
<div class="section">
<div id="dB" class="element-left" }>
Download
</div>
<div id="gB" class="element-right">
Gallery
</div>
</div>
or
.section {
display: flex;
flex-wrap: wrap;
}
.element-left {
flex: 2;
}
.element-right {
width: 100px;
}
<div class="section">
<div id="dB" class="element-left" }>
Download
</div>
<div id="gB" class="element-right">
Gallery
</div>
</div>