I would like to know how I can make the <aside> height the same height as body, even if it scrolls. The last try I did the body is always full height but the aside not. Please help me :)
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
height: auto;
}
aside.sidebar {
position: relative;
bottom: 0;
left: 0;
float: left;
width: 20%;
height: 100%;
}
aside.sidebar ul {
width: 100%;
height: 100%;
}
<aside class="sidebar">
<ul>
<li>tag 1</li>
<li>tag 2</li>
<li>tag 3</li>
<!-- some li tags -->
</ul>
</aside>
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<!-- some content -->
</main>
Use flexbox. All flex items of a flex parent will stretch to match the parent element's height.
body {
margin: 0;
display: flex;
background-color: lightgray;
min-height: 2000px;
}
aside {
width: 20%;
background-color: gold;
}
<aside class="sidebar">
<ul>
<!-- some li tags -->
</ul>
</aside>
<main>
<!-- some content -->
</main>
Instead of height:auto on html and body, set it to 100%
Related
I want realise this page
this is my work
the probleme is i can't superimpose the div who contain the text "LUCETTE" under the div who contain the picture
my code html:
* {
font-size: 16px;
font-family: 'playfair_displayblack';
}
.container {
position: relative;
}
.central {
display: flex;
width: 66vw;
height: 55vh;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 50%);
z-index: 2;
}
.left {
flex: 1;
}
.right {
flex: 2;
background-color: #2b563b;
overflow: hidden;
}
.belle {
max-width: 100%;
max-height: 100%;
display: block;
border: 9px solid whitesmoke;
}
.bas {
display: flex;
flex-direction: row;
}
.pied {
bottom: 100px;
width: 90vw;
height: 30vh;
margin-left: auto;
margin-right: auto;
}
.titre span {
text-align: center;
text-transform: uppercase;
font-size: 16rem;
font-weight: bolder;
font-family: 'playfair_displayitalic';
position: absolute;
bottom: 0;
z-index: -1;
}
<main class="container">
<div class="central">
<div class="left">
<img src="images/chantal.jpg" alt="" class="belle">
</div>
<div class="right">
<section>
<header>
<h1> <span>strategy</span> </h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
</div>
<div class="pied">
<h1 class="titre"> <span>lucette</span> </h1>
</div>
</main>
THANKS .
i'm tryng to superimpose the div who contain the image on top of the div who contain the text "LUCETTE".
but the text "LUCETTE" is on the top of my page .
Try this:
* {
font-size: 16px;
font-family: 'playfair_displayblack';
}
.container {
position: relative;
padding-top: 100px;
height: 100vh;
display: flex;
justify-content: center;
}
.central {
display: flex;
width: 66vw;
height: 55vh;
z-index: 2;
}
.left {
flex: 1;
}
.right {
flex: 2;
background-color: #2b563b;
overflow: hidden;
}
.belle {
max-width: 100%;
max-height: 100%;
display: block;
border: 9px solid whitesmoke;
}
.bas {
display: flex;
flex-direction: row;
}
.pied {
bottom: 100px;
width: 90vw;
height: 30vh;
margin-left: auto;
margin-right: auto;
}
.pied {
font-weight: bolder;
font-family: serif;
position: absolute;
width: 0px;
overflow: visible;
bottom: 35%;
left: 50%;
}
.pied h1 {
position: absolute;
text-align: center;
text-transform: uppercase;
font-size: 16rem;
transform: translate(-50%, 0);
font-family: 'playfair_displayitalic';
top: 0;
left: 50%;
}
<main class="container">
<div class="central">
<div class="left">
<img src="images/chantal.jpg" alt="" class="belle">
</div>
<div class="right">
<section>
<header>
<h1> <span>strategy</span> </h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
</div>
<div class="pied"><h1>lucette</h1></div>
</main>
Mind the fact that you might need to tweak the bottom attribute of .pied as I did not have that font.
Main issue in your code was that you didn't set position: absolute for the main container of the text. I did some tweaks to ensure that text is also centered etc.
Using absolute position removes items from the normal flow of the page, and can often lead to isolation and z-index mistakes.
I'm attaching a method using a grid layout to superimpose items. Grids are usually easier to debug.
Just to be clear absolute positions can be used, this is just an alternative.
section {
display: grid;
}
.behind {
height: 5rem;
width: 5rem;
background-color: red;
grid-area: 1 / 1;
}
.front {
height: 3rem;
width: 3rem;
background-color: blue;
/* Can also use grid-area */
grid-column: 1;
grid-row: 1;
}
<section>
<div class="behind"></div>
<div class="front"></div>
</section>
enter image description here
Now the result is better but the problem now i want move the bloc center ho contain the picture and the texte in the the middle on the page but i can 't
I have a div element to show my blog post, each post have to load an image, a title and one paragraph inside it,
because I want to show title element at bottom of image with a simple background-color then I write the markup like this:
<div class="post">
<div class="thumb">
<img class="image" src="img">
<h3 class="title">title</h3>
</div>
<p class="content">Content</p>
</div>
I put the image and title element inside a div block to place them on each other(title overlap the image) and set thumb position to relative and two child element(image and title) to absolute to achieve the final result, but after that the image and title goes outside of it parent(post element) and overlap the other element above of it in the page.
.post {
.thumb {
position: relative;
.image {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
.title {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(#000, .7);
color: #fff;
padding: .5rem;
}
}
.content {
}
}
I want to know why the parent element lose it's height block space and overlap on other elements.
I read some of the similar questions but non of them answer this.
I know if I just set the title position to absolute and fixed on the bottom of image keep the space of block, or use css grid's to achieve similar things but I want to find the real reason to this problem and how to prevent it?
The complete sample code is on codepen: https://codepen.io/anon/pen/GaMegN?editors=1100#0
.post .thumb {
position: relative;
}
.post .thumb .image {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.post .thumb .title {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: .5rem;
}
<div class="page">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="post">
<div class="thumb">
<img class="image" src="https://picsum.photos/400/200">
<h3 class="title">just a sample title</h3>
</div>
<p class="content">
CSS output is just like HTML, only there is no special formats you need to worry about. Just add the CSS you want to output (using newlines as needed) and it will output that way.
</p>
</div>
</div>
The thumb wont have a height because elements with position: absolute; does not take up relative space in it.
I would suggest to remove the position: absolute; on the image, that would give the thumb width and height, but keep absolute on the title
.post .thumb {
position: relative;
}
.post .thumb .image {
display: block;
max-width: 100%;
max-height: 100%;
}
.post .thumb .title {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: .5rem;
margin: 0;
}
<div class="post">
<div class="thumb">
<img class="image" src="https://picsum.photos/400/200">
<h3 class="title">title</h3>
</div>
<p class="content">Content</p>
</div>
Absolute positioned elements step out of the regular flow. The parent elements (position: relative) now don't know anything about the size of their child. For them it is just like the child has display: none. I won't affect their own size in any way.
How can you prevent this? There may be many ways.
Don't use absolute on every element: Here I set the .title to relative so that I can control the z-index. I needed the overflow: hidden on .thumb. I added some margins on .title so I can see more of the image
.post .thumb {
position: relative;
/* new */
overflow: hidden;
margin-top: 20px;
}
.post .thumb .image {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.post .thumb .title {
display: block;
/* position: absolute; */
/* bottom: 0; */
/* left: 0; */
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: .5rem;
/* new */
position: relative;
z-index: 1;
margin-bottom: 20px;
margin-top: 60px;
}
<div class="page">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="post">
<div class="thumb">
<img class="image" src="https://picsum.photos/id/990/400/200">
<h3 class="title">just a sample title</h3>
</div>
<p class="content">
CSS output is just like HTML, only there is no special formats you need to worry about. Just add the CSS you want to output (using newlines as needed) and it will output that way.
</p>
</div>
</div>
Or use a background-image instead of an <img> element
.post .thumb {
position: relative;
overflow: hidden;
margin-top: 20px;
background-repeat: no-repeat;
background-size: cover;
background-position: center 40%;
}
.post .thumb .title {
display: block;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: .5rem;
position: relative;
z-index: 1;
margin-bottom: 20px;
margin-top: 60px;
}
<div class="page">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="post">
<div class="thumb" style="background-image: url(https://picsum.photos/id/990/400/200)">
<h3 class="title">just a sample title</h3>
</div>
<p class="content">
CSS output is just like HTML, only there is no special formats you need to worry about. Just add the CSS you want to output (using newlines as needed) and it will output that way.
</p>
</div>
</div>
Change the position of the image and the title to relative and just add a top:-100px (or whatever) to your title
When you set any element to absolute they are taken out of normal document flow and thus other elements position themselves as the targeted absolute element does not exist.
*{
box-sizing:border-box;
}
.post .thumb {
position: relative;
}
.post .thumb .image {
display: block;
width: 100%;
}
.post .thumb .title {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: .5rem;
margin:0;
}
<div class="page">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="post">
<div class="thumb">
<img class="image" src="https://picsum.photos/400/200">
<h3 class="title">just a sample title</h3>
</div>
<p class="content">
CSS output is just like HTML, only there is no special formats you need to worry about. Just add the CSS you want to output (using newlines as needed) and it will output that way.
</p>
</div>
</div>
A variation of this question has been asked many times, but I cannot seem to find any solution for this particular problem. I have a <div> container element with content that has a variable height depending on the elements inside of it. I want a section of the container to always appear at the bottom of the container div, even when the user scrolls the content, they should always see the section at the bottom of the container. I would prefer not to use position: fixed because that is relative to the browser size, not the div, and when I use position: absolute I can suffessfully get it on the bottom of my container div, but once I start scrolling, it does not act like a "fixed" element, and scrolls with the content.
Is this possible to achieve this with pure CSS?
Here is my current code:
html, body, .container {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.header {
background-color: red;
flex: 0 0 auto;
padding: 1em;
}
.content {
flex: 1 1 auto;
overflow-y: auto;
position: relative;
}
.content > p {
margin: 1em;
}
.bottom-section {
background: skyblue;
bottom: 0;
height: 50px;
padding-top: 1em;
position: absolute;
width: 100%;
}
.footer {
background-color: red;
flex: 0 0 auto;
padding: .5em;
}
<div class="header">HEADER</div>
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="bottom-section">STAYS ON BOTTOM OF CONTENT</div>
</div>
</div>
<div class="footer">FOOTER</div>
Thanks!
The easiest way to accomplish this is to keep the "fixed" element outside the scrolling element, and use positioning based on the container to overlay the fixed element atop the scrolling one.
The only changes here were to move .bottom-section outside of .content, and setting position:relative on .container:
html,
body,
.container {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.container {
position: relative
}
.header {
background-color: red;
flex: 0 0 auto;
padding: 1em;
}
.content {
flex: 1 1 auto;
overflow-y: auto;
}
.content>p {
margin: 1em;
}
.bottom-section {
background: skyblue;
bottom: 0;
height: 50px;
padding-top: 1em;
position: absolute;
width: 100%;
}
.footer {
background-color: red;
flex: 0 0 auto;
padding: .5em;
}
<div class="header">HEADER</div>
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="bottom-section">STAYS ON BOTTOM OF CONTENT</div>
</div>
<div class="footer">FOOTER</div>
This might help, change those two classes as in snippet bellow, comment overflow: hidden in html, body, .container.
.bottom-section {
background: skyblue;
bottom: 0;
height: 50px;
padding-top: 1em;
position: absolute;
width: 100%;
}
.footer {
background-color: red;
flex: 0 0 auto;
padding: .5em;
}
html, body, .container {
display: flex;
flex-direction: column;
height: 100%;
/* overflow: hidden;*/
}
.header {
background-color: red;
flex: 0 0 auto;
padding: 1em;
}
.content {
flex: 1 1 auto;
overflow-y: auto;
position: relative;
}
.content > p {
margin: 1em;
}
.bottom-section {
background: skyblue;
bottom: 33px;
height: 50px;
padding-top: 1em;
position: fixed;
z-index: 1;
width: 100%;
}
.footer {
background-color: red;
flex: 0 0 auto;
padding: .5em;
bottom: 0;
position: fixed;
width: 100%;
}
<div class="header">HEADER</div>
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="bottom-section">STAYS ON BOTTOM OF CONTENT</div>
</div>
</div>
<div class="footer">FOOTER</div>
I'm trying to make a div sticky positioned relative to the viewport so it sticks to the top when it gets scrolled out of view but it isn't working.
#navigation {
display: flex;
background-color: #AA1111;
width: 100%;
height: 50px;
z-index: 10;
position: sticky;
position: -webkit-sticky;
top: 0;
}
header {
height: auto;
display: flex;
}
<body>
<div class="page">
<header>
<div id="navigation">
</div>
</header>
</div>
</body>
Sticky will stick to the top while the parent element is still visible. With that said, your parent element (header) only contains the sticky element, thus will scroll out of view as the navigation would normally. If you had another element inside of the header that had some height, the navigation would stick to the top until that scrolls out of view too.
https://jsfiddle.net/1zbnr2ho/
Like others have said, sticky doesn't have great browser support, and maybe what you're looking for could just be accomplished with position: fixed?
#navigation {
display: flex;
background-color: #AA1111;
width: 100%;
height: 50px;
z-index: 10;
position: sticky;
position: -webkit-sticky;
top: 0;
}
body {
min-height: 5000px;
}
.other {
height: 500px;
background: blue;
}
<div class="page">
<header>
<div id="navigation"></div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
</header>
</div>
I'm trying to do a full-width split background colour with a centered content area. However, the content does not line up and is always off when the screen is resized.
The max-width is 1200px of the centered content area, the parent divs are split 60%/40%. When you do the math it's 720px/480px and should match the above div.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.site-content {
clear: both;
max-width: 1200px;
margin: 0 auto;
padding: 32px 0;
position: relative;
}
.site-content,
.left_container >div,
.right_container>div {
border: 1px solid #000;
}
.left_container,
.right_container {
padding-bottom: 100%;
margin-bottom: -100%;
/*Fixes float height*/
}
.left_container >div,
.right_container>div {
position: relative;
}
.left_container {
float: left;
width: 60%;
background-color: #ced7db;
}
.left_container > div {
float: right;
max-width: 720px;
}
.right_container {
background-color: #999;
float: right;
width: 40%;
}
.right_container > div {
max-width: 480px;
}
<header>
<div class="site-content">
<h1>Heading<h2>
</div>
</header>
<div id="introduction" >
<div class="left_container">
<div>
<h2>Left</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="right_container">
<div>
<h2>Right</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
The desired outcome of this would be to have the heading area and content area aligned on the left and right edge, while the backgrounds extend to the end of the browser. I have tried using the gradient background method, the percentage width is still thrown off.
I wasn't able to do exactly what I wanted So I settled for the parent background gradient method. Example here:
CSS: Set a background color which is 50% of the width of the window