I want container 2 to always be located below container 1 but outside of the "background" div. I can do this with a wide screen but when the screen narrows. container2 floats on top of container1. How do I keep container2 below?
css container1 and container2 both have the css values from twitter's bootstrap "container" class. I just added the 1 and 2 to help explain what I needed.
<div class="Background">
<div class="container1">
<div class="row ">
<h1></h1>
</div>
<div class="row ">
<div>
</div>
</div>
</div>
</div>
<div class="container2">
</div>
CSS
.Background{
height: 250px;
color: #cccccc;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
If you want a different layout on different screens you should use a media query:
You could use absolute positioning on a smaller screen to pull the second container over the first. You should surround them both in a div with position:relative applied
#media (max-width: 600px) {
.container2 {
position: absolute;
top: 0;
left: 0;
}
I don't know how it can affect other elements in markup but you can try :
.Background,.container2{
display :block // or inline-block with clearing floats
}
Also consider that .container is suggested the outer-most element in bootstrap grid so you can either set background to absolute (to take it out of the flow) or put it inside container1.
Related
I'm planning to create a layout where one of the DIV is fixed using Bootstrap. However, the DIV is creating an undesirable effect.
JSFIDDLE: http://jsfiddle.net/cstoq3ec/
Here's the HTML
<div class="container">
<div class="row">
<div class="col-6">
<div class="simple">
This is just a plain block
</div>
</div>
<div class="col-6">
<div class="simple">
This is just a plain block
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="fixed">
hey
</div>
</div>
<div class="col-6">
<p class="scroll">
This is the scrollable section.
</p>
</div>
</div>
</div>
CSS:
.fixed {
position: fixed;
width: 100%;
background-color: red;
color: #fff;
box-sizing: border-box;
}
.scroll {
height: 1000px;
background-color: grey;
color: #fff;
}
.simple {
background-color: grey;
color: #fff;
margin: 15px 0;
}
Notice how the red color DIV is extended all the way to the right side! I want it to stay within its DIV. How should I proceed?
You can't. that's why you have position:absolute.
Once you use position:fixed on an element you get it completely out of the HTML flow so it does not matter what their parents are and their size. You used width:100%so it's 100% of window width.
Is you wonder why, then, it is affected by parent padding (left and top margin), it is because you haven't set any "left, top, bottom or right value" and modern browsers automatically set the values based on the parent. use your own value to check as you can see here: FIDDLE
.fixed {
position: fixed;
width: 100%;
background-color: red;
color: #fff;
box-sizing: border-box;
top:0;
left:0;
}
which, btw, in my opinion you should never rely on as You may have unexpected problems in some browsers. Once you use absolute or fixed position is highly recomend to set at least "top and left values".
If You need the fixed element same width as Your parent I would use javascript / Jquery so you calculate the width of the parent and then use the value to your fixed element.
I have an absolute positioned div inside a Bootstrap column (relative positioned) neither the absolute div or the column have a defined height. However the column div has a min-height of 400px.
html
<section class="row row-eq-height">
<div class="col-sm-6">
<div class="section-content">
... content ...
</div>
</div>
<div class="col-sm-6 section-img">
... full cover image ...
</div>
</div>
css
#media screen and (max-width: 768px) {
.section-content { position: absolute; }
.section-img { min-height: 400px; }
.row-eq-height {
position: relative;
min-height: 400px;
}
When the screen in 768px the .section-content div goes on-top on the .section-img div. The height of the column is generated by the min-height put on the .section-img.
I'm trying to vertically center the .section-content inside the column/.section-img.
//////
You don't have to use tables. And if I understand you correctly, as Rob stated, create an inner wrapper and set the display property for the parent container to table and inner wrapper to table-cell with vertical-align: middle;
<div class="col-sm-6 section-img">
<div class="middle">... full cover image ...</div>
</div>
Here's the CSS
.section-img {
min-height: 400px;
display: table;
}
.middle {
display: table-cell;
vertical-align: middle;
}
I'm trying to work out how to achieve the following in Bootstrap 3:
I have a HTML page which is primarily based around bootstrap's fixed container grid.
Half way down the page I want a row with columns of different sizes.
I want the content (text / images) inside these columns to line up with the content inside the columns in the fixed container grid.
I want the background colours of the left and right furthest columns to bleed right to the edge of the page.
It may help if I illustrate what I'm trying to achieve:
Any help would be greatly appreciated!
Update: as requested here's some code examples of what I currently have: http://www.bootply.com/ZzOefJGRRq As you can see the text and columns in the fluid container are not lining up correctly.
Bootstrap 4
Use position absolute before or after elements with width: 50vw
Codepen
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
...
</div>
</div>
<div class="row">
<div class="col-lg-6 c-col-bg--red">
...
</div>
<div class="col-lg-6 c-col-bg--blue">
...
</div>
</div>
</div>
CSS
.container-fluid {
max-width: 1000px;
}
#media (min-width: 992px) {
div[class*="c-col-bg"] {
position: relative;
}
div[class*="c-col-bg"]:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
width: 50vw;
}
.c-col-bg--red:after {
right: 0;
background: red;
}
.c-col-bg--blue:after {
left: 0;
background: blue;
}
}
You can use :before elements and some classes
https://jsfiddle.net/ex3ntia/wa8myL9v/2/
.bg:before {position:absolute;left:0em; content:'';height:100%;width:800em;z-index:-1}
UPDATE
added media query for small devices
https://jsfiddle.net/ex3ntia/wa8myL9v/3/
UPDATE 2
I have added the following line to fix the big horizontal scroll on chrome browsers.
body, html {overflow-x: hidden;margin: 0;padding: 0;}
TLDR; no framework has this out of the box, because covering all possible use cases is both very complex and would result in a huge amount of code.
It is doable but requires some amount of manual coding. The approach below works for 2 columns. More columns and breakpoints will require a more complex solution.
Sample markup:
<div class="container">
<div class="row">
<div class="col-5">default column</div>
<div class="col-7">default column</div>
</div>
</div>
<div class="container container--fluid">
<div class="row">
<div class="col-5">fluid column, aligned with above</div>
<div class="col-7">fluid column, aligned with above</div>
</div>
</div>
<div class="container container--bleed">
<div class="row">
<div class="col-5">
<div class="content">like fluid, but content is aligned with default</div>
</div>
<div class="col-7">
<div class="content">like fluid, but content is aligned with default</div>
</div>
</div>
</div>
scss for brevity
// assuming you have these values or able to set them
$max-width: 1140px;
$gutter: 8px;
$grid: 12;
$customColumns: [5, 7]; // columns you want to align
// sample grid
.container {
max-width: $max-width;
margin: 0 auto;
padding-left: $gutter;
padding-right: $gutter;
}
.row {
display: flex;
margin-left: -$gutter;
margin-right: -$gutter;
}
div[class^='col'] {
max-width: 100%;
padding-left: $gutter;
padding-right: $gutter;
position: relative;
}
#for $i from 1 through $grid {
.col-#{$i} {
width: calc(100% * #{$i} / #{$grid});
}
}
.container--bleed, .container--fluid {
max-width: none;
}
// custom grid rules for alignment
#media(min-width: #{$max-width}) {
#each $i in $customColumns {
.container--bleed, .container--fluid {
.col-#{$i}:first-child, .col-#{$i}:last-child {
width: calc(#{$max-width * $i / $grid} + ((100% - #{$max-width}) / 2));
}
}
.container--bleed {
.col-#{$i}:first-child {
padding-left: calc((100% - #{$max-width}) / 2 + #{$gutter});
}
.col-#{$i}:last-child {
padding-right: calc((100% - #{$max-width}) / 2 + #{$gutter});
}
}
}
}
I created a codepen POC for a similar layout here: https://codepen.io/bariscc/pen/BajKpMP
You can implement the container-fluid to achieve this.
Basically your webpage will have the following structure:
<div class="container">
<p>Content here</p>
</div>
<div class="container-fluid">
<p>"Bleeded" content here</p>
</div>
<div class="container">
<p>And it continues with the fixed width!</p>
</div>
If you need to adjust the spaces between those containers, you can add your own classes or ID:s to each and kind of take it from there. Since containers in Bootstrap don't have much of a default styling, this is very efficient way of creating what you're looking to do in here.
EDIT: After inspecting the comments section and looking at the code you provided, I assume you want to have the fluid container, but keep the contents within it lined up with the fixed container, right?
For this, you can just put another <div class="container">...</div> in your container-fluid. Check the updated fiddle.
Where you have the special row, you need a div with container-fluid class encapsulating a div with container class (this is a fixed width class).
Then you need to account for the background colours either side. Either add additional divs within container-fluid each side of container and set background colour, or perhaps use a three column table.
I want to setup the following using float.
Everything worked out fine except the nav div is not full height.
Screenshot : http://postimg.org/image/gywuh9lv1/
HTML :
<div class='container'>
<div class='left'>NAV PANEL FULL HEIGHT, ADJUST TO AMOUNTS OF PRODUCTS</div>
<div class='right'>
<div class='product'>PRODUCTS</div>
<div class='product'>PRODUCTS</div>
<div class='product'>PRODUCTS</div>
<div class='product'>PRODUCTS</div>
<div class='product'>PRODUCTS</div>
<div class='product'>PRODUCTS</div>
<div class='product'>PRODUCTS</div>
<div class='product'>PRODUCTS</div>
<div class='product'>PRODUCTS</div>
</div>
</div>
CSS :
float: left;
Just for info :
min-height:100%; NOT working.
For example : height:500px; is working but this is not dynamic, if my page has more content then it already fails.
Do something like this:
CSS
.container {
position: relative;
}
.right {
padding-left: 220px; /* Your left-nav width + padding here */
}
.left {
position: absolute;
top: 0; /* Or a px value if there's supposed to be a margin between this and the container. */
bottom: 0; /* Same as above */
width: 200px; /* Or however big you want to make it. */
}
This solution will actually force your left nav to grow with the container, instead of just making it look that way. It's also backwards compatible to most browsers and doesn't have any of the caveats that come with display: table;.
height:100% will only work if your html & body are height:100% too ;
Here is Codepen an example
What is the best/proper way to vertically align the text in the middle of its column? The image height is statically set in the CSS.
I have tried setting an outer div to display: table and an inner div to display: table-cell with vertical-align: middle but that didn't work either.
HTML
<section id="browse" class="browse">
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-5">
<h2 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h2>
</div>
<div class="col-md-1"></div>
<div class="col-md-6 col-sm-7 animation_container">
<img id="animation_img2" class="animation_img animation_img2" src="images/section2img2.png"/>
<img id="animation_img1" class="animation_img animation_img1" src="images/section2img1.png"/>
</div>
</div>
</div>
</section>
CSS
.browse .container, .blind_dating .container { padding-bottom: 0; }
.animation_container { position: relative; }
.browse .animation_container { height: 430px; }
.animation_img { position: absolute; bottom: 0; }
.animation_img1 { right: 25%; }
.animation_img2 { right: 25%; }
HTML:
First, we will need to add a class to your text container so that we can access and style it accordingly.
<div class="col-xs-5 textContainer">
<h3 class="text-left">Link up with other gamers all over the world who share the same tastes in games.</h3>
</div>
CSS:
Next, we will apply the following styles to align it vertically, according to the size of the image div next to it.
.textContainer {
height: 345px;
line-height: 340px;
}
.textContainer h3 {
vertical-align: middle;
display: inline-block;
}
All Done! Adjust the line-height and height on the styles above if you believe that it is still slightly out of align.
WORKING EXAMPLE
h2.text-left{
position:relative;
top:50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
Explanation:
The top:50% style essentially pushes the header element down 50% from the top of the parent element. The translateY stylings also act in a similar manner by moving then element down 50% from the top.
Please note that this works well for headers with 1 (maybe 2) lines of text as this simply moves the top of the header element down 50% and then the rest of the content fills in below that, which means that with multiple lines of text it would appear to be slightly below vertically aligned.
A possible fix for multiple lines would be to use a percentage slightly less than 50%.
Could you not have simply added:
align-items:center;
to a new class in your row div. Essentially:
<div class="row align_center">
.align_center { align-items:center; }