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>
Related
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
I have an element which I want to take up the lower half of the screen, at least, but still allow text to make it larger. Naturally, I would use min-height, but that seems to fail when it comes to vertically centering the text within.
I can't use position:absolute because it needs to remain in the DOM.
Here is a mockup of the situation:
* {
margin: 0;
padding: 0;
}
body {
height: 1000px;
}
.img {
height: 50%;
width: 100%;
background: lightblue;
}
.text {
min-height: 20%;
background: coral;
text-align: center;
margin: 0 15%;
}
.centered {
/* I need to center this within it's parent */
}
<body>
<div class="img"></div>
<div class="text">
<div class="centered">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit mauris vel libero pretium viverra. Mauris tristique nisl erat, convallis suscipit lacus consectetur ac. Ut pretium lorem odio, quis feugiat erat ultrices finibus. Curabitur nec suscipit felis. Ut at iaculis nisl, quis aliquet tellus. Aliquam eu massa velit. Etiam et ultricies velit. Ut et tortor feugiat, laoreet lacus et, faucibus turpis. Aliquam pretium elit ut nisl pellentesque, quis aliquet ante varius. Etiam sit amet elementum odio. Donec vulputate est at gravida faucibus.</p>
</div>
</div>
</body>
* {
margin: 0;
padding: 0;
}
body {
height: 1000px;
}
.img {
height: 50%;
width: 100%;
background: lightblue;
}
.text {
min-height: 20%;
background: coral;
text-align: center;
margin: 0 15%;
display: table;
}
.centered {
/* I need to center this within it's parent */
display: table-cell;
vertical-align: middle;
}
<div class="img"></div>
<div class="text">
<div class="centered">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit mauris vel libero pretium viverra. Mauris tristique nisl erat, convallis suscipit lacus consectetur ac. Ut pretium lorem odio, quis feugiat erat ultrices finibus. Curabitur nec suscipit felis. Ut at iaculis nisl, quis aliquet tellus. Aliquam eu massa velit. Etiam et ultricies velit. Ut et tortor feugiat, laoreet lacus et, faucibus turpis. Aliquam pretium elit ut nisl pellentesque, quis aliquet ante varius. Etiam sit amet elementum odio. Donec vulputate est at gravida faucibus.</p>
</div>
</div>
I was able to do this with display: flex and some padding. See fiddle.
I've made an illustration of the situation:
The blue lines illustrate the grid the website is in. Let's assume a 960 grid for now, with a 300px left side (red part), a 20px gap and the remaining 640px for the right side (the black and green parts). I want to know if there's a solution for this problem that doesn't use calc() (due to older browsers) or background-image (because that's not really pretty).
Is there a pretty way to make this work, using just CSS while keeping the content centered within the grid, and the backgrounds flowing all the way to the borders of the screen?
http://codepen.io/anon/pen/avoKwQ
Done by pseudo elements and absolute positioning. Used bootstrap for faster demo. Actually, it is a specific problem and my solution may not fit your project. Especially not work when you require horizontal scrolling. But problem is solved.
&:after {
content: " ";
position: absolute;
top: 0; right: 6px;
width: 99999%;
height: 100%;
background: red;
z-index: -1;
}
Parent of this element ofcourse require position: relative. In example this is done by bootstrap.
Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This one has the added benefit of the columns always being equal height:
* { margin:0; padding:0; box-sizing: border-box; }
.grid {
display: flex;
}
.col-3 {
flex: 1 1 320px;
border-right: 20px solid #fff;
}
.col-2-3 {
flex: 1 1 640px;
}
.col-3 {
display: flex;
justify-content: flex-end;
}
.col-3>div {
padding: 20px;
flex: 0 1 300px;
}
.col-2-3>div {
display: flex;
justify-content: flex-start;
}
.col-2-3>div>div {
flex: 0 1 640px;
padding: 20px;
}
.red { background: #f00; color: #fff; }
.green { background: #0f0;}
.black { background: #000; color: #fff;}
<div class="grid">
<div class="col-3 red">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
</p>
</div>
</div><!-- col -->
<div class="col-2-3 green">
<div class="black">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
</p>
</div>
</div><!-- .black -->
<div class="green">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
</p>
</div>
</div><!-- .green -->
</div><!-- .col -->
</div><!-- .grid -->
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>
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 */
}