Related
I need help creating a sidebar with variable height based on the side content. My page is divided into three parts:
a fixed navbar at the top,
a main area
a footer at the bottom of the page (not sticky).
In the main area I want to create a sidebar that is between the navbar and the footer.
Here is one of my attempts
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: grey;
position: fixed;
top: 0;
width: 100%;
height: 50px;
z-index: 99;
}
.main {
padding-top: 50px;
min-height: calc(100vh - 150px);
}
.footer {
background-color: blue;
position: relative;
bottom: 0;
width: 100%;
height: 100px;
}
.sidebar {
height: 100%;
width: 10%;
position: absolute;
z-index: 1;
left: 0;
background-color: orange;
overflow-x: hidden;
}
.content {
margin-left: 10%;
}
<div class="navbar">
Navbar
</div>
<div class="main">
<div class="sidebar">
Sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim,
ligula nec consectetur porttitor, leo augue ullamcorper dui, in euismod mauris enim
sed dolor. Duis tristique nisl ac libero mattis pulvinar sed a dui. Duis eu lacus
arcu. Mauris in lorem lorem. Nam non elit sit amet neque ultricies scelerisque sit
amet in velit. Cras non enim varius mi congue malesuada. In vehicula tincidunt
elementum. Donec nec pharetra lacus. Maecenas id augue nec ipsum facilisis ultricies.
Vestibulum sed lectus nisi.
Nullam tortor ligula, sodales a orci nec, egestas euismod sapien. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Nullam cursus dolor ut leo faucibus, id
ultricies libero pellentesque. Nullam et iaculis felis. Curabitur risus augue, iaculis
quis auctor at, ultricies id mauris. Integer placerat enim mattis nisl mattis, non
ultrices lectus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque eu tempus magna. Praesent iaculis ultrices quam. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Vestibulum molestie lectus blandit, pulvinar
sem ut, finibus nisl. Suspendisse et vehicula eros, a tempus lectus. Nulla non
pharetra urna. Morbi magna sapien, ultricies ac posuere ac, posuere in neque. Cras
lobortis vel ipsum a fringilla.
</div>
</div>
<div class="footer">
</div>
Unfortunately the sidebar does not reach the footer. If I use position: "absolute"; it covers the footer. I also tried using two div side by side with flex, but without success.
How can I get a sidebar that adapts to the content of the main (between navbar and footer), ensuring that the main has a minimum height of 100vh - 150px to keep the footer at the bottom of the page?
Any help is greatly appreciated
Here problem your css code.
just replace .main class code below
.main {
min-height: calc(100vh - 150px);
position: relative;
}
Without changing your markup, you can use Flexbox to get the layout you want:
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
.navbar {
background-color: grey;
flex-basis: 50px;
padding: 5px;
}
.footer {
background-color: blue;
flex-basis: 100px;
padding: 5px;
}
.main {
flex-grow: 1;
display: flex;
}
.sidebar {
flex-basis: 10%;
background-color: orange;
padding: 5px;
}
.content {
padding: 5px;
}
<div class="navbar">
Navbar
</div>
<div class="main">
<div class="sidebar">
Sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, ligula nec consectetur porttitor, leo augue ullamcorper dui, in euismod mauris enim sed dolor. Duis tristique nisl ac libero mattis pulvinar sed a dui. Duis eu lacus arcu. Mauris
in lorem lorem. Nam non elit sit amet neque ultricies scelerisque sit amet in velit. Cras non enim varius mi congue malesuada. In vehicula tincidunt elementum. Donec nec pharetra lacus. Maecenas id augue nec ipsum facilisis ultricies. Vestibulum sed
lectus nisi. Nullam tortor ligula, sodales a orci nec, egestas euismod sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus dolor ut leo faucibus, id ultricies libero pellentesque. Nullam et iaculis felis. Curabitur risus
augue, iaculis quis auctor at, ultricies id mauris. Integer placerat enim mattis nisl mattis, non ultrices lectus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu tempus magna. Praesent iaculis ultrices quam. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Vestibulum molestie lectus blandit, pulvinar sem ut, finibus nisl. Suspendisse et vehicula eros, a tempus lectus. Nulla non pharetra urna. Morbi magna sapien, ultricies ac posuere ac, posuere in
neque. Cras lobortis vel ipsum a fringilla.
</div>
</div>
<div class="footer">
Footer
</div>
CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN
A Complete Guide to Flexbox | CSS-Tricks
If you were willing to change your markup, or use display:contents on your main element, you could use Grid layout instead.
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
display: grid;
grid-template-columns: 10% 1fr;
grid-template-rows: 50px 1fr 100px;
grid-template-areas: "navbar navbar" "sidebar content" "footer footer";
}
.navbar {
background-color: grey;
padding: 5px;
grid-area: navbar;
}
.footer {
background-color: blue;
padding: 5px;
grid-area: footer;
}
.main {
display: contents;
}
.sidebar {
background-color: orange;
padding: 5px;
grid-area: sidebar;
}
.content {
padding: 5px;
grid-area: content;
}
<div class="navbar">
Navbar
</div>
<div class="main">
<div class="sidebar">
Sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, ligula nec consectetur porttitor, leo augue ullamcorper dui, in euismod mauris enim sed dolor. Duis tristique nisl ac libero mattis pulvinar sed a dui. Duis eu lacus arcu. Mauris
in lorem lorem. Nam non elit sit amet neque ultricies scelerisque sit amet in velit. Cras non enim varius mi congue malesuada. In vehicula tincidunt elementum. Donec nec pharetra lacus. Maecenas id augue nec ipsum facilisis ultricies. Vestibulum sed
lectus nisi. Nullam tortor ligula, sodales a orci nec, egestas euismod sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus dolor ut leo faucibus, id ultricies libero pellentesque. Nullam et iaculis felis. Curabitur risus
augue, iaculis quis auctor at, ultricies id mauris. Integer placerat enim mattis nisl mattis, non ultrices lectus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu tempus magna. Praesent iaculis ultrices quam. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Vestibulum molestie lectus blandit, pulvinar sem ut, finibus nisl. Suspendisse et vehicula eros, a tempus lectus. Nulla non pharetra urna. Morbi magna sapien, ultricies ac posuere ac, posuere in
neque. Cras lobortis vel ipsum a fringilla.
</div>
</div>
<div class="footer">
Footer
</div>
CSS Grid Layout - CSS: Cascading Style Sheets | MDN
A Complete Guide to Grid | CSS-Tricks
A regular list
This is a regular list that serves as the basis of my question.
div {
background: lightgreen;
width: 15em;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
The font-size is blown up to 2em so that we can clearly see additional unwanted space around the bullet points in proposed solutions.
Setting left-padding to 0 does not solve it completely
I want to align the discs (the bullets) of the list with the left edge of the div element. So I try something like this.
div {
background: lightgreen;
width: 15em;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
ul {
padding-left: 0;
list-style-position: inside;
}
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
This solution would have been nice if the indentation of the wrapped lines were not lost. I still want the wrapped lines to be aligned with the beginning of the first character of the first line like they are in a regular list.
Setting left-padding to 1em does not solve it completely
This is one of the solutions proposed in the answers but this does not work as well. We can see additional horizontal space between the left edge of the DIV and the bullet-point discs.
div {
background: lightgreen;
width: 20em;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
ul {
padding-left: 1em;
}
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus
porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
Question
What is the right way to solve this problem?
You can create your own bullet and you will be able to easily control size and distance:
div {
background: lightgreen;
margin-left:20px;
font-size: 2em;
}
ul {
list-style:none;
padding:0;
}
li {
display:flex;
}
li:before {
content:"";
width:0.4em;
height:0.4em;
border-radius:50%;
background:#000;
margin-right:0.5em;
margin-top:0.4em;
flex-shrink:0;
}
body {
background:pink;
}
<div>
<ul>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
<div style="font-size: 1em;">
<ul>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
You have to add to your second example margin-left: 0.84em; and list-style-position: outside; and you will have what you need:
div {
background: lightgreen;
width: 15em;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
ul {
padding-left: 0;
margin-left: 0.84em;
list-style-position: outside;
}
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
div {
background: lightgreen;
width: 15em;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
div ul {
list-style:none;
}
div ul li {
}
div ul li .disc {
display: inline-block;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background-color: #000;
margin-right: 10px;
}
<div>
<ul>
<li><span class="disc"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque, quis dictum metus porttitor.</li>
<li><span class="disc"></span>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc, eget scelerisque elit sem vitae nulla.</li>
<li><span class="disc"></span>Nulla id</li>
<li><span class="disc"></span>Nam ut</li>
</ul>
</div>
https://jsfiddle.net/Sampath_Madhuranga/4wv7kuep/5/
Use your own styles to show bullet points..That is the best solution for this issue...
Try this snippet..This may works for you.
Thanks.
There are different ways.
Check the https://css-tricks.com/almanac/properties/l/list-style/ which shows you can order the list 'list-style-position' property.
Otherwise we can use the symbols or any icons or images look at this link "Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image" which gives complete descruption of listview alignment.
In general it will add before property to the li, we can write our own.Please let me know if anything required
You can also try using background-images, with minimal css, it works exactly the same way as pseudo :before and :after as said by others earlier. This would also give you tight control over the size of the bullet. please have a look at the below snippet :)
div {
background: lightgreen;
width: 15em;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul li {
padding-left: 1em;
background: url("https://via.placeholder.com/10.png/000/000") no-repeat left .5em / .25em;
}
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit
amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque,
quis dictum metus porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc,
eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
<br>
<br>
<div style="font-size: 1em">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in pretium mauris. Aliquam ultrices ipsum sit
amet auctor porta. Donec et metus quis dolor dignissim euismod non a sem. Sed accumsan risus quis ipsum pellentesque,
quis dictum metus porttitor.</li>
<li>Etiam et interdum ipsum, quis venenatis augue. Sed euismod, sem eget tristique molestie, arcu massa scelerisque nunc,
eget scelerisque elit sem vitae nulla.</li>
<li>Nulla id</li>
<li>Nam ut</li>
</ul>
</div>
div {
background: lightgreen;
width: 20em;
margin-left: auto;
margin-right: auto;
}
div ul{
padding-left:0;
list-style-position: outside;
}
div ul li{
margin-left:20px;
}
Try this CSS instead.
I have the following css file:
/*** Tabbed Navigation ***/
.ls-nav {
display: inline;
list-style-type: none;
padding: 0 25px 0 25px;
}
.ls-nav a {
text-decoration: none;
color: #000;
transition: .3s background-color;
}
.ls-nav a:hover {
background-color: #919191;
}
.ls-nav .current a {
background: #ffaacc;
}
.currentCrossLink {
font-weight: bold;
}
.ls-nav ul {
padding:0;
clear: both;
display: block;
margin: auto;
overflow: hidden;
}
.ls-nav ul li {
display: inline;
list-style-type: none;
padding: 0 25px 0 25px;
}
.ls-nav ul li a {
display: inline;
list-style-type: none;
padding: 0 25px 0 25px;
}
and the final effect looks like this:
I would like to have this menu items not aligned to the left, but rather centered - can you help me with that? Thanks!
about the html code, it looks like this:
<div class="liquid-slider" id="slider-1">
<div>
<h2 class="title">Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Slide 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Slide 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Slide 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
as you can see there's no ul li list or anything, I think it's handled by the Javascript plugin that I'm using - http://liquidslider.com/documentation/
Use inline-block to make center align navigation!
Add text-align: center to ul
.ls-nav ul {
padding:0;
clear: both;
display: block;
margin: auto;
overflow: hidden;
text-align: center;
}
Make inline-block to all li
.ls-nav ul li {
display: inline-block;
list-style-type: none;
padding: 0 25px 0 25px;
}
Also make the wrapper block as you can not have block ul inside the inline wrapper!
.ls-nav {
display: block;
list-style-type: none;
padding: 0 25px 0 25px;
}
Try this :
.ls-nav ul li{
display: block;
width: 5em; // You can use: px's / em's or % here
margin-left: auto;
margin-right: auto;
}
It should work.
give .ls-nav ul a width property
Here's an example demonstrating this problem:
http://jsfiddle.net/93twL/
Here's the code (same as the jsfiddle):
<body>
<header>
<h1>
Heading
</h1>
</header>
<div id="container">
<div id="left">
<h3>
Left
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="main">
<h3>
Main
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="right">
<h3>
Right
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor,
</p>
</div>
<footer id="footer">
<h3>
Footer
</h3>
</footer>
</div>
</body>
</html>
html{
min-height:100%;
height:100%;
}
body{
height:100%;
width:100%;
margin:0;
box-shadow: inset 0 0 1px 1px black;
}
h1{
margin-top:0;
}
#container{
clear:both;
width:100%;
height:100%;
float:left;
box-shadow: inset 0 0 1px 1px black;
}
#header{
min-height:12%;
clear:both;
float:left;
width:100%;
box-shadow: inherit;
}
#footer{
min-height:10%;
box-shadow: inherit;
clear:both;
float:left;
width:100%;
}
#left{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
#main{
float:left;
box-shadow: inherit;
width:48%;
min-height:50%;
padding:0.5%;
}
#right{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
As seen in the example by looking at the borders, once the content goes above 100% heigtht, the content overflows. I'd rather have the element expand.
To fix this, one would remove specifying the height. However, if there is no height specified then how am I supposed to control the height of all the content?(using percentages) I need buttons, headers, footers and so on that need a height set to it. (Without HTML and BODY having a 100% height, no other elements will be able to set a height using percentages)
In case it is not clear, I am talking about a fluid layout where the height is given in percentages.
So is this even possible or should I just give this up?
I think what you're after is a fluid width 100% and 100% height, so that the content vertically and horizontally expands. That is a tough thing and can't be done with css alone, flexbox might be able to do it, though I don't know. I saw it recently done with CSS and jQuery using a fixed height on both the header and footer, but the rest is fluid height and width:
http://codepen.io/anon/pen/EsJHu
I made it more responsive here: http://jsbin.com/momep/7/edit
CSS
/* Reset */
* {
margin: 0;
padding: 0;
}
/* Sticky footer */
html, body {
height: 100%;
width: 100%;
}
#page {
height: 100%;
height: auto !important;
min-height: 100%;
}
#sticky-footer-wrap {
overflow: auto;
padding-bottom: 100px;
}
.site-main {
overflow: hidden;
height: 100%;
}
.site-footer {
position: relative;
height: 100px;
margin-top: -100px;
clear: both;
}
/* Header */
.site-header {
height: 100px;
}
#media (min-width:992px) {
/* 3 columns */
#primary {
float: left;
width: 50%;
margin-left: 25%;
}
#secondary {
float: left;
width: 25%;
margin-left:-75%;
}
#tertiary{
float: left;
width: 25%;
}
}
/* Colours */
.site-header {
background: #C5E0DC;
}
#primary {
background-color: #F1D4AF;
}
#secondary {
background-color: #ECE5CE;
}
#tertiary{
background-color: #E08E79;
}
.site-footer {
background: #774F38;
}
HTML
<div id="page">
<div id="sticky-footer-wrap">
<header class="site-header">
<h3>Header</h3>
</header>
<div class="site-main">
<div id="primary">
<h2>Primary content</h2>
<h1>Layout Features</h1>
<ul>
<li>Header (fixed height)</li>
<li>3 fluid columns</li>
<li>100% or full height columns (jQuery)</li>
<li>Sticky footer (fixed height)</li>
<li>Correct source order of columns</li>
<li>IE8 compatible (Modernizr)</li>
</ul>
</div>
<div id="secondary">
<h3>Secondary content</h3>
</div>
<div id="tertiary">
<h4>Tertiary content</h4>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<h3>Footer (sticky)</h3>
</footer>
jQuery
// On page load
$(window).load(columnHeight);
// On window resize
$(window).resize( function () {
// Clear all forced column heights before recalculating them after window resize
$("#primary").css("height", "");
$("#secondary").css("height", "");
$("#tertiary").css("height", "");
columnHeight();
});
// Make columns 100% in height
function columnHeight() {
// Column heights should equal the document height minus the header height and footer height
var newHeight = $(document).height() - $(".site-header").height() - $(".site-footer").height() + "px";
$("#primary").css("height", newHeight);
$("#secondary").css("height", newHeight);
$("#tertiary").css("height", newHeight);
}
You can replace height with min-height: 100%. And at the end of your HTML add a div with css rule clear: both to clean up all the floating elements.
So it will look like this :
<body>
<header>
<h1>
Heading
</h1>
</header>
<div id="container">
<div id="left">
<h3>
Left
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="main">
<h3>
Main
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="right">
<h3>
Right
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor,
</p>
</div>
<footer id="footer">
<h3>
Footer
</h3>
</footer>
</div>
<div style='clear:both'></div>
</body>
</html>
I'm not entirely sure what you're attempting to do here, but how about this?
http://jsfiddle.net/9X8j2/
Only the CSS changed:
body{
width:100%;
margin:0;
box-shadow: inset 0 0 1px 1px blue;
}
h1{
margin-top:0;
}
#container{
width:100%;
box-shadow: inset 0 0 1px 1px gray;
}
#header{
min-height:12%;
clear:both;
float:left;
width:100%;
box-shadow: inherit;
}
#footer{
min-height:10%;
box-shadow: inherit;
clear:both;
width:100%;
}
#left{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
#main{
float:left;
box-shadow: inherit;
width:48%;
min-height:50%;
padding:0.5%;
}
#right{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
I changed the color of the box shadows to tell them apart a little easier.
Removing most of the height attributes may be what you're looking for.. including removing the CSS on the HTML tag. At least now the container does not overflow the body.
Please let me know if this is at all helpful.
I am using the sprite image to make the bullet for unordered list. It works fine but that image is showing slightly upper to the starting position of the text. The text and image should be in the same line. How can I do that?
body
{
font-family:Arial;
font-size:16px;
}
div
{
width:30%;
float:left;
}
.bullet {
list-style-type: none;
margin:0;
padding:0;
}
.magenta li
{
background-image: url(images/css-sprite.png);
background-repeat:no-repeat;
padding-left:20px;
background-position: 0px -2036px;
}
and the html
<div>
<p>Magenta</p>
<ul class="magenta bullet">
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.
</li>
</ul>
</div>
Make your container the same height for your background image portion. And then you can use line-height to align your text to appear centerized vertically to your image.
It's very tough to accomplish this with sprites. If the image was by itself, the obvious solution would be to do:
.magenta li { background-position: 0 50%; }
However, if you're set on keeping the sprites, I encourage you to actually include another element to show the image:
<li>
<em></em>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla sapien, varius id dignissim sit amet, luctus elementum nulla. Mauris hendrerit tincidunt nunc condimentum accumsan. Donec semper hendrerit ligula non blandit. Nullam tellus lacus, dictum quis sodales id, consectetur posuere nunc. Maecenas massa nibh, sagittis quis hendrerit ornare, interdum sit amet tellus. Proin lectus neque, posuere at interdum vitae, eleifend id dui. Mauris eget eros magna, sed gravida quam.</span>
</li>
Then you can use absolute positioning:
.bullet li {
position: relative;
padding: 0 0 25px; }
.bullet em {
background: url(images/css-sprite.png) 0px -2036px no-repeat;
position: absolute;
top: 50%;
left: 0;
width: 20px;
height: 20px;
margin: -10px 0 0; }
http://jsfiddle.net/BeCQy/