.col-xs-4{
margin: auto;
padding-left: 2em;
text-align: left;
display: inline-block;
clear: both;
}
h1{
text-align: center;
font-weight: bold;
}
h3{
color: #09423f;
}
p{
color: black;
}
#works{
max-width: 100%;
height: auto;
border: 0;
}
<h1>HOW IT WORKS</h1>
<div class="row">
<div class="col-xs-4">
<img src="img/create.svg" class="img-responsive" id="works" alt="create">
<h3><b>CREATE YOUR IDEAS</b></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae purus nibh. Vestibulum vehicula vitae tellus non tincidunt. Aenean magna ipsum, ultricies ac ante non, maximus suscipit lectus. Donec tincidunt velit augue, in egestas est ultrices eget. Suspendisse commodo mi nulla, sed condimentum purus lobortis ut.</p>
</div>
<div class="col-xs-4">
<img src="img/sell.svg" class="img-responsive" id="works" alt="sell">
<h3><b>POST IT</b></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae purus nibh. Vestibulum vehicula vitae tellus non tincidunt. Aenean magna ipsum, ultricies ac ante non, maximus suscipit lectus. Donec tincidunt velit augue, in egestas est ultrices eget. Suspendisse commodo mi nulla, sed condimentum purus lobortis ut </p>
</div>
<div class="col-xs-4">
<img src="img/earn.svg" class="img-responsive" id="works" alt="earn">
<h3><b>EARN IT</b></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae purus nibh. Vestibulum vehicula vitae tellus non tincidunt. Aenean magna ipsum, ultricies ac ante non, maximus suscipit lectus. Donec tincidunt velit augue, in egestas est ultrices eget. Suspendisse commodo mi nulla, sed condimentum purus lobortis ut</p>
</div>
</div>
I want to try to align all three images with caption in one line. I try float: left but all three didn't work. I try other way too but it remains same. Please help me. You give me right answer I would click green tick.
add this
.col-xs-4{
width: 33.33%;
}
.col-xs-4 img{
text-align: center;
margin: 0 auto;
}
You haven't attached your bootsrap CDN's though you was using Bootstrap like col-xs-4, attach it and then you Boxes will align perfectly horizontal
Bootstrap CDN attach this at the <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
and remove following class which is unnecessary
.col-xs-4{
margin: auto;
padding-left: 2em;
text-align: left;
display: inline-block;
clear: both;
}
CodePen: http://codepen.io/anon/pen/graKZe
I have attached a bootstrap cdn in your code.
And because of the clear:both in your (.col-xs-4) inside CSS you could not align them horizontally.
plunker copy attached: enter link description here
.col-xs-4{
margin: auto;
padding-left: 2em;
text-align: left;
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
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>
In the follwing example the text goes out of the box. And when I reduce the size of the borowser the size of the boxes shring resposively but the text becomes mixed and unorganized. How can solve this?
<html>
<head>
<meta charset="utf-8">
<title>This is an email template</title>
<style>
body {
background-color: rgba(79, 183, 227, 0.4);
direction: rtl;
}
body * {
font-family: Tahoma;
}
a:link {
text-decoration: none;
margin-right: 25px;
color: #46B1F9;
}
#wrap {
background-color: #e0f2f6;
margin: auto;
width: 75%;
padding: 15px;
border: 1px solid grey;
}
.item {
border: 1px solid #95A5A6;
border-radius: 5px;
margin-bottom: 25px;
width: 60%;
display: inline-block;
}
.item p {
font-size: 1em;
}
.item img {
float: left;
width: 30%;
}
.item .notice {
text-align: center;
float: right;
padding-top: 25px;
padding-right: 25px;
width: 50%;
height: 1em;
}
/*clearfixes*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
</style>
</head>
<body>
<div id="wrap">
<div style="padding:15px;">
<div class="item clearfix">
<div class="notice">
<p><strong>Lorem ipsum</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sollicitudin aliquet. Fusce dolor leo, egestas non nisi in, aliquam ullamcorper diam. Quisque placerat tortor in porta egestas. Aenean et elementum purus. Nunc eget nulla blandit, volutpat libero non, finibus purus. Vivamus vitae tellus at risus commodo varius.</p>
</div>
<img src="http://s14.postimg.org/wqzq39iht/image.jpg" alt="" />
</div>
<div class="item clearfix">
<div class="notice">
<p>
<strong>اLorem ipsum</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sollicitudin aliquet. Fusce dolor leo, egestas non nisi in, aliquam ullamcorper diam. Quisque placerat tortor in porta egestas. Aenean et elementum purus. Nunc eget nulla blandit, volutpat libero non, finibus purus. Vivamus vitae tellus at risus commodo varius.</p>
</div>
<img src="http://s10.postimg.org/y4kk17q21/image.jpg" alt="" />
</div>
<div class="item clearfix">
<div class="notice">
<p><strong>Lorem ipsum</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sollicitudin aliquet. Fusce dolor leo, egestas non nisi in, aliquam ullamcorper diam. Quisque placerat tortor in porta egestas. Aenean et elementum purus. Nunc eget nulla blandit, volutpat libero non, finibus purus. Vivamus vitae tellus at risus commodo varius.</p>
</div>
<img src="http://s3.postimg.org/xca6ju1kj/image.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you are trying to expand the block by content, removing height from .item .notice should fix the issue.
In all cases your text will overflow the box , so you should add overflow:scroll to notice class
Depends on what you are trying to do.
If the boxes must be a fixed height there are couple of different strategies.
The easiest thing to do is to turn off the height restriction to the notice class. However, this will reflow your document and push everything down.
On the other hand, if you want to keep the current layout, I cannot provide you a unilateral decision as the padding, height and overflow will conflict with each other on this element.
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 */
}
This is driving me crazy. I'm trying to get the footer div to be at the bottom of the page even if the main content doesn't fill the height of the browser. The below code works except for when I shrink the browser up and then the footer div overlaps the wrapper div, then the scroll bar appears. I want it to bump up against the wrapper div like most sites including this one. What am I doing wrong?
<html>
<head>
<style>
body { color:#000; margin: 0; height: 100%; }
#wrapper {min-height: 100%; height: auto !important; height: 100%; background:#ff0000;
margin: 0 auto -4em; text-align: left; width: 100%; }
#header { width: 100%; height: 80px; }
#content { width: 100%; background:#00ff00; }
#footer { background:#0000ff; height: 4em; }
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
some menus;
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac eros diam, nec ultrices nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed id ipsum libero. Sed ultricies orci ut magna vulputate eu congue justo condimentum. Phasellus a convallis ipsum. Nam nec sapien eget massa porta tristique. Proin metus diam, imperdiet nec eleifend a, faucibus eget quam. Nunc non lacus sit amet lorem vehicula viverra ut vitae sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id tellus id ligula dictum consequat non ut ligula. Morbi interdum felis sed turpis sagittis vulputate.
</div>
</div>
<div id="footer">
© 2009 Somebody
</div>
</body>
</html>
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Check out this live example of how it works:
http://www.toonklaas24.ee/