Related
I am creating a footer for my site and I wanted the footer to be fixed at the bottom. But when I scroll down, this won't go along with the document. It stays at the bottom of the page always. I have initialized the footer to position: absolute, and also added bottom: 0 of my CSS code. But it still stuck in the middle of the page. How can I resolve this everyone?
.footer {
background-color: red;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: white;
.upper-footer,
.lower-footer {
padding: 10px 0 33px 0;
margin: 0;
width: 100%;
}
.upper-footer {
background: #252525;
.upper-footer-links {
float: left;
position: relative;
margin: 3px -3px;
a {
text-decoration: none;
color: #ffffff;
}
.span {
position: inherit;
right: -1px;
color: #7b7b7b;
}
}
}
.lower-footer {
background: #3c3c3c;
height: 74px;
.footer-information {
float: left;
width: 458px;
p {
line-height: 23px;
margin: 15px 0;
color: #9b9b9b;
}
}
.footer-sns-links {
float: right;
padding: 28px 0;
ul {
list-style: none;
display: inline;
li {
display: inline-block;
border: 1px solid #686868;
padding: 8px;
&:hover {
background-color: #373737;
}
}
}
}
}
}
<div class="footer">
<div class="upper-footer">
<div class="wrapper">
<div class="upper-footer-links">
개인정보처리방침 <span>|</span>
이메일무단수집거부 <span>|</span>
사이트맵 <span>|</span>
찾아오시는 길
</div>
</div>
</div>
<div class="lower-footer">
<div class="wrapper">
<div class="footer-information">
<p class="footer-info">02841 서울특별시 성북구 안암로 145 크림슨창업지원단 | TEL : 02.3290.4810 | E-MAIL : startup#korea.ac.kr<br>COPYRIGHT(C)2018 KOREA UNIVERSITY. ALL RIGHTS RESERVED.</p>
</div>
<div class="footer-sns-links">
<ul>
<li><img href="#" src="images/icon/icon_ss_02.png"></li>
<li><img href="#" src="images/icon/icon_ss_03.png"></li>
<li><img href="#" src="images/icon/icon_ss_01.png"></li>
<li><img href="#" src="images/icon/icon_ss_04.png"></li>
<li><img href="#" src="images/icon/icon_ss_05.png"></li>
</ul>
</div>
</div>
</div>
</div>
By the way, my footer has two different footers, the upper footer and the lower footer and both footers are inside a div called ".footer"
You need to add a position: relative; on a parent div or to the body tag wich I did. This will then position it to the bottom of the page becuase the body tag spans the entire document.
body {
position: relative;
}
.lorem {
line-height: 100px;
}
.footer {
background-color: red;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: white;
.upper-footer, .lower-footer {
padding: 10px 0 33px 0;
margin: 0;
width: 100%;
}
.upper-footer {
background: #252525;
.upper-footer-links {
float: left;
position: relative;
margin: 3px -3px;
a {
text-decoration: none;
color: #ffffff;
}
.span {
position: inherit;
right: -1px;
color: #7b7b7b;
}
}
}
.lower-footer {
background: #3c3c3c;
height: 74px;
.footer-information {
float: left;
width: 458px;
p {
line-height: 23px;
margin: 15px 0;
color: #9b9b9b;
}
}
.footer-sns-links {
float: right;
padding: 28px 0;
ul {
list-style: none;
display: inline;
li {
display: inline-block;
border: 1px solid #686868;
padding: 8px;
&:hover {
background-color: #373737;
}
}
}
}
}
}
<body>
<div class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Risus nec feugiat in fermentum posuere urna nec tincidunt. Eleifend mi in nulla posuere sollicitudin. Netus et malesuada fames ac turpis egestas maecenas pharetra convallis. Eget nunc scelerisque viverra mauris. Pretium aenean pharetra magna ac placerat vestibulum. Amet justo donec enim diam vulputate ut pharetra. Nisl tincidunt eget nullam non nisi est sit amet. Nunc lobortis mattis aliquam faucibus purus. Quisque egestas diam in arcu cursus euismod. Amet consectetur adipiscing elit ut aliquam purus sit amet luctus. Vestibulum mattis ullamcorper velit sed.
Diam vel quam elementum pulvinar etiam. In metus vulputate eu scelerisque felis imperdiet. Mi eget mauris pharetra et ultrices. Pretium lectus quam id leo in. Diam phasellus vestibulum lorem sed risus ultricies tristique. Maecenas volutpat blandit aliquam etiam erat. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Arcu cursus vitae congue mauris rhoncus. Malesuada nunc vel risus commodo. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Dignissim convallis aenean et tortor at. Faucibus in ornare quam viverra orci sagittis.
Vitae congue eu consequat ac. Id diam maecenas ultricies mi. Diam sollicitudin tempor id eu nisl nunc. In egestas erat imperdiet sed. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Dis parturient montes nascetur ridiculus mus mauris vitae. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. A iaculis at erat pellentesque adipiscing commodo elit at. Egestas fringilla phasellus faucibus scelerisque eleifend. Quam adipiscing vitae proin sagittis. Urna porttitor rhoncus dolor purus. Quis blandit turpis cursus in hac habitasse platea. Curabitur gravida arcu ac tortor dignissim convallis aenean. Iaculis nunc sed augue lacus viverra.
Quis eleifend quam adipiscing vitae proin sagittis. Nibh tortor id aliquet lectus proin nibh. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Aliquam faucibus purus in massa tempor nec feugiat. Magna ac placerat vestibulum lectus. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Viverra maecenas accumsan lacus vel facilisis volutpat est. Ultrices vitae auctor eu augue ut lectus arcu bibendum. Sollicitudin tempor id eu nisl. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Id diam vel quam elementum pulvinar etiam non quam. Ultrices eros in cursus turpis. Pretium lectus quam id leo. Malesuada fames ac turpis egestas maecenas. Odio facilisis mauris sit amet massa vitae tortor. Amet porttitor eget dolor morbi non arcu risus.</div>
<div class="footer">
<div class="upper-footer">
<div class="wrapper">
<div class="upper-footer-links">
개인정보처리방침 <span>|</span>
이메일무단수집거부 <span>|</span>
사이트맵 <span>|</span>
찾아오시는 길
</div>
</div>
</div>
<div class="lower-footer">
<div class="wrapper">
<div class="footer-information">
<p class="footer-info">02841 서울특별시 성북구 안암로 145 크림슨창업지원단 | TEL : 02.3290.4810 | E-MAIL : startup#korea.ac.kr<br>COPYRIGHT(C)2018 KOREA UNIVERSITY. ALL RIGHTS RESERVED.</p>
</div>
<div class="footer-sns-links">
<ul>
<li><img href="#" src="images/icon/icon_ss_02.png"></li>
<li><img href="#" src="images/icon/icon_ss_03.png"></li>
<li><img href="#" src="images/icon/icon_ss_01.png"></li>
<li><img href="#" src="images/icon/icon_ss_04.png"></li>
<li><img href="#" src="images/icon/icon_ss_05.png"></li>
</ul>
</div>
</div>
</div>
</div>
</body>
I think you set the footer property
position : fixed
left: 0;
bottom: 0;
width: 100%;
and maybe your problem will be solved.
If you want full-width footer at bottom of page try this
{
position : absolute
left: 0;
right : 0;
bottom: 0;
}
And you want the full-width footer to slide along the page
{
position : fixed
left: 0;
right : 0;
bottom: 0;
}
Happy coding
This is my fiddle of the issue: https://jsfiddle.net/oa2b4cr9/
#nav{
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
}
#nav img{
padding-bottom: 10px;
}
#pagecontent{
border-left: 10px;
max-width: 565px;
min-width: 565px;
float: right;
padding-top: 10px;
display: block;
}
I'd like the two bars to fill the gap from the top to the bottom of the page. I've researched for the last couple of hours and it's driving me a bit mad! I've tried:
Adding display: table to the relevant elements
Setting the min/max/height for both of the columns to 100% and that just pushes the container through the footer.
Adding clear: both under both of the columns
Setting the overflow to hidden
Setting position to relative for the footer rather than absolute.
If anyone can help I would greatly appreciate it.
If you are trying to make an element positioned based on the browser viewport this is not a good use of float or flex. You are trying to achieve an absolute position.
header{background:red; position:absolute; left:0; top:0; right:0; height:100px;}
nav{background:green; position:absolute; left:0; top:100px; bottom:50px; width:150px;}
content{background:yellow; position:absolute; left:150px; top:100px; right:0; bottom:50px;}
footer{background:blue; position:absolute; left:0; right:0; bottom:0; height:50px;}
<header></header>
<nav></nav>
<content></content>
<footer></footer>
Declare a height property on the containing element #content, e.g:
#content{
/* additional */
height: 100%;
}
Then declare a height property on the nested #nav element, e.g:
#nav{
/* additional */
height: 100%;
}
Code Snippet Demonstration:
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Arial";
font-size: 12px;
height: 100%
}
body {
background-color: #E2EEDA;
}
#container {
height: 100%;
width: 100%;
}
#topbar {
height: 100px;
background-color: #CBCADA;
border-bottom: 2px solid black;
}
#header {
max-width: 775px;
min-width: 775px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
}
#content {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #E2EEDA;
padding: 0px;
/* additional */
height: 100%;
}
#nav {
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
/* additional */
height: 100%;
padding-bottom: 20px;
}
#nav img {
padding-bottom: 10px;
}
#pagecontent {
border-left: 10px;
max-width: 565px;
min-width: 565px;
float: right;
padding-top: 10px;
display: block;
/* additional */
padding-bottom: 50px;
/* offset footer height */
}
#footerbar {
height: 50px;
width: 100%;
background-color: #CBCADA;
position: fixed;
/* updated */
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#footercontent {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
padding: 0px;
text-align: center;
}
h1 {
font-size: 25px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="topbar">
<div id="header">
<img src="http://via.placeholder.com/370x100">
<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
</div>
</div>
<div id="content">
<div id="nav">
<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
</div>
<div id="pagecontent">
<h1>Lorem Ipsum</h1>
<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
rhoncus, tempus eu nibh.</p>
<ul>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
</ul>
<p>
Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>
</div>
</div>
<div id="footerbar" ">
<div id="footercontent ">
<p>Sed sagittis ac ex sed facilisis.</p>
</div>
</div>
</div>
</body>
</html>
Updated JSFiddle
In addition:
The #footerbar element has been set to position: fixed
padding-bottom has been declared on the #pagecontent element to
account for the footer height taken out of the normal document
flow.
Alternatively:
1. flex-box alignment (check browser compatibility):
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Arial";
font-size: 12px;
height: 100%
}
* {
box-sizing: border-box;
}
body {
background-color: #E2EEDA;
}
#container {
height: 100%;
width: 100%;
}
#topbar {
height: 100px;
background-color: #CBCADA;
border-bottom: 2px solid black;
}
#header {
max-width: 775px;
min-width: 775px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
}
#content {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #E2EEDA;
padding: 0px;
/* additional */
display: flex;
}
#nav {
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
}
#nav img {
padding-bottom: 10px;
}
#pagecontent {
border-left: 10px;
max-width: 565px;
min-width: 565px;
float: right;
padding-top: 10px;
display: block;
/* additional */
padding-bottom: 50px; /* offset footer height */
padding-left: 15px;
}
#footerbar {
height: 50px;
width: 100%;
background-color: #CBCADA;
position: fixed;
/* updated */
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#footercontent {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
padding: 0px;
text-align: center;
}
h1 {
font-size: 25px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="topbar">
<div id="header">
<img src="http://via.placeholder.com/370x100">
<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
</div>
</div>
<div id="content">
<div id="nav">
<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
</div>
<div id="pagecontent">
<h1>Lorem Ipsum</h1>
<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
rhoncus, tempus eu nibh.</p>
<ul>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
</ul>
<p>
Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>
</div>
</div>
<div id="footerbar" ">
<div id="footercontent ">
<p>Sed sagittis ac ex sed facilisis.</p>
</div>
</div>
</div>
</body>
</html>
2. absolute positioning:
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Arial";
font-size: 12px;
height: 100%
}
* {
box-sizing: border-box;
}
body {
background-color: #E2EEDA;
}
#container {
height: 100%;
width: 100%;
}
#topbar {
height: 100px;
background-color: #CBCADA;
border-bottom: 2px solid black;
}
#header {
max-width: 775px;
min-width: 775px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
}
#content {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #E2EEDA;
padding: 0px;
/* additional */
position: relative;
}
#nav {
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
/* additional */
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
#nav img {
padding-bottom: 10px;
}
#pagecontent {
border-left: 10px;
max-width: 565px;
min-width: 565px;
padding-top: 10px;
display: block;
/* additional */
padding-bottom: 50px; /* offset footer height */
margin-left: 200px; /* offset sidebar nav width */
padding-left: 20px;
}
#footerbar {
height: 50px;
width: 100%;
background-color: #CBCADA;
position: fixed;
/* updated */
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#footercontent {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
padding: 0px;
text-align: center;
}
h1 {
font-size: 25px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="topbar">
<div id="header">
<img src="http://via.placeholder.com/370x100">
<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
</div>
</div>
<div id="content">
<div id="nav">
<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
</div>
<div id="pagecontent">
<h1>Lorem Ipsum</h1>
<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
rhoncus, tempus eu nibh.</p>
<ul>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
</ul>
<p>
Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>
</div>
</div>
<div id="footerbar" ">
<div id="footercontent ">
<p>Sed sagittis ac ex sed facilisis.</p>
</div>
</div>
</div>
</body>
</html>
3. pseudo-elements:
body,
html {
margin: 0px;
padding: 0px;
border: 0px;
font-family: "Arial";
font-size: 12px;
height: 100%
}
* {
box-sizing: border-box;
}
body {
background-color: #E2EEDA;
}
#container {
height: 100%;
width: 100%;
}
#topbar {
height: 100px;
background-color: #CBCADA;
border-bottom: 2px solid black;
}
#header {
max-width: 775px;
min-width: 775px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
}
#content {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #E2EEDA;
padding: 0px;
/* additional */
position: relative;
}
/* start additional */
#content:before {
content: "";
position: fixed;
top: 0;
left: 0;
bottom: 0;
max-width: 200px;
min-width: 200px;
background-color: #CBDDE6;
border-right: 1px solid black;
z-index: -1;
}
/* end additional */
#nav {
max-width: 200px;
min-width: 200px;
float: left;
padding-top: 15px;
}
#nav img {
padding-bottom: 10px;
}
#pagecontent {
border-left: 10px;
float: right;
max-width: 565px;
min-width: 565px;
padding-top: 10px;
display: block;
/* additional */
padding-bottom: 50px; /* offset footer height */
}
#footerbar {
height: 50px;
width: 100%;
background-color: #CBCADA;
position: fixed;
/* updated */
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#footercontent {
max-width: 775px;
min-width: 775px;
margin-left: auto;
margin-right: auto;
background-color: #CBCADA;
padding: 0px;
text-align: center;
}
h1 {
font-size: 25px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="container">
<div id="topbar">
<div id="header">
<img src="http://via.placeholder.com/370x100">
<img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
</div>
</div>
<div id="content">
<div id="nav">
<p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
</div>
<div id="pagecontent">
<h1>Lorem Ipsum</h1>
<img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
rhoncus, tempus eu nibh.</p>
<ul>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
<li>urna sed malesuada scelerisque</li>
</ul>
<p>
Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>
</div>
</div>
<div id="footerbar" ">
<div id="footercontent ">
<p>Sed sagittis ac ex sed facilisis.</p>
</div>
</div>
</div>
</body>
</html>
The screenshot above shows the problem. Unlike the other similar question I don't need this to work for international text. I need this to work for varying screen sizes and varying amounts of text. The text will come from a databse in production, so I can't simply figure out the breakpoint at which the div needs to move down in advance.
The solution I am looking for would first move the text block below the image, and then resize the text div vertically as necessary to accomidate all the text. JS or CSS solutions are fine.
HTML below:
<div class="product">
<img class="productImg" src="http://placehold.it/300x240">
<div class="productTxt">
<h1>Title</h1>
<h3>Price</h3>
<p>Suspendisse sed fermentum neque, vel rutrum velit. Curabitur eget dolor luctus, sodales felis sed, dapibus justo.
Suspendisse in condimentum ante. Sed nec dui tristique, sollicitudin velit eget, ultricies dui.
Ut rhoncus ornare urna, quis venenatis velit ornare eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Etiam ornare sem finibus lectus volutpat, in feugiat elit ultrices. In sed vulputate eros, quis volutpat elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nisi libero, posuere nec laoreet quis, viverra et lorem. Duis odio ante, efficitur et felis at, tincidunt interdum ante.
Quisque vestibulum eu est a egestas. Nunc hendrerit rutrum dui at cursus. Aliquam mollis nec magna ac mattis.
Nam nec est tincidunt leo facilisis finibus non nec mauris. Vestibulum rutrum tristique tincidunt. </p>
</div>
</div>
CSS:
.product {
box-sizing: border-box;
margin: 0px;
padding: 10px;
width: 100%;
height: 330px;
border-bottom: 2px solid #16A085;
}
.productImg {
width: 240px;
height: 300px;
display: inline-block;
position: relative;
}
.productTxt {
box-sizing: border-box;
vertical-align: top;
display: inline-block;
height: 100%;
width: calc(100% - 270px);
padding: 10px;
text-align: center;
position: relative;
border: 2px solid blue;
}
I can't really remove the relative positioning from the productTxt div without breaking the positioning of another element that is within the same div (which I have removed for simplicity in this example)
Remove the fixed height in of parent div .product and add a min-width to .productTxt. If you use 100% for width or height, it's relative to the parent div, and you must specifically set the parent's width or height. That's why your height: 100% on .productTxt was not changing based on your content and was fixed to parent div .product's height: 330px.
.product {
box-sizing: border-box;
margin: 0px;
padding: 10px;
width: 100%;
border-bottom: 2px solid #16A085;
}
.productTxt {
box-sizing: padding-box;
vertical-align: top;
display: inline-block;
height: 100%;
width: calc(100% - 270px);
min-width: 220px; /* change this to what you want */
padding: 10px;
text-align: center;
position: relative;
border: 2px solid blue;
}
To move the text block below the image remove display: inline-block; from .productTxt class.
If you want to keep the height of .product class fix then adjust height of .productTxt according to .product class and give css overflow: auto; to .productTxt all you data will displayed with scroll panel,so your HTML is
<div class="product">
<img class="productImg" src="http://placehold.it/300x240">
<div class="productTxt">
<h1>Title</h1>
<h3>Price</h3>
<p>Suspendisse sed fermentum neque, vel rutrum velit.
Curabitur eget dolor luctus, sodales felis sed, dapibus
justo.Suspendisse in condimentum ante. Sed nec dui
tristique,sollicitudin velit eget, ultricies dui.
Ut rhoncus ornare urna, quis venenatis velit ornare eu.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.
Etiam ornare sem finibus lectus volutpat, in feugiat elit
ultrices. In sed vulputate eros, quis volutpat elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse nisi libero, posuere nec laoreet quis, viverra
et lorem. Duis odio ante, efficitur et felis at, tincidunt
interdum ante.
Quisque vestibulum eu est a egestas. Nunc hendrerit rutrum
dui at cursus. Aliquam mollis nec magna ac mattis.
Nam nec est tincidunt leo facilisis finibus non nec
mauris.Vestibulum rutrum tristique tincidunt.
</p>
</div>
</div>
And your CSS will be
.product {
box-sizing: border-box;
margin: 0px;
padding: 10px;
width: 100%;
height: 550px;
border-bottom: 2px solid #16A085;
}
.productImg {
width: 240px;
height: 300px;
display: inline-block;
position: relative;
}
.productTxt {
box-sizing: border-box;
vertical-align: top;
height: 230px;
width: calc(100% - 270px);
padding: 10px;
text-align: center;
position: relative;
border: 2px solid blue;
overflow: auto;
}
I am trying to implement the following:
You will see there is text and then a line to its side. I am trying to make the line remain the same distance from the text as the screen decreases in size. This works OK, but when the screen gets smaller the line goes into the 'Test Border' part.
See code below as to how I have implemented this. Perhaps I should be taking a different approach.
Also, a jsfiddle here for your convenience.
h3 {
font-size: 26px;
color: #000 !important;
max-width: 90px;
display: inline-block;
padding-bottom: 15px;
width: 8%;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: 90%;
}
<h3>Test Border</h3>
<div class="underline"></div>
You can display both blocks as table and specify first block fixed width (as it's only text that does not change).
.wrapper {
display: table;
width: 100%;
vertical-align: bottom;
padding-bottom: 15px;
table-layout: fixed;
}
h3 {
font-size: 26px;
color: #000 !important;
max-width: 90px;
display: table-cell;
width: 85px;
}
.underline {
display: table-cell;
border-bottom: 1px solid #c6bcb6;
width: 100%;
position: relative;
top: -12px;
}
<div class="wrapper">
<h3>Test Border</h3>
<div class="underline"></div>
</div>
I'd probably use flex box like this.
.border {
display: flex;
}
.border .string {
font-weight: bold;
font-size: 26px;
flex: 0 1;
}
.border .line {
border-bottom: 1px solid #c6bcb6;
flex: 1;
margin: 0 5px 0 10px;
transform: translate(0, -6px);
}
<div class="border">
<span class="string">Test String</span>
<div class="line"></div>
</div>
This will make the title as wide as the longest unbroken work, and the border will fill up the rest of the space.
Here's what it looks like with paragraphs between each header (an almost real world example)
.border {
display: flex;
}
.border .string {
font-weight: bold;
font-size: 26px;
flex: 0 1;
}
.border .line {
border-bottom: 1px solid #c6bcb6;
flex: 1;
margin: 0 5px 0 5px;
transform: translate(0, -6px);
}
<div class="border">
<span class="string">Lorem ipsum dolor</span>
<div class="line"></div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis metus at semper laoreet. Vestibulum vitae lectus ut justo consequat dignissim et in eros. Duis aliquam, ipsum et imperdiet venenatis, ipsum augue scelerisque ante, eu lacinia dui metus
sed lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eu risus a nibh vulputate consectetur. Phasellus id lectus tempor, cursus arcu ut, suscipit augue. Etiam aliquam lobortis semper. Vestibulum dui arcu, faucibus vel suscipit
sed, fermentum sed purus. Vivamus pharetra orci aliquam ligula imperdiet elementum a non tortor. Donec nisl enim, condimentum id nulla quis, vulputate interdum felis. Pellentesque molestie congue urna, eget ultricies est aliquet in. Aenean convallis
magna dolor, vitae facilisis nibh euismod et.
</p>
<div class="border">
<span class="string">Etiam quis molestie</span>
<div class="line"></div>
</div>
<p>
Etiam quis molestie libero. In vitae massa cursus, commodo lectus vel, vehicula felis. Nam venenatis tortor et diam faucibus, vel ullamcorper orci placerat. Mauris at aliquet nunc, quis eleifend turpis. Mauris ultricies at mi ac bibendum. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Nulla metus enim, volutpat ut magna sed, dignissim tincidunt lorem. Nam nec tempor urna. Nam eget quam elit. Pellentesque condimentum turpis consequat turpis rhoncus vestibulum. Curabitur efficitur dapibus
tortor ac bibendum. Donec risus nibh, dignissim vel sapien vel, fermentum scelerisque velit. Ut posuere finibus erat, nec bibendum nunc faucibus at.
</p>
<div class="border">
<span class="string">Phasellus sed orci</span>
<div class="line"></div>
</div>
<p>
Phasellus sed orci eget urna commodo luctus a sed felis. Aliquam erat volutpat. Quisque sit amet volutpat magna. Etiam vestibulum, velit sit amet efficitur consectetur, tortor velit consectetur velit, et facilisis ex dolor sit amet quam. Fusce tristique
lorem eget dapibus malesuada. Suspendisse iaculis est nec urna sollicitudin, tincidunt vehicula justo pellentesque. Morbi nulla lorem, tempus a interdum vel, fringilla ut elit. Vestibulum sed neque sed lorem viverra luctus. Suspendisse sapien ipsum,
ultrices vitae posuere eget, tristique sit amet augue. Nam suscipit, dolor et lacinia vulputate, erat nunc lacinia nibh, vel posuere nisl nunc eget enim. Vestibulum suscipit lorem risus, id feugiat sem molestie ac. Integer consectetur nunc sed lacinia
commodo. Quisque cursus purus nec dui euismod, nec porttitor nibh fermentum. Nunc tellus mauris, accumsan vitae tincidunt sit amet, ultricies in elit. Donec elementum libero ipsum, sit amet aliquam tortor volutpat eget. Pellentesque pretium dictum ligula.
</p>
<div class="border">
<span class="string">Fusce ultricies ante</span>
<div class="line"></div>
</div>
<p>
Fusce ultricies ante ut orci laoreet, in luctus quam eleifend. Integer nisl purus, pharetra sit amet ligula id, porta porta risus. Etiam nec varius risus, eget euismod risus. Vivamus pharetra purus vitae turpis ultrices ullamcorper. Proin vestibulum,
tortor id blandit pharetra, sapien augue dictum elit, a efficitur urna magna at lorem. Donec sollicitudin, purus sed pharetra iaculis, dolor mauris pretium est, in vestibulum massa odio vitae sapien. Curabitur scelerisque felis dui, non molestie nisl
viverra in. Integer tempor nec risus quis vulputate. Nulla facilisi. Pellentesque ipsum elit, lacinia et consectetur id, gravida ut arcu. Maecenas vestibulum faucibus rutrum. Duis at egestas purus. Proin ac congue nisl, id placerat turpis. Aenean ac
nisl at odio efficitur convallis sit amet quis ipsum. Mauris scelerisque aliquet libero, nec dapibus lectus.
</p>
I think the best solution is change the markup, because with your code the text in h3 tag could be bigger than your max-width (in fact, it is). Something like this:
.textline {
display: table;
}
h3 {
font-size: 26px;
color: #000 !important;
display: table-cell;
width: 9%;
margin-right: 1%;
vertical-align: bottom;
}
.underline {
display: table-cell;
border-bottom: 1px solid #c6bcb6;
width: 90%;
position: relative;
top: -7px;
}
<div class="textline">
<h3>Test border</h3>
<div class="underline"></div>
</div>
When you use percentages you have to take into account the fixed measures of the other elements, width, margins, borders... Not the same 90% of a 1000px screen that one of 500px, the remaining space is less.
You can use calc to solve this issues:
h3 {
font-size: 26px;
color: #000 !important;
width: 95px;
display: inline-block;
padding-bottom: 15px;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: calc(100% - 100px);
}
<h3>Test Border</h3>
<div class="underline"></div>
You could try using a table display, with the text and line each having their own cell:
<div class="div-row">
<div class="div-cell"><h3>Test Border</h3></div>
<div class="div-cell underline"></div>
<div>
CSS:
.div-row {
display: table-row;
width: 100%;
}
.div-cell {
display: table-cell;
}
I haven't tested this, but the div containing the line should automatically shrink to the available width as your resize the browser window (or as you go from desktop to mobile).
If you want, you could also set a fixed width to the div containing the text.
You can try calc() property and it will work...
Check this fiddle here
What you have to do,
h3 {
font-size: 26px;
display: inline-block;
max-width:90px;
margin-right:10px;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: calc(100% - 104px);
}
Try the below CSS:
h3 {
font-size: 26px;
color: #000 !important;
display: inline-block;
padding-bottom: 15px;
}
.underline {
border-bottom: 1px solid #C6BCB6;
width: 90%;
}
I want to create HTML layout like this
https://dribbble.com/shots/2136656-Minions-Promo/attachments/393961
I tried to use some css codes to make elements non rectangular, but no luck so far :).
I saw this post:
How can i Create This Non-Rectangular Layouts?
But couldn't find answers there :)
Anyone have an idea how to build this thing?
Thanks
You can use :pseudo element to add a background and use skew property
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.red {
padding: 15px;
position: relative;
color: white;
margin-bottom: 50px;
}
.red:after {
content: '';
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
background: tomato;
z-index: -1;
transform: skew(0deg, 2deg);
}
.blue {
position: relative;
padding: 15px;
}
.blue:after {
content: '';
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
background: cornflowerblue;
z-index: -1;
transform: skew(0deg, -2deg);
}
<div class="red">
<h1>Sed augue ipsum egestas</h1>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Vivamus aliquet elit ac nisl. Donec id justo. Praesent turpis.</p>
<p>Integer tincidunt. Fusce convallis metus id felis luctus adipiscing. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum volutpat pretium libero.</p>
<p>Pellentesque posuere. Nam pretium turpis et arcu. Etiam imperdiet imperdiet orci. Quisque id mi.</p>
</div>
<div class="blue">
<h1>Sed augue ipsum egestas</h1>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Vivamus aliquet elit ac nisl. Donec id justo. Praesent turpis.</p>
<p>Integer tincidunt. Fusce convallis metus id felis luctus adipiscing. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum volutpat pretium libero.</p>
<p>Pellentesque posuere. Nam pretium turpis et arcu. Etiam imperdiet imperdiet orci. Quisque id mi.</p>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.yellow {
margin: 80px 0;
padding: 15px;
background: yellow;
position: relative;
}
.yellow:before,
.yellow:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
background: yellow;
z-index: -1;
}
.yellow:before {
top: -40px;
transform: skew(0, 3deg);
}
.yellow:after {
bottom: -40px;
transform: skew(0, -3deg);
}
<div class="yellow">Fusce fermentum odio nec arcu. Nullam accumsan lorem in dui. Nullam accumsan lorem in dui. Cras varius. Morbi mollis tellus ac sapien. Cras dapibus. Fusce pharetra convallis urna. Fusce a quam. Maecenas ullamcorper, dui et placerat feugiat, eros pede
varius nisi, condimentum viverra felis nunc et lorem. Phasellus consectetuer vestibulum elit. Aliquam lobortis. Cras ultricies mi eu turpis hendrerit fringilla.</div>