I'm wondering why my aside is at the bottom of the page instead of next to the main content when I apply (float:right;) in the css. I've tried to float it on the left and the main content on the right but had the same problem.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Photoblog</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="container">
<header>
<h1>Photoblog</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<article>
<h2>Welcome:</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros
justo, quis consectetur arcu. Etiam vel orci massa, vel vestibulum ante.
Nam posuere luctus iaculis. In id augue augue. Integer vel massa purus,
sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue
interdum. Curabitur tempus accumsan lacus id accumsan. Nulla fermentum,
purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl
ac turpis.
</p>
</article>
<article>
<h2>First Impressions</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros
justo, quis consectetur arcu. Etiam vel orci massa, vel vestibulum ante.
Nam posuere luctus iaculis. In id augue augue. Integer vel massa purus,
sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue
interdum. Curabitur tempus accumsan lacus id accumsan. Nulla fermentum,
purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl
ac turpis.
</p>
</article>
<article>
<h2>Bro</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros
justo, quis consectetur arcu. Etiam vel orci massa, vel vestibulum ante.
Nam posuere luctus iaculis. In id augue augue. Integer vel massa purus,
sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue
interdum. Curabitur tempus accumsan lacus id accumsan. Nulla fermentum,
purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl
ac turpis.
</p>
</article>
<aside>
<h2>About Me</h2>
<p>
Hello here is some placeholder text. Hello here is some placeholder text.
Hello here is some placeholder text. Hello here is some placeholder text.
Hello here is some placeholder text. Hello here is some placeholder text.
</p>
</aside>
<footer>
<p>By Howard Tang</p>
</footer>
</div>
</body>
</html>
CSS:
body {
background-color: #F2E9E1;
color : #111111;
font-family : "Arial", "helvetica", sans-serif;
font-size : 11pt;
}
header h1 {
background-color: black;
padding:0px;
color: #ffffff;
display:block;
height: 80px;
width: 960px;
text-align : center;
line-height:80px ;
font-family : "Georgia", Serif;
}
nav ul {
list-style : none;
width:960px;
padding : 0;
text-align : center;
}
nav ul li {
color : #111111;
display : block;
}
nav {
display : block;
}
nav a {
color : #111111;
}
nav ul li {
display : inline;
}
article {
float : left;
width : 600px;
padding-top:0px;
padding-right : 20px;
padding-left : 20px;
padding-bottom : 40px;
background-color : #cbe86b;
}
article img {
height : 400px;
width : 600px;
}
aside {
padding-left: 20px;
float: right;
background-color : #cccccc;
width : 300px;
}
#container {
width : 900px;
margin : 0 auto;
}
footer {
margin-top: 20px;
float : left;
text-align: left;
width : 600px;
}
You haven't accounted for the padding in your widths. If you reduce your widths to those below, the aside will move back to the side.
article {
background-color: #CBE86B;
float: left;
padding: 0 20px 40px;
width: 560px; /* 560px + 20px + 20px = 600px */
}
aside {
background-color: #CCCCCC;
float: right;
padding-left: 20px;
width: 280px; /* 280px + 20px = 300px */
}
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
CSS Property Border-Color Not Working
(6 answers)
Closed 9 months ago.
I am having some trouble understanding why margin: 1rem is not applying to my footer element. When I modify the size, only the text content in the <p> for the article div and aside element are modified. There is no margin between the footer text and the background color on the top and bottom, only on the left and right. Could anyone tell me what's causing this? Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body {
background-color: pink;
}
section {
background-color: lightgray;
max-width: 1000px;
box-sizing: border-box;
}
.article {
background-color: lightyellow;
width: 70%;
float: left;
margin: 0;
}
aside {
background-color: lightgreen;
float: right;
float: none;
overflow: hidden;
margin: 0;
}
footer {
clear: both;
background-color: aqua;
display: block;
border: black 10px;
box-sizing: border-box;
}
p {
margin: 1rem;
}
</style>
</head>
<body>
<section>
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac
eleifend ex, vitae bibendum tortor. Sed rutrum, orci quis venenatis
congue, justo orci volutpat justo, semper vestibulum mauris est mattis
mi. Duis tincidunt enim congue elit egestas, ut ultrices purus
vulputate. Curabitur gravida tellus vel ornare convallis. Nunc
</p>
</div>
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor
aliquam massa. Pellentesque maximus tortor ac est ultricies, id
sodales ligula vehicula. Fusce dignissim risus ligula, a feugiat augue
</p>
</aside>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
malesuada dolor quis ante tempus, eget posuere massa egestas. Integer
feugiat tellus nibh. Vestibulum pellentesque quam eu hendrerit porta.
Suspendisse sagittis eros vitae urna convallis, sit amet venenati
</p>
</footer>
</section>
</body>
</html>
The margin is applied - your problem is just that you have declared a 10px border without declaring a border-style, so essentially it looks like the p-element's margin is overflowing, because there is an invisible border of 10px. Apply a border-style and you will see the margin:
body {
background-color: pink;
}
section {
background-color: lightgray;
max-width: 1000px;
box-sizing: border-box;
}
.article {
background-color: lightyellow;
width: 70%;
float: left;
margin: 0;
}
aside {
background-color: lightgreen;
float: right;
float: none;
overflow: hidden;
margin: 0;
}
footer {
background-color: aqua;
display: block;
border: black solid 10px;
box-sizing: border-box;
}
p {
margin: 1rem;
}
<section>
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac eleifend ex, vitae bibendum tortor. Sed rutrum, orci quis venenatis congue, justo orci volutpat justo, semper vestibulum mauris est mattis mi. Duis tincidunt enim congue elit egestas, ut ultrices
purus vulputate. Curabitur gravida tellus vel ornare convallis. Nunc
</p>
</div>
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor aliquam massa. Pellentesque maximus tortor ac est ultricies, id sodales ligula vehicula. Fusce dignissim risus ligula, a feugiat augue
</p>
</aside>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam malesuada dolor quis ante tempus, eget posuere massa egestas. Integer feugiat tellus nibh. Vestibulum pellentesque quam eu hendrerit porta. Suspendisse sagittis eros vitae urna convallis,
sit amet venenati
</p>
</footer>
</section>
I believe that is margin collapse.
I can see the intent to set a black border on the parent element footer in the first place. But that probably isn't working, and border: black 10px solid; would do the trick. And the margin collapse would no longer occur in this case.
Please read following page to learn about the margin collapse.
What is Margin Collapse in CSS? And How to Avoid It
And, as the other answers pointed out, perhaps it is padding, not margin, that suits your purpose.
You need to give padding to footer
Changes I made
In BODY tag
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
IN FOOTER
padding: 2%;
You apply box-sizing then i think you like to use padding. I refactor your css a little bit.
body {
background-color: pink;
}
section {
background-color: lightgray;
max-width: 1000px;
box-sizing: border-box;
}
.article {
background-color: lightyellow;
width: 70%;
float: left;
margin: 0;
}
aside {
background-color: lightgreen;
float: right;
float: none;
overflow: hidden;
margin: 0;
}
footer {
background-color: aqua;
box-sizing: border-box;
padding: 10px;
}
p {
margin: 1rem;
}
<section>
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac
eleifend ex, vitae bibendum tortor. Sed rutrum, orci quis venenatis
congue, justo orci volutpat justo, semper vestibulum mauris est mattis
mi. Duis tincidunt enim congue elit egestas, ut ultrices purus
vulputate. Curabitur gravida tellus vel ornare convallis. Nunc
</p>
</div>
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor
aliquam massa. Pellentesque maximus tortor ac est ultricies, id
sodales ligula vehicula. Fusce dignissim risus ligula, a feugiat augue
</p>
</aside>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
malesuada dolor quis ante tempus, eget posuere massa egestas. Integer
feugiat tellus nibh. Vestibulum pellentesque quam eu hendrerit porta.
Suspendisse sagittis eros vitae urna convallis, sit amet venenati
</p>
</footer>
</section>
I'm currently making a (static) website from scratch (so code the HTML and CSS stuff myself), and I want to have a responsive "image gallery" that changes the width of the pictures according to your screen width, so I followed this tutorial: CSS Image Gallery - responsive
However, changing it to my own likings I encountered an issue I could not fix with my current HTML/CSS skillset (it is not that much, I'm quite new in this). My problem is when I have (in my example three) images of the same size in my gallery, but the captions of the image have different length, this negatively affects the text that is followed by the gallery (see example and image below). I tried to fix this with the tutorials available at W3 and stuff, but nothing worked yet.
Does any of you how to (easily) fix this? And if so, please explain what you changed, because I want to truly understand what is going on at my website (that is why I didn't want to use these static site generators).
Note: I have made 3 types of galleries, one for two, three and four images, which explains the ".responsivethree" etc classes
<!DOCTYPE html>
<html lang="en-NL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style type="text/css">
body {
font-family: helvetica;
padding: 20px;
font-size:11pt;
}
header {
max-width: 800px;
}
main {
max-width: 800px;
}
section {
padding-left: 15px;
border-left: 1px solid rgb(223, 223, 223);
border-radius: 5px;
}
footer {
max-width: 800px;
}
div.gallery {
padding: 0px;
}
div.gallery img {
width: 98%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
div.desc {
padding: 2px;
padding-bottom: 5px;
text-align: center;
color: gray;
font-size: 85%;
}
* {
box-sizing: border-box;
}
.responsivefour {
padding: 0 6px;
float: left;
width: 24.99999%;
}
.responsivethree {
padding: 0 6px;
float: left;
width: 33.32%;
}
.responsivetwo {
padding: 0 6px;
float: left;
width: 49.9988%;
}
#media only screen and (max-width: 700px) {
.responsivefour {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsivefour {
width: 100%;
}
.responsivethree {
width: 100%;
}
.responsivetwo {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<!-- #################################################################### -->
<header id="top">
<h1>Header</h1>
</header>
<!-- #################################################################### -->
<main>
<article id="test">
<h2>bla</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
<div class="desc">--- short description ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
<div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
<div class="desc">--- stuff ---</div>
</div>
</div>
<p>
<b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
</section>
</article>
</main>
<!-- #################################################################### -->
<footer>
<p style="text-align: center;">footer tooter</p>
</footer>
<!-- #################################################################### -->
</body>
</html>
The float:left property you gave to the responsivethree class aligns the images to the left. Since you did not reset the left justification feature afterward, you are having a problem with the text scrolling. The clear:both command is used to reset the float:left property.
<!DOCTYPE html>
<html lang="en-NL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style type="text/css">
body {
font-family: helvetica;
padding: 20px;
font-size:11pt;
}
header {
max-width: 800px;
}
main {
max-width: 800px;
}
section {
padding-left: 15px;
border-left: 1px solid rgb(223, 223, 223);
border-radius: 5px;
}
footer {
max-width: 800px;
}
div.gallery {
padding: 0px;
}
div.gallery img {
width: 98%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
div.desc {
padding: 2px;
padding-bottom: 5px;
text-align: center;
color: gray;
font-size: 85%;
}
* {
box-sizing: border-box;
}
.responsivefour {
padding: 0 6px;
float: left;
width: 24.99999%;
}
.responsivethree {
padding: 0 6px;
float: left;
width: 33.32%;
}
.responsivetwo {
padding: 0 6px;
float: left;
width: 49.9988%;
}
#media only screen and (max-width: 700px) {
.responsivefour {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsivefour {
width: 100%;
}
.responsivethree {
width: 100%;
}
.responsivetwo {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<!-- #################################################################### -->
<header id="top">
<h1>Header</h1>
</header>
<!-- #################################################################### -->
<main>
<article id="test">
<h2>bla</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
<div class="desc">--- short description ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
<div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
<div class="desc">--- stuff ---</div>
</div>
</div>
<p class="clear">
<b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
</section>
</article>
</main>
<!-- #################################################################### -->
<footer>
<p style="text-align: center;">footer tooter</p>
</footer>
<!-- #################################################################### -->
</body>
</html>
The content boxes look good when they're full size, but when the page shrinks they are no longer centred. I've tried messing around with a bunch of things but can't for the life of me figure out what's wrong.
I've only been learning to code for a few weeks to please be kind lol, however if you have any off topic tips they are also appreciated
* {margin: 0; padding: 0}
main {
margin: 35px 50px;
padding: 0px 15px;
}
.mainContent {
display:block;
height:auto;
width: 60%;
float:left;
background-color: rgba(29,1,52,1);
padding: 30px;
color: #01b3ff;
text-align:center;
}
.newsHolder {
display: block;
height:auto;
width: 30%;
float:right;
background-color: rgba(29,1,52,1);
padding: 20px 15px;
color: #01b3ff;
}
.newsHolder img {
float:left;
padding: 15px;
}
#media screen and (min-width: 1141px) {
.mainContent {
margin-right: 10px;
}
}
#media screen and (max-width: 1140px) {
.mainContent {
width: 100%;
margin-bottom: 40px;
clear:both;
}
.newsHolder {
width:100%;
clear:both;
}
}
<body>
<main>
<div class="mainContent">
<h1> Welcome to my website! </h1><br>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis laoreet eros. Sed tristique felis quis turpis aliquet, sed hendrerit massa tincidunt. Phasellus consequat finibus lectus id euismod. Sed orci nunc, tempus id condimentum vitae, pharetra ultrices nibh. Quisque erat ipsum, aliquam vitae pretium ac, consequat at nisi. Pellentesque vehicula, neque ac varius aliquam, lectus nisi sodales ante, bibendum lobortis justo metus nec sem. Duis a imperdiet lectus, ut interdum enim. Quisque eu commodo elit. Mauris massa lorem, ullamcorper luctus diam quis, lacinia lobortis arcu. Vestibulum facilisis feugiat nisl, eget tempus erat tempor sed.
</p>
</div>
<div class="newsHolder">
<h1 style="text-align: center;"> BREAKING NEWS </h1><br>
<br>
<img src="images\angryluke.png">
<h2> Lorem ipsum </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis laoreet eros. </p>
</div>
</main>
</body>
You have to read more about box-sizing, just add box-sizing: border-box; to all elements and it will fix your problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
margin: 35px 50px;
padding: 0px 15px;
}
.mainContent {
display:block;
height:auto;
width: 60%;
float:left;
background-color: rgba(29,1,52,1);
padding: 30px;
color: #01b3ff;
text-align:center;
}
.newsHolder {
display: block;
height:auto;
width: 30%;
float:right;
background-color: rgba(29,1,52,1);
padding: 20px 15px;
color: #01b3ff;
}
.newsHolder img {
float:left;
padding: 15px;
}
#media screen and (min-width: 1141px) {
.mainContent {
margin-right: 10px;
}
}
#media screen and (max-width: 1140px) {
.mainContent {
width: 100%;
margin-bottom: 40px;
clear:both;
}
.newsHolder {
width:100%;
clear:both;
}
}
<body>
<main>
<div class="mainContent">
<h1> Welcome to my website! </h1><br>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis laoreet eros. Sed tristique felis quis turpis aliquet, sed hendrerit massa tincidunt. Phasellus consequat finibus lectus id euismod. Sed orci nunc, tempus id condimentum vitae, pharetra
ultrices nibh. Quisque erat ipsum, aliquam vitae pretium ac, consequat at nisi. Pellentesque vehicula, neque ac varius aliquam, lectus nisi sodales ante, bibendum lobortis justo metus nec sem. Duis a imperdiet lectus, ut interdum enim.
Quisque eu commodo elit. Mauris massa lorem, ullamcorper luctus diam quis, lacinia lobortis arcu. Vestibulum facilisis feugiat nisl, eget tempus erat tempor sed.
</p>
</div>
<div class="newsHolder">
<h1 style="text-align: center;"> BREAKING NEWS </h1><br>
<br>
<img src="images\angryluke.png">
<h2> Lorem ipsum </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis laoreet eros. </p>
</div>
</main>
</body>
Here is a link where you could know more about it: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
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.
Im wanting the container (purple border) to grow in size alongside the main content so i can place a border around it so it looks like the sidebar (blue border) is full height.
<div id="container">
<section id="mainContent">
<h1>title here</h1>
<img src="images/jayzmchg.jpg"></img>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis.
Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur
a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et,
cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac
ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis
venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet
ligula scelerisque hendrerit.</p>
</section>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<footer id="footer">
<p></p>
</footer>
Above is the html, the following is the css
#container { /* purple border */
height: 250px;
margin: 0 auto;
max-width: 1000px;
border: 1px solid #FF00FF;
}
#mainContent { /*red border */
float: left;
width: 700px;
border: 1px solid #FF0000
}
#sidebar {/*blue border */
width: 294px;
float: right;
border: 1px solid #0000FF;
}
ive set the height at 250px for the container so you can see it, ive tried setting it as 100% but just doesnt show anything im guessing this is cause theres no content in it but how could i make it so it acts like if what is inside the mainContent is its height.
adding overflow:hidden to container causes this
Put a float:left; on #container.
OR
Put overflow:hidden; on #container to clear the internal floats.
Example fiddle: http://jsfiddle.net/3jNTv/
Chris Coyier has written a great post about it here:
http://css-tricks.com/all-about-floats/
Try set the height to heigh: 100%;?
Try this one, see live example:
link
height: auto !important;
I have added a class floClear and add a div. it will work fine.
CSS
#container { /* purple border */
margin: 0 auto;
max-width: 1000px;
border: 1px solid #FF00FF;
}
#mainContent { /*red border */
float: left;
width: 700px;
border: 1px solid #FF0000
}
#sidebar {/*blue border */
width: 294px;
float: right;
border: 1px solid #0000FF;
}
.floClear
{
clear:both;
}
HTML
<div id="container">
<section id="mainContent">
<h1>title here</h1>
<img src="images/jayzmchg.jpg"></img>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis.
Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur
a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et,
cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac
ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis
venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet
ligula scelerisque hendrerit.</p>
</section>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="floClear"></div>
</div>
<footer id="footer">
<p>Test</p>
</footer>