I think it will be best to show what I’d like to achieve on an example:
header {
background-color:blue;
}
<body>
<header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</header>
<main>
Sed ullamcorper ligula sapien, eget congue risus iaculis eget. Etiam nunc diam, hendrerit nec nisi non, tristique feugiat risus. Donec maximus enim lacus, eget iaculis lectus aliquam non. Aenean id egestas justo, vitae placerat nulla. Suspendisse a tempor ipsum. Donec condimentum varius diam. Praesent mollis tincidunt nibh, sit amet euismod lacus mollis et. Nulla in condimentum elit. Quisque eu hendrerit nunc, id auctor risus.
</main>
</body>
As you can see, this blue header is not positioned right next to the screen edge, since the 8px margin that body has applies. I would like header to disregard this margin and main to still have it.
I can see three ways to achieve his:
Giving header position:absolute;
But this leaves no space for the subsequent text:
header {
background-color:blue;
position:absolute;
top:0px;
left:0px;
}
<body>
<header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</header>
<main>
Sed ullamcorper ligula sapien, eget congue risus iaculis eget. Etiam nunc diam, hendrerit nec nisi non, tristique feugiat risus. Donec maximus enim lacus, eget iaculis lectus aliquam non. Aenean id egestas justo, vitae placerat nulla. Suspendisse a tempor ipsum. Donec condimentum varius diam. Praesent mollis tincidunt nibh, sit amet euismod lacus mollis et. Nulla in condimentum elit. Quisque eu hendrerit nunc, id auctor risus.
</main>
</body>
I’d have to manually move main down so that it leaves space for header. But how the heck can I know how much space does header need, especially if the screen is resized and the beginning paragraph wraps?
Give header position:relative; and negate the margin.
That’s a close one:
header {
background-color:blue;
position:relative;
top:-8px;
left:-8px;
margin-right:-16px;
}
<body>
<header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</header>
<main>
Sed ullamcorper ligula sapien, eget congue risus iaculis eget. Etiam nunc diam, hendrerit nec nisi non, tristique feugiat risus. Donec maximus enim lacus, eget iaculis lectus aliquam non. Aenean id egestas justo, vitae placerat nulla. Suspendisse a tempor ipsum. Donec condimentum varius diam. Praesent mollis tincidunt nibh, sit amet euismod lacus mollis et. Nulla in condimentum elit. Quisque eu hendrerit nunc, id auctor risus.
</main>
</body>
But is it in a good style do do something like that? Also, can I be sure that all browsers give body exactly an 8px margin?
Remove the margin of body and manually give it to all subsequent elements.
Probably the closest one:
body {
margin: 0px;
}
header {
background-color:blue;
}
main {
margin: 8px;
}
<body>
<header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</header>
<main>
Sed ullamcorper ligula sapien, eget congue risus iaculis eget. Etiam nunc diam, hendrerit nec nisi non, tristique feugiat risus. Donec maximus enim lacus, eget iaculis lectus aliquam non. Aenean id egestas justo, vitae placerat nulla. Suspendisse a tempor ipsum. Donec condimentum varius diam. Praesent mollis tincidunt nibh, sit amet euismod lacus mollis et. Nulla in condimentum elit. Quisque eu hendrerit nunc, id auctor risus.
</main>
</body>
Any better ways to do this than this?
you can add margin: -8px -8px 0 -8px; to your header element
The last solution is the best according to me because that is the natural way to do that and if you want to give padding to the other contents then you can use a div for that, in most websites you will see all professionals follow that.
If you already know that the margin that body uses is 8px you could try following:
header {
background-color:blue;
margin-left: -8px;
}
Try it here https://jsfiddle.net/h1uhfzv2/3/
Related
can anyone tell me why is my nav bar not following sticky position property.
HERE IS THE LINK TO MY CODE--https://codepen.io/prashant_verma/full/yLMKMQL
Use position: fixed
header {
position: fixed;
background-color: lightblue;
}
p {
width: 150px;
}
<header>
<h1>Hello World</h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend, est at consequat facilisis, sapien nunc pharetra nunc, eu gravida quam massa vel sapien. Vivamus suscipit dui quis erat consectetur, a euismod enim varius. Curabitur quis dolor sed dolor aliquet pharetra. Phasellus eu malesuada turpis. Sed condimentum, augue et condimentum laoreet, leo enim ultrices justo, sit amet congue est lacus a ipsum. Ut posuere mi ac mi sagittis, ut fermentum dolor condimentum. Morbi aliquam egestas lacus et suscipit. Fusce sodales sollicitudin ex eget pulvinar. Nunc velit dui, rutrum vitae lacinia id, sodales vitae sem. Vivamus interdum nibh auctor massa tempus, non sollicitudin risus tincidunt. Donec tortor enim, volutpat a nunc non, placerat semper ex.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend, est at consequat facilisis, sapien nunc pharetra nunc, eu gravida quam massa vel sapien. Vivamus suscipit dui quis erat consectetur, a euismod enim varius. Curabitur quis dolor sed dolor aliquet pharetra. Phasellus eu malesuada turpis. Sed condimentum, augue et condimentum laoreet, leo enim ultrices justo, sit amet congue est lacus a ipsum. Ut posuere mi ac mi sagittis, ut fermentum dolor condimentum. Morbi aliquam egestas lacus et suscipit. Fusce sodales sollicitudin ex eget pulvinar. Nunc velit dui, rutrum vitae lacinia id, sodales vitae sem. Vivamus interdum nibh auctor massa tempus, non sollicitudin risus tincidunt. Donec tortor enim, volutpat a nunc non, placerat semper ex.
</p>
This is because position sticky always follows its parent height and width. In your case, #sticky is inside its parent <header> and header has the least minimum height, that's why when you are passing the header, #sticky is following so. So,the solution is, you rather keep the #sticky in such a position so that <body> can be its parent. like this,
<body>
<div id="sticky">
...
</div>
<body>
then it will stick on top always across the page.
And if you want to place it under the h1 - Flexbox challenge 2,
give it top: (the height of the h1)
Though position: fixed is an easy solution for you, you must know position sticky well also
I have a very simple HTML layout show here...
body{
background:teal;
}
#mycontent{
background:wheat;
text-align:center;
padding:20px;
margin:20px;
}
<div id="mycontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed turpis arcu. Mauris ultricies eget nisl quis auctor. Mauris magna lorem, sodales at posuere interdum, sodales quis purus. Nam non augue quis urna accumsan mattis nec eget mi. Pellentesque at tempus elit. Sed eu enim nunc. Suspendisse rhoncus id nibh id maximus. Cras volutpat efficitur sem, at volutpat nisl porttitor quis. Fusce pellentesque lacus odio, vitae scelerisque metus placerat et. Duis a felis dui. Aenean ante neque, condimentum a massa sed, eleifend porttitor elit.
</div>
I am tyring to fade out the left and right edges of the div and its content. I have seen various options but am not sure which one is best to go for.
CSS mask-image is listed as experimental so not sure that is the best approach here.
What is my best option to achieve this?
Since you have a known background colour, you can overlay a "known BG -> transparent" gradient over the top. For finer control, you can apply it twice: once on the left and once on the right.
body{
background:teal;
}
#mycontent{
background:wheat;
text-align:center;
padding:20px;
margin:20px;
position: relative;
}
#mycontent:after {
content: '';
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
background-image:
linear-gradient(to right, #008080, rgba(0,128,128,0) 50px),
linear-gradient(to left , #008080, rgba(0,128,128,0) 50px);
}
<div id="mycontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed turpis arcu. Mauris ultricies eget nisl quis auctor. Mauris magna lorem, sodales at posuere interdum, sodales quis purus. Nam non augue quis urna accumsan mattis nec eget mi. Pellentesque at tempus elit. Sed eu enim nunc. Suspendisse rhoncus id nibh id maximus. Cras volutpat efficitur sem, at volutpat nisl porttitor quis. Fusce pellentesque lacus odio, vitae scelerisque metus placerat et. Duis a felis dui. Aenean ante neque, condimentum a massa sed, eleifend porttitor elit.
</div>
For more dynamic backgrounds, you will probably need to use actual masking, and just ensure it falls back gracefully in browsers that don't support it.
I have the following html/css:
#wrapper {
width: 400px;
background-color: red;
}
#text {
margin-right: 50px;
}
#subcontent {
float: right;
width: 50px;
}
<div id="wrapper">
<div id="subcontent">
<img src="http://lorempicsum.com/futurama/50/50/1" width="50">
</div>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
</div>
This is achieving the desired effect of making the text stay left and the sub content stay right, without having to specify a width for the text (for responsive behaviour). However, semantically this is incorrect as I have had to place <div id="subcontent"/> before <div id="text"/> in the html, even though the text should appear before the sub content (assuming reading rtl). I can live with this to get the job done but unfortunately when the screen size is very small I need to make <div id="text"/> full width and let the sub content flow naturally afterwards. This currently means the sub content is at the top and I need it to be at the bottom.
How can I change the css so that when the html is ordered
<div id="text"/>
<div id="subcontent"/>
the sub content will float right without being pushed down by the text?
I need to support IE9+
Float is a pain.
Try to use flex and media queries for a responsive design :
Note: since you mention rtl reading, I strongly advise you to have a look on the flex-direction property (MDN)
#wrapper {
display: flex;
width: 400px;
background-color: red;
/* this is the default behavior - you can skip it */
flex-direction: row;
}
#text {
}
#subcontent {
width: 50px;
}
#media (max-width: 400px) {
#wrapper {
flex-direction: column;
}
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://lorempicsum.com/futurama/50/50/1" width="50">
</div>
</div>
Something like this?
#wrapper {
width: 400px;
background-color: red;
position: relative;
}
#text {
margin-right: 50px;
}
#subcontent {
position: absolute;
top: 0;
right: 0;
width: 50px;
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://moviesalbum.com/wp-content/themes/sunny/timthumb.php?src=http://moviesalbum.com/wp-content/uploads/2013/05/Koala-300x225.jpg&h=120&w=120&zc=1&q=90" width="50">
</div>
</div>
Cool. If I understand your question correctly, you are trying to change the order of the HTML, yet have the output still look the same?
If this is the case, you need to give #text AND #subcontent a float:left; add a clearing div and use a calc width on your text to make sure that the image will always fit in whilst the text can be responsively sized.
Here's a fiddle: https://jsfiddle.net/hk9ntyd2/1/
And here's the code:
#wrapper {
width: 400px;
background-color: red;
}
#text {
width: calc(100% - 50px);
float: left;
}
.clear {
clear: both;
}
#subcontent {
float: left;
width: 50px;
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://moviesalbum.com/wp-content/themes/sunny/timthumb.php?src=http://moviesalbum.com/wp-content/uploads/2013/05/Koala-300x225.jpg&h=120&w=120&zc=1&q=90" width="50">
</div>
<div class="clear"></div>
</div>
The margin-left:50px; solution should have worked fine, I personally find that the calc solution is a little neater, but feel free to use margin instead :)
I'm having quite a frustrating problem. What I'm trying to do is make a div "#generic-div" with a height of 20% of the page height, and also set a footer that always sticks to the bottom of the page*; the two seem to be mutually exclusive.
*By "page", I don't mean the currently visible rectangle that is displayed in the window - I mean everything that it is possible to view by scrolling horizontally or vertically, so #footer {position: fixed; bottom: 0;} isn't a solution. The footer must always be under my div .container.
This is my application.html.erb:
<!DOCTYPE html>
<html>
<!-- ... -->
<body>
<div class="container"><%= yield %></div>
<div id="footer"></div>
</body>
</html>
When I do this:
html {height: auto, width: 100%;}
#generic-div {height: 20%;}
#footer {top: 0;}
The HTML fills all the available space in the page, and #footer is pushed down as far as it can go. However, #generic-div has no explicit parent-element height to inherit its height from, so its height is 0.
When I do this:
html {height: 100%, width: 100%;}
#generic-div {height: 20%;}
#footer {top: 0;}
#generic-div's height is set to 20% of the page, but now html's height is just the height of the browser window, so #footer is set just below the bottom border of the browser window, and when I scroll down, more content is revealed under the footer. I would like the footer to be the bottom-most content.
How can I accomplish the height: 20% div and the footer on the bottom?
Please let me know if any part of my question was unclear, and I will try to clarify.
Ok. I understand what you are trying to do. This is what you are looking for. Answer has been tested on fiddle and code is below for your convenience. The issue you are having is that the body html element is everything. The HTML element is just the visible space. So the solution. Just don't apply 100% to the HTML tag, just the BODY tag.
http://jsfiddle.net/qs3ydnyv/5/
CSS
body{
margin:0px;
padding:0px;
clear:both;
color:#000;
height:100%;
display:block;
}
.container{
height:80%;
width:100%;
background-color:#A00002;
display:block;
}
#footer{
width:100%;
height:20%;
background-color:#005C97;
display:block;
}
HTML
<body>
<div class="container">Here is some Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ex sem, imperdiet vitae vehicula quis, cursus ac risus. Nullam nibh ligula, rhoncus ut velit id, dignissim posuere diam. Donec ante justo, gravida vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed matda vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed mattis velit lacinia sit amet. Sed sed urna mattis, posuere libero id, consequat ante. Aliquam ac pretium lectus, eu semper dui. Aliquam maximus nibh nec elit sagittis, ac efficitur ipsum mattis. Fusce rhoncus rutrum mi a sollicitudin. Praesent non arcu non lectus pharetra tincidunt eu sit amet leo. Aenean eu elementum tortor. Sed id erat quis nibh aliquet hendrerit. Phasellus tempus quamm ligula, suscipit quis aliquet eu, eleifend at neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ex sem, imperdiet vitae vehicula quis, cursus ac risus. Nullam nibh ligula, rhoncus ut velit id, dignissim posuere diam. Donec ante justo, gravida vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed mattis velit lacinia sit amet. Sed sed urna mattis, posuere libero id, consequat ante. Aliquam ac pretium lectus, eu semper dui. Aliquam maximus nibh nec elit sagittis, ac efficitur ipsum mattis. Fusce rhoncus rutrum mi a sollicitudin. Praesent non arcu non lectus pharetra tincidunt eu sit amet leo. Aenean eu elementum tortor. Sed id erat quis nibh aliquet hendrerit. Phasellus tempus quam id arcu consequat, nec porttitor nisl molestie. Ut quam ligula, suscipit quis aliquet eu, eleifend at neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ex sem, imperdiet vitae vehicula quis, cursus ac risus. Nullam nibh ligula, rhoncus ut velit id, dignissim posuere diam. Donec ante justo, gravida vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed mattis velit lacinia sit amet. Sed sed urna mattis, posuere libero id, consequat ante. Aliquam ac pretium lectus, eu semper dui. Aliquam maximus nibh nec elit sagittis, ac efficitur ipsum mattis. Fusce rhoncus rutrum mi a sollicitudin. Praesent non arcu non lectus pharetra tincidunt eu sit amet leo. Aenean eu elementum tortor. Sed id erat quis nibh aliquet hendrerit. Phasellus tempus quam id arcu consequat, nec porttitor nisl molestie. Ut quam ligula, suscipit quis aliquet eu, eleifend at neque.
</div>
<div id="footer">gravida vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed mattis velit lacinia sit amet. Sed sed urna mattis, posuere libero id, consequat ante. Aliquam ac pretium lectus, eu semper dui. Aliquam maximus nibh nec elit sagittis, ac efficitur ipsum mattis. Fusce rhoncus rutrum mi a sollicitudin. Praesent non arcu non lectus pharetra tincidunt eu sit amet leo. Aenean eu elementum tortor. Sed id erat quis nibh aliquet hendrerit. Phasellus tempus quam id arcu consequat, nec porttitor nisl molestie. Ut quam ligula, suscipit quis aliquet eu, eleifend at neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ex sem, </div>
</body>
I have a content container that is 500px wide and floated to the right. This container contains text and then an image and then some more text. Ultimately I would like to pull this image out of the bounding 500px container and have it span the full width of the page, which for argument sake is 1000px wide. In effect the images will be full-width (1000px wide) while the content container is only 500px wide. What is the best way to do something like this so that the image can be at full width?
jsfiddle.net/QCb3R/
I would like to pull the image to extend fully outside of the .content div.
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dapibus mauris. Curabitur lectus metus, tincidunt sit amet varius et, euismod et neque. Sed a odio odio. Morbi placerat condimentum fermentum. Nam eleifend congue malesuada. Vivamus vel lorem eu leo blandit placerat. Nunc turpis justo, iaculis vestibulum interdum sit amet, luctus nec dui. Duis ultrices eleifend sem eget mattis. Quisque at purus nisi. Duis porta porttitor nisi nec ornare. Nam eu dolor urna, a suscipit libero. Morbi risus dui, egestas eget consectetur quis, malesuada vitae orci. Maecenas pulvinar malesuada elit eget sagittis. Curabitur congue, mauris quis pretium ultricies, augue nisl dapibus libero, eu lacinia sem nunc commodo purus. Quisque tellus purus, sodales a consequat in, adipiscing in odio. Donec non felis at felis sodales varius vitae non lorem.</p>
<img src="http://lorempixel.com/500/300/" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dapibus mauris. Curabitur lectus metus, tincidunt sit amet varius et, euismod et neque. Sed a odio odio. Morbi placerat condimentum fermentum. Nam eleifend congue malesuada. Vivamus vel lorem eu leo blandit placerat. Nunc turpis justo, iaculis vestibulum interdum sit amet, luctus nec dui. Duis ultrices eleifend sem eget mattis. Quisque at purus nisi. Duis porta porttitor nisi nec ornare. Nam eu dolor urna, a suscipit libero. Morbi risus dui, egestas eget consectetur quis, malesuada vitae orci. Maecenas pulvinar malesuada elit eget sagittis. Curabitur congue, mauris quis pretium ultricies, augue nisl dapibus libero, eu lacinia sem nunc commodo purus. Quisque tellus purus, sodales a consequat in, adipiscing in odio. Donec non felis at felis sodales varius vitae non lorem.</p>
</div>
</div>
And the CSS:
.container {
width: 1000px;
background-color: #eee;
}
.content {
width: 500px;
float: right;
}
It is quite easy to create that effect, but not by setting the image to be absolutely positioned.
Here's a jsFiddle
.container {
width: 1000px;
background-color: #eee;
}
p {
width: 500px;
float: right;
}
.content {
width: 1000px;
float: right;
}
The problem with setting the image to be absolutely positioned is exactly because it takes the image out of the normal document flow. You would have to fill up the gap left by the original image with a place holder element of the same height, and then position the absolutely positioned image over the top of the place holder element. That sounds like a job for JavaScript as it would require access to the DOM to retrieve the position of elements on the page, that can't be done with CSS and HTML only.