I am currently building a wordpress site, where I need a 100% width background (css color, no image) for a div. My div is inside a container and I can't modify the html. So, I was wondering if there was any way with css to do this. I have already tried the padding+margin hack, but it didn't work.
HTML:
<div class="container">
<div class="row-fluid">
<div class="main span12">
<div class="row-fluid blue"> <!--this is the div that needs the background-->
<div class="span4">some content</div>
<div class="span4">some content</div>
<div class="span4">some content</div>
</div>
<div class="row-fluid">
<div class="span12"> some other content, doesn't need the background</div>
</div>
</div>
</div>
</div>
Any help is much appreciated. I tried this one : http://www.sitepoint.com/css-extend-full-width-bars/ but it didn't work.
Based on this article from CSS Tricks (Full Width Browser Bars ).
HTML
<div class="container">
<div class="level"></div>
<div class="level purple"></div>
<div class="level"></div>
</div>
CSS
html, body {
overflow-x: hidden;
}
.container {
width:960px;
margin: 0 auto;
border:1px solid black;
}
.level {
height:100px;
background: #bada55;
}
.purple {
position: relative;
background: #663399;
}
.purple:before,
.purple:after {
content: "";
position: absolute;
background: #663399; /* Match the background */
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
}
.purple:before {
right: 100%;
}
.purple:after {
left: 100%;
}
Codepen Demo
Support should be IE8 & up
Related
I found a post here where the same question was asked before. I implemented the solution suggested there and it works fine with Chrome and Firefox. But when I tested it on Safari and Opera, I ended up with a long horizontal scrollbar. I'm not sure how to fix it since I've already added using overflow-x: hidden to the body. You can see it in action here.
HTML
<div class="container">
<div class="level"></div>
<div class="level purple"></div>
<div class="level"></div>
</div>
CSS
html, body {
overflow-x: hidden;
}
.container {
width:960px;
margin: 0 auto;
border:1px solid black;
}
.level {
height:100px;
background: #bada55;
}
.purple {
position: relative;
background: #663399;
}
.purple:before,
.purple:after {
content: "";
position: absolute;
background: #663399; /* Match the background */
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
}
.purple:before {
right: 100%;
}
.purple:after {
left: 100%;
}
I checked in the link(www.kampuster.com) you shared and found the problem with your code.
Problem:
In file all/themes/bootstrap_kampuster/css/style.css, you have provided width: 9999px; for classes .homeBanner:before, .homeBanner:after and .countUpSection:before, .countUpSection:after which is causing the whole problem and is not the right way to do it.
Suggestion:
Below is the approach I would suggest you to go with.
Here is a pen to better illustrate the suggestion.
.section-first, .section-third {
background-image: url('http://www.kampuster.com/sites/default/files/bannerlogo_babson.jpeg');
background-attachment: fixed;
background-size: cover;
}
.section-first-inner {
background-color: rgba(83, 192, 183, 0.3);
}
.section-first, .section-second, .section-third {
/* this is just to add height inplace of content */
height: 600px;
color: #ffffff;
overflow: hidden;
}
.section-first-inner, .section-second-inner, .section-third-inner {
padding: 20px 20px;
font-size: 18px;
height: 100%;
}
.section-second {
color: #000;
}
<link href="http://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML</title>
</head>
<body>
<div class="main-container">
<header id="page-header"></header>
<div class="section-first">
<div class="section-first-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">
Your content for section first goes here
</div>
</div>
</div>
</div>
</div>
<div class="section-second">
<div class="section-second-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">
Your content for section second goes here
</div>
</div>
</div>
</div>
</div>
<div class="section-third">
<div class="section-third-inner">
<div class="container">
<div class="row">
<div class="col-sm-12">Your content for section third goes here</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Instead of setting width:960px; on the container try setting view width: width: 100vw;
So the container css will be:
.container {
width: 100vw;
margin: 0 auto;
border:1px solid black;
}
just use .container-fluid class.
<div class="container-fluid" style="background-image:url('xample.jpg')">
<div class="row">
<div class="col-sm-12">
<div class="container">
<div class="row">
<div class="col-sm-12">
your content here
</div>
</div>
</div>
</div>
</div>
Full width background inside Bootstrap container!!
If this is what you want (Example Demo)
Then simply use Relative Lengths :
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
I have only replaced 2 values in your code:
.container {
width:100vw;
}
.purple:after {
width: 100vw; /* some huge width */
}
Code:
<!-- Latest compiled and minified CSS -->
<
link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- jQuery library -->
<
script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < /script>
<!-- Latest compiled JavaScript -->
<
script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > < /script>
html,
body {
overflow-x: hidden;
}
.container {
width: 100vw;
margin: 0 auto;
border: 1px solid black;
}
.level {
height: 100vh;
background: #bada55;
}
.purple {
position: relative;
background: #663399;
}
.purple:before,
.purple:after {
content: "";
position: absolute;
background: #663399;
/* Match the background */
top: 0;
bottom: 0;
width: 100vw;
/* some huge width */
}
.purple:before {
right: 100%;
}
.purple:after {
left: 100%;
}
<div class="container">
<div class="level"></div>
<div class="level purple"></div>
<div class="level"></div>
</div>
Please try this, this is working for me.
add the below css, if doesn't work try adding important to them. And to get full width of container, add container-fluid class to particular container.
html, body {
width: -webkit-fill-available;
overflow-x: hidden;
}
How can I align div element at the bottom of parent element while using bootstrap col?
.wrapper {
background-color: green;
height: 200px;
}
.bottom {
position: relative;
}
.bottom-div {
height: 200px;
position: absolute;
bottom: 0;
}
<div class="wrapper">
<div class="col-md-3 bottom">
<div class="bottom-div"> TEST1 </div>
</div>
<div class="col-md-6">
TEST2
</div>
<div class="col-md-3">
TEST3
</div>
</div>
bottom div element does not align at bottom. What is correct way of doing this? Thanks.
UPDATE: Div element runs out of wrapper (it basically moves up)
Not sure exactly what you're trying to do, as #CBroe said flexbox would be the best way but try this:-
/* CSS used here will be applied after bootstrap.css */
.wrapper{
background-color:green;
height: 200px;
position: relative;
}
.bottom-div{
height: 50px;
width: 50px;
position: absolute;
bottom:0;
left: 0;
background-color: red;
}
.testclass {
height: 100%;
}
<div class="wrapper">
<div class="col-md-3 testclass">
<div class="bottom-div"> TEST1 </div>
</div>
<div class="col-md-6">
TEST2
</div>
<div class="col-md-3">
TEST3
</div>
</div>
I am just trying to create a basic website using Material Design Light that responds to the size of the screen and I am having trouble making the grid fill all of the available height. I have tried to look for solutions to this problem online but I cant find any that work.
Here is the source code for one the grids I will use:
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
</div>
</main>
Here is a link to the full Html page: Example MDL Page
Here is an image of the problem: Page Example
I'm assuming that your page height is the view height, which you can only use w/ modern browsers. See view height
Basically what we're doing here is we already know how high our footer and header are going to be (in the fiddle i just set it to 50px each). Then we use the calc CSS property to set the view height (vh) to 100% - 100px (meaning the footer and header's height put together (50+50 = 100)
Check the fiddle
<div id="main-body">
<div class="header"></div>
<div class="content clearfix">
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
</div>
<div class="footer"></div>
</div>
* {
box-sizing: border-box; /* add for browser prefixes */
}
#main-body {
height: 100%;
overflow: hidden;
}
.header, .footer {
background-color: blue;
height: 50px;
}
.content .a {
height: calc(100vh - 100px);
background-color: red;
width: 25%;
float: left;
}
.clearfix:after {
content: "";
clear:both;
display:table;
}
Note that you'll also need the viewport meta tag in your <head> for this to work.
<meta name="viewport" content="width=device-width, initial-scale=1">
OP added the he would like the ability to center the text within these content divs
<div id="main-body">
<div class="header"></div>
<div class="content clearfix">
<div class="a"><p>1</p></div>
<div class="a"><p>2</p></div>
<div class="a"><p>3</p></div>
<div class="a"><p>4</p></div>
</div>
<div class="footer"></div>
</div>
#main-body {
height: 100%;
overflow: hidden;
}
.header, .footer {
background-color: blue;
height: 50px;
}
.content .a {
height: calc(100vh - 100px);
background-color: red;
width: 25%;
float: left;
position: relative;
}
.content .a p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
.clearfix:after {
content: "";
clear:both;
display:table;
}
Th way I did it was to over-ride a couple of the mdl styles, notably to make main display as flex rather than inline-block. It would probably make sense to add an Id to restrict the impact of this override across the rest of your site
.mdl-layout__content {
display: flex;
flex-direction: column;
.mdl-grid {
width: 100%;
flex-grow: 2;
}
}
Try to fool around with the CSS height attribute. Like so:
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray; height:100%;">size 4</div>
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray; height:100%;">size 4</div>
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray; height:100%;">size 4</div>
More information here: http://www.w3schools.com/cssref/pr_dim_height.asp
Is there a way to extend a backround to the left or right out of a grid? for example if i wanted to do a 100% background with a grid in place i would do something like:
<div class="100%BACKGROUND">
<div class="row>
<div class="large-12 columns>
</div>
</div>
</div>
Which works perfectly but what if i wanted to extend a background color outside of the grid to the side of the page and by this i mean for example
<div class="row>
<div class="large-8 columns">
</div>
<div class="BACKGROUNDSTART"> <-- background start
<div class="large-4 columns">
</div>
</div>
</div> <-- background end
Now this doesn't work obviously but this is the kind of thing i am trying to achieve heres a mockup of how it would look.
This can be achieved with a pseufo-element as follows:
Codepen Demo
Basic HTML structure
<div class="container">
<div class="level"></div>
<div class="level">
<div class="split"></div>
<div class="split purple"></div> /* div to be extended */
</div>
<div class="level"></div>
</div>
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
overflow-x: hidden;
}
.container {
width:960px;
margin: 0 auto;
}
.level {
height:100px;
background: #bada55;
clear:both;
border:1px solid black;
}
.split {
width:50%;
height:100%;
float:left;
}
.purple {
position: relative;
background: #663399;
opacity:0.5; /* just for visibility of effect */
}
.purple:after {
content: "";
position: absolute;
background: #663399; /* Match the background */
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
}
.purple:after {
left: 100%;
}
I'm redesigning a site and the different sections (header, banner image, main, etc.) have a background that stretches all the way across, however the content is contained to a certain width and that box is centered.
However, in the design the "banner image" (which is a image below the header but above the main content) will extend beyond the width of the rest of the content. At first this was easy until a need arose to have text on top of the banner image, and that text would need to line up with the rest of the text.
I cannot use CSS background image because on some pages the banner image area will be a slider, which requires tags.
I have a working solution, but it seems clunky and I was hoping to find a better method: http://jsfiddle.net/PkStg/10/
HTML:
<div class="header">
<div class="content-wrapper">
header text
</div>
</div>
<div class="banner">
<div class="content-wrapper">
<div class="banner-text-outer">
<div class="banner-text-inner">
<h2>banner text header</h2>
<p>banner text paragraph</p>
</div>
</div>
</div>
<div class="banner-image-wrapper">
<img src="http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg" />
</div>
</div>
<div class="main-content">
<div class="content-wrapper">
main content text
</div>
</div>
CSS:
.header, .banner, .main-content { width: 100%; }
.header { background: red;}
.banner { background: green; }
.main-content { background: yellow; }
.content-wrapper {
margin: 0 auto;
max-width: 300px;
}
.banner-text-outer {
position: relative;
}
.banner-text-inner {
position: absolute;
top: 10px;
}
.banner-image-wrapper {
margin: 0 auto;
max-width: 400px;
min-width: 300px;
font-size: 0;
}
.banner-image-wrapper img {
width: 100%;
}
I know that you wanted to not use background-image, but here is a solution which uses that for anyone else who sees the page.
Perhaps your slider could make use of the background-image?
This should do it:
jsFiddle
HTML
<body>
<div class="header">
<div class="content-wrapper">
header text
</div>
</div>
<div class="banner">
<div class="content-wrapper">
<div class="banner-text-outer">
<div class="banner-text-inner">
<h2>banner text header</h2>
<p>banner text paragraph</p>
</div>
</div>
</div>
</div>
<div class="main-content">
<div class="content-wrapper">
main content text
</div>
</div>
</body>
CSS
.header, .banner, .main-content { width: 100%; }
.header { background: red;}
.banner { background: green; }
.main-content { background: yellow; }
.content-wrapper {
margin: 0 auto;
max-width: 300px;
}
.banner {
background: green url("http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg") no-repeat;
background-size: contain;
background-position: center;
min-height: 150px;
}