I have two sections stacked. I'm using a position:relative on the container div and then using position:absolute on the child divs to position them with respect to the top of the parent container.
This is my code (also on this JSFiddle):
html,body{height: 100%; width: 100%;}
h1{
font-size: 20px;
font-family: 'Avenir', sans-serif;
color: #212121;
}
h2{
font-size: 18px;
font-family: 'Avenir', sans-serif;
font-weight: lighter;
color: #424242;
}
p{
font-family: 'Avenir', sans-serif;
font-size: 18px;
}
.container{
position: relative;
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
}
#header{
position: absolute;
top: 10px;
max-width: 960px;
line-height: 30px;
}
#header h1{padding-top: 5px;}
#header {max-width: 800px;}
#projects{
position: absolute;
top: 240px;
}
<div class = "container">
<section id = "header">
<h1>Name Lastname</h1>
<h2>Description, Description</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod non metus id semper. Integer volutpat, mauris vitae pulvinar rhoncus, lacus lectus euismod augue, sit amet interdum lectus leo et magna. Curabitur in tellus vel tellus finibus faucibus quis sit amet risus. Etiam id sagittis ligula. Ut facilisis, nisi eu.!
</p>
</section>
<section id = "projects">
<p>Another paragraph on projects</p>
</section>
</div>
I am trying to make the page responsive but, when I reduce the width of the page, the header div (top section) crunches into the bottom projects div which makes it illegible.
How can I create a constant spacing between the two divs?
As mentioned in the above comment, the answer is to remove the position: absolute;. The default flow within the parent container will be for the child divs to stack. You can then adjust the spacing between the child divs with margin-top or margin-bottom.
Related
Essentially I am trying to use the <Div> tag to create a bottom border to separate different content on the page but when I scroll to the bottom and insert the div there to separate them, it will ignore the other tags I have put and attached itself to the previous div separator.
How can I fix this? I tried using a HR tag but it did the same.
This is my code:
div {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
margin: 0 auto;
}
#leftcolumn,
#rightcolumn {
border: none;
float: left;
min-height: 450px;
color: white;
}
#leftcolumn {
width: 50%;
}
.container {
margin-left: 10%;
width: 40%;
text-align: center;
}
#rightcolumn {
/* height: 100%;*/
width: 40%;
float: right;
background-color: #c9ccc9;
}
.border {
border-bottom: 40px solid #8dc43f;
}
p {
color: black;
}
.infotext {
color: #8dc43f;
margin-left: 30%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitle {
color: #8dc43f;
margin-left: 25%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitlepower {
color: #8dc43f;
margin-left: 36%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitlecomm {
color: #8dc43f;
margin-left: 17%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.bluetags {
width: 264px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 176px;
margin-top: 4px;
}
.greentags {
width: 264px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 180px;
margin-top: -26px;
}
.orangetags {
width: 280px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 175px;
margin-top: -15px;
}
.image {
position: relative;
width: 80%;
/* for IE 6 */
}
.titleimg {
margin-left: -60%;
margin-right: 10%;
}
imagetext {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.bgimg {
background-size: cover;
width: 100%;
height: 60%;
border-collapse: collapse;
display: block;
margin: 0;
padding: 0;
}
#container {
height: 400px;
width: 400px;
position: relative;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 43%;
top: 25%;
font-family: 'ABeeZee', sans-serif;
}
#secondtext {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 37%;
top: 30%;
font-family: 'ABeeZee', sans-serif;
}
<div id="cssmenu">
<ul>
<img src="turtletag.png" class="titleimg">
<li><span>Home</span>
</li>
<li><span>Features</span>
</li>
<li><span>App</span>
</li>
<li><span>Products</span>
</li>
<li><span>Support</span>
</li>
</ul>
</div>
<img src="googlestore.png" style="position:absolute; top:210px;left:70px; width: 10%;">
<img src="appstore.png" style="position:absolute; top:320px; left:77px; width:10%;">
Order Tags
<img src="iPhone5_Mockup_Template_Free_by_Ray.png" class="bgimg">
<p id="text">Turtle Tags</p>
<p id="secondtext">Always connected to the nest</p>
<div class="border"></div>
<div id="leftcolumn">
<div class="mainbody">
<img src="bluetags.png" class="bluetags hvr-float">
</div>
<div class="mainbody">
<img src="greentags.png" class="greentags hvr-float">
</div>
<div class="mainbody">
<img src="orangetag.png" class="orangetags hvr-float">
</div>
</div>
<a name="features"></a>
<div id="rightcolumn">
<h2 class="infotext">Features</h2>
<hr class="newstyle">
<img src="battery.png" style="margin-left:40%; width:15%">
<p class="infotexttitle">Long battery life</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse
potenti.
</p>
<img src="speaker-xxl.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitle">Noise Notifications</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
<img src="powericon.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitlepower">Always on</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
<img src="twoway.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitlecomm">Two way communication</p>
<p rows="4" columns="4" style="width:350px; margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
</div>
I've tried changing the css and I can't find anything that would cause it, But a fresh pair of eyes may be able to find something I cannot.
The problem here comes from how you constructed your page. You have a left/right column that was built using floats. when you use float, it takes the content in the float out of the general flow of the page. Try to remove those floats and it should work as expected.
I removed your floats in the fiddle and the border started working right.
https://jsfiddle.net/ahmadabdul3/ghogvcsx/4/
here's a basic idea on how floats work: the top boxes don't overlap because there is no float, but the bottom 2 boxes you only see green because the red one is floated so the green one takes its space. to avoid this, add an explicit height to the floated div, but then you can't have dynamically expanding content. https://jsfiddle.net/ahmadabdul3/bL8qLa6j/2/
and here's a basic idea of how columns work: https://jsfiddle.net/ahmadabdul3/bL8qLa6j/5/
I’m working on a template which requires some background images of elements (h2, h3, etc.) to extend beyond the (centered) page width to fill the browser window.
I know a way to do that. I’ve seen this solution explained by Craig Buckler here :
http://www.sitepoint.com/css-extend-full-width-bars/
You can see a fiddle here :
http://jsfiddle.net/Vinyl/V8ps3/
Basically, we add a large amount of padding then move the element back to its original location
I think it’s a good solution but do you know another solution to do that ?
html :
<div id="main">
<div>lorem ipsum</div>
<div id="content">content which extend beyond the (centered) page width to fill the browser window</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum nunc erat, at ornare nisl sollicitudin eget. Vestibulum aliquam massa sit amet fringilla ullamcorper. Curabitur libero arcu, suscipit eu convallis eget, sodales id ante. Vestibulum gravida massa vitae risus molestie egestas. Nullam mi elit, tempus nec eleifend non, vestibulum ac magna. Integer tortor diam, dapibus eu faucibus nec, ornare in ipsum.</div>
</div>
css :
body {
margin:0;
overflow-x: hidden;
background-color: #333333;
}
#main {
width:250px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
}
#content {
background-color: #999999;
padding: 20px;
width: 100%;
margin: 0 auto;
margin-right: -3000px;
padding-right: 3000px;
margin-left: -3000px;
padding-left: 3000px;
}
DEMO ..
This is another solution.. maybe simpler, it uses :before for the elements (h2, h3, etc.)
CSS
#content {
padding: 20px;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
}
#content:before {
background: #999999;
content: "";
width: 1000%;
height: 100%;
position: absolute;
top: 0;
left: -500%;
z-index: -1;
}
Hope this will help you ..
I have a list of items which consist of an image and blockquote. I have been trying to set the images width to a set max-width. Then trying to make blockquote fit in automatically by the images side. Whilst keeping both elements vertically aligned center too.
I'M having some problems and would be thankful if someone could help. jsFiddle
html
<ul>
<li>
<div><img src="http://placehold.it/180x100"></div>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec magna elit. Suspendisse nec enim lacus. Aenean semper ipsum in faucibus blandit. Duis auctor ornare viverra. – Person</p></blockquote>
</li>
<li>
<div><img src="http://placehold.it/146x16"></div>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec magna elit. Suspendisse nec enim lacus. Aenean semper ipsum in faucibus blandit. Duis auctor ornare viverra. – Person</p></blockquote>
</li>
</ul>
CSS
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
width: 100%;
position: relative;
float: left;
padding: 0 0 30px;
}
ul li div {
width: 200px;
position: relative;
float: left;
height: 100%;
max-height: 100%;
display:table-cell;
vertical-align: middle;
}
ul li img {
display:table-cell;
vertical-align: middle;
}
ul li blockquote {
color: #999;
float: right;
font-style: italic;
margin: 0;
width: 70%;
}
ul li blockquote p {
margin: 10px 0;
}
I have removed float, so that it could be vertically aligned properly. Please check this http://jsfiddle.net/NLCnk/3/
If using flexbox is an option for you, take a look at http://jsfiddle.net/dcsturm/ypxud/
Updated the fiddle, because I had overread the width-aspect of your request.
And if you want to learn more about this awesome technic: http://philipwalton.github.io/solved-by-flexbox/
I've looked around for similar issues here and in other places, but I can't seem to find a definitive answer. When I add enough text to a page that it would get to the footer, the footer simply overlaps the text. Same thing if I reduce the size of the browser window to force the footer and the container that holds the content to meet. Occasionally, this also manifests in the "container" aka the lighter gray part, shrinking for some reason, even though it should always be taking up 100% of the height.
This is the sort of stuff that keeps me up all night, so I'm not thinking very clearly. I'm sure it's something stupid and easy to fix, but I'm not a professional designer and am certainly missing what the issue is.
Below is my code, and a JSFiddle that I made with all the relevant parts of a page.
html, body {
margin: 0;
padding: 0;
}
html, body {
background: #252525;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
text-align: center;
}
body {
background: #363636;
border-left: 1px solid #111;
border-right: 1px solid #111;
margin: 0 22.5%;
}
#container {
color: white;
margin-bottom: 2em;
min-height: 100%;
overflow: auto;
padding: 0 2em;
text-align: justify;
}
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: fixed;
font-size: small;
width:100%;
}
<body>
<div id="container">
<h1>A webpage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.
<p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</div>
<div id="footer">This is a footer.</div>
</body>
Here is a JSFiddle example.
Change this:
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: relative; //changed to relative from fixed also works if position is not there
font-size: small;
width:100%;
}
Demo
Anyone stumbling upon this in 2017 should know that a great option was invented to alleviate layout headaches such as this, flexbox.
Essentially, all you have to do is set <body> to:
body {
display: flex;
flex-direction: column;
align-items: center;
}
Then apply flex:1 1 auto to the "main" or middle section, in this case #container, which will make it expand vertically to fill available space, assuring the footer will stick to the bottom:
#container {
flex: 1 1 auto; /*grow vertically*/
}
We added align-items:center in the flex parent to handle cross-axis centering (in our case, horizontal).
Here is an example snippet of the above:
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #252525;
border-left: 1px solid #111;
border-right: 1px solid #111;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
#container {
color: white;
background: #363636;
padding: 2em;
background: #363636;
flex: 1 1 auto;
/*grow vertically*/
width: 55%;
text-align: center;
}
#footer {
color: #707070;
height: 2em;
font-size: small;
}
<body>
<div id="container">
<h1>A webpage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius
nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.</p>
<p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat
libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</p>
</div>
<div id="footer">This is a footer.</div>
</body>
See DEMO
I have made some CSS changes. Have a look. I hope it will help you.
Updated CSS
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: fixed; /* OldProperty */
position: static;/* Updated Property */
font-size: small;
width:100%;
}
I believe you were looking for a sticky footer that stays while not being fixed to the bottom of the page (so no overlap).
Solution
The solution comes from Chris Bracco and I am going to detail what you need to reproduce the effect:
HTML
Your HTML be like:
<html>
<body class="body-for-sticky">
<...> your content </...>
<div class="footer sticky-footer"> your footer </div>
</body>
</html>
CSS
You will need to add in your css something like:
html {
height: 100%; /* for the page to take full window height */
box-sizing: border-box; /* to have the footer displayed at the bottom of the page without scrolling */
}
*,
*:before,
*:after {
box-sizing: inherit; /* enable the "border-box effect" everywhere */
}
.body-for-sticky {
position: relative; /* for the footer to move with the page size */
min-height: 100%; /* for the footer to be at the bottom */
padding-bottom: 6rem; /* Space available between last element and bottom border of the page */
}
.sticky-footer {
position: absolute; /* for it to disappear under last body element */
bottom: 0; /* so the footer can stick to the bottom*/
}
Example
That's like the basic you need to create the sticky footer. Here is an example (with some more CSS for better rendering).
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.body-for-sticky {
position: relative;
min-height: 100%;
padding-bottom: 6rem;
}
.sticky-footer {
position: absolute;
bottom: 0;
}
/* for the rendering */
body {
margin: 0;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.footer {
right: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky footer</title>
<style> </style>
</head>
<body class="body-for-sticky">
<div class="demo">
<h1 style="margin-top: 0">CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
<p> Source <a href="https://chrisbracco.com/css-sticky-footer-effect" />Chris Bracco</a>.</p>
</div>
<div class="footer sticky-footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
</body>
</html>
Expand the snippet and watch the result full size to see how it works.
First write this code
footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:fixed;
left:0;
bottom:0;
width:100%;
}
and now set media queries
#media only screen and (max-width: 767px){
footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:static;
left:0;
bottom:0;
width:100%;
}
}
hope this will help you :)
#footer {
z-index: 1;
position: absolute;
right: 0;
bottom: 0;
left: -25%;
padding: 1rem;
background-color: black;
text-align: center;
height: 3em;
left: 0;
font-size: small;
width:100%;
}
I'm having a problem with with positioning elements on top of each other.
Here is my markup:
<div id="glownySlajder">
<ul>
<li>
<img src="inc/img/slajder_bg.jpg" alt="Slajd" class="slajd">
<div class="fr">
<img src="inc/img/strzalka_lewo.png" alt="strzalka_lewo">
<p class="fl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet consequat gravida. Nunc sed risus est, ac vestibulum nisl. Suspendisse sagittis velit a massa auctor accumsan. Aliquam hendrerit libero tellus, at molestie leo. Curabitur sodales </p>
<img src="inc/img/strzalka_prawo.png" alt="strzalka_prawo">
</div>
</li>
</ul>
</div>
Here is my css:
#glownySlajder {
margin-bottom: -2px;
}
#glownySlajder a {
margin: 7px;
}
#glownySlajder ul li img {
z-index: 9998;
}
#glownySlajder div {
z-index: 9999;
color: black;
background-color: #e7e7e7;
height: 85px;
width: 500px;
padding: 0px 5px;
}
#glownySlajder div p {
font-size: 11px;
line-height: 14px;
margin-top: 20px;
width: 390px;
}
.fr {
float: right;
}
.fl {
float: left;
}
This is what I get:
This is want I want to achieve:
The problem is that z-index doesn't seem to be working. When I try to do negative margin on a div with p, it just disappears under the image, not what I want exactly.
I am unable to work this out on my own, any tips please?
First of all, z-index only works on block elements (display:block). Second, it is only useful for elements which are in the same stacking context. Third, don't use margin to position. Use position: and top, left, right, bottom for this.
References:
CSS2.1: Stack level
CSS2.1: Positioning