This is a fairly basic HTML/CSS question, and I'm sorry I'm having to ask this here (I searched my best!). I've written the following HTML and CSS code, and while the header section is separated by a neat 20 pixels from the article and aside sections, the footer is being separated by only 10 px. In fact, irrespective of the margin I set for the footer, the separation remains 10px. What am I doing wrong?
It would be amazing if you could test this code out in a browser to see what I mean. I'm also inserting a link to a picture below of the skewed margins between the article / aside section and the footer section.
http://cl.ly/image/3M2u1L0x2C0x
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My Grey Boxes</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="wrapper">
<header></header>
<article></article>
<aside></aside>
<footer></footer>
</div>
</body>
</html>
CSS Code
#wrapper {
margin: auto;
width: 940px;
}
body {
background-color: #fafafa;
}
header {
height: 120px;
width: 920px;
display: block;
margin: 10px 10px;
position: relative;
background-color: #c6c6c6;
}
article {
height: 740px;
width: 600px;
margin: 10px 10px;
float: left;
position: relative;
background-color: #c6c6c6;
}
/* Keep scrolling! */
aside {
height: 740px;
width: 300px;
margin: 10px 10px;
float: right;
position: relative;
background-color: #c6c6c6;
}
footer {
height: 120px;
width: 920px;
display: block;
margin: 10px 10px; /* Why is this being ignored? */
background-color: #c6c6c6;
position: relative;
clear: both;
}
Any help will be greatly appreciated! I'm sorry if I'm not following all the community guidelines here - this is my first time posting on StackOverflow, and I'll pick things up soon! Thanks ahead! :)
You need to clear the floats before you get to the footer. Changing your HTML to this will work:
<div id="wrapper">
<header></header>
<article></article>
<aside></aside>
<div style="clear:both;"></div>
<footer></footer>
</div>
Related
This question already has answers here:
Footer at bottom of page or content, whichever is lower
(5 answers)
How to make footer div always be at the bottom of page content
(2 answers)
Closed 2 years ago.
I want the footer at the bottom of the page at all times. However, when I use position: absolute;, it goes to the bottom of the page but it covers content that doesn't fit in the page. This is the current CSS styling:
.footer {padding: 2px;
background-color: #eeeeee;
color: #0f0f0f;
text-align: justify;
font-size: 20px;
width: 99%;
bottom: 10px;
border-radius: 10px;}
Can anyone help me? Thanks
Hii Fire Lost check this solution. in this solution, I have set header and footer position: relative and both elements will be display top of the page and bottom of the page
you need to set fix height in the main tag. I have used 80px of header and 60px of the footer.
i have applied this min-height: calc(100vh - 140px); css in wrapper element.
if this answer is valuable for you. plz upvote me.
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
position: relative;
height: 80px;
width: 100%;
background: #333333;
text-align: center;
font-size: 22px;
color: #fff;
padding: 25px 0;
}
main {
position: relative;
min-height: calc(100vh - 140px);
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
}
footer {
position: relative;
height: 60px;
width: 100%;
background: #333333;
text-align: center;
font-size: 22px;
color: #fff;
padding: 18px 0;
}
</style>
<head>
<body>
<header><p>Header</p></header>
<main><p>Body Content</p></main>
<footer><p>Footer</p></footer>
</body>
<html>
HTML
<div class="wrapper">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
CSS
.wrapper {
height: 100vh;
}
.footer {
border: 1px solid green;
position: fixed;
bottom: 0;
width: 100%;
height: 5vh;
}
Please try this code, To How to allows make footer on the bottom but not letting it cover content
<html>
<head>
<style>
#footer {
position: fixed;
padding: 10px 10px 0px 10px;
bottom: 0;
width: 100%;
/* Height of the footer*/
height: 40px;
background: grey;
}
</style>
<head>
<body>
<center>
<div id="container">
<h1>Hello</h1>
<h1>Good Morning</h1>
<h1>Your footer in below</h1>
<h1>Thank you</h1>
<div id="footer">This is a footer.
This stays at the bottom of the Web page.
</div>
</div>
</center>
</body>
<html>
I've been doing the codeacademy HTML/CSS course and understood it fine right up until the end where I had to 'Build a Resume'. I've compared my code to the example at the start of the exercise but I just can't understand why my .right class is sitting at the far right and not lining up correctly. Also the header and the footer are the same width (95%) but the footer is noticeably smaller and doesn't stretch as far across the screen as the header.
Any idea's?
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<title></title>
</head>
<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
div {
border-radius: 5px;
}
#header {
width: 95%;
height: 50px;
background-color: lightblue;
position: fixed;
z-index: 1;
}
.left {
position: relative;
background-color: lightgreen;
height: 400px;
width: 20%;
float: left;
margin-top: 60px;
}
.right {
position: relative;
background-color: lightgray;
height: 400px;
width: 74%;
float: right;
margin-top: 60px;
margin-bottom: 10px;
}
#footer {
position: relative;
background-color: gray;
width: 95%;
height: 60px;
clear: both;
}
your .right is sitting at the far right because of float: right;, telling the div to float to the right until it hits something(screen/browser edge or another div). If you want it to connect snugly against your left div, try float: left;, which will float that div towards and against your existing .left div.
Here's a simple puzzle that's been frustrating me for a while today:
Consider this page markup:
<head>
<style type="text/css">
#wrapper { overflow: hidden; }
#content { width: 750px; height: 100px; background: orange; }
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Foo bar</div>
</div>
</body>
How can I get div#content centered in the page regardless of viewport width?
I've tried a variety of tricks (including text-align: center; display: inline-block;) and absolute positioning, but with all of them the div#content is left-aligned when the browser window is brought under 750px in width.
I've seen a few high-profile websites do this in the past. For example on Apple.com when they advertised the new retina iPad: the iPad pictured was a very wide image that extended past the main page area (note it was not a CSS background image of the <body> element), but it didn't cause scrolling when the browser window only fit the main page content. Unfortunately I can't seem to find any existing sites that do this so I can't find a reference.
Thanks.
Is this it? Take a look -> http://jsfiddle.net/joplomacedo/CkvuG/
HTML
<div id="page">
<div id="main">
<div id="extended-out"><img src="http://myfreeipad.us.com/wp-content/uploads/2011/10/ipad.png" /></div>
</div>
</div>
CSS
#page {
overflow: hidden;
min-width: 200px; /*same as #mains width*/
}
#main{
position: relative;
height: 500px;
width: 200px;
margin: 0 auto;
background-color: lightgreen;
}
#extended-out {
height: 200px;
margin: 0 -100px;
background: indianred;
border: 1px solid red;
}
#extended-out img {
width: 100%; height: 100%;
}
http://jsfiddle.net/CNNcV/
<head>
<style type="text/css">
#wrapper { overflow: hidden; }
#content { width: 750px; height: 100px; background: orange;
margin:0px auto;
width:100%;}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Foo bar</div>
</div>
</body>
Is that what you're looking for?
Add margin: auto to this,
#content { width: 750px; height: 100px; background: orange; margin: auto}
I'm trying to make some decoration outside the main content div,
that would be getting hidden if the window size is small.
I thought for a while and came up with the following markup, (you can copy paste and see it),
and that's best I could think of right now. The problem however is that because I used percentage margins, the decoration gets unstable and shaky while resizing, and sometimes is even stepping on the content div.
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
background-color: yellow;
}
div.content {
display: block;
width: 958px;
height: 400px;
background-color: #CCC;
margin: 0px auto;
}
div.wrap {
margin: 0px auto;
min-width: 958px;
max-width: 1058px;
overflow: hidden;
position: relative;
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
div.left, div.right {
background-image: url(http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg);
width: 50px;
display: block;
height: 50px;
bottom: 0px;
position: absolute;
}
div.left {
right: 479px;
margin-right: 50%;
}
div.right {
left: 479px;
margin-left: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="content">
<-- Content
</div>
</div>
</body>
</html>
So, could you recommend guys for some other way around without using percentage margins, to make it more flexible..? Thanks!
EDIT:
This is what happens in Google Chrome on resize:
As the browser has to re-calculate the margins based on the parent's width changes, this is kind of expected behaviour.
If you want to keep content centralized on the screen without playing with max-width, min-width and margins as percentage, and there won't be any element that should be affected by the .wrap position in the document flow, you could do something like this:
div.wrap {
width: 1058px;
overflow: hidden;
position: absolute;
left: 50%;
top: 0;
margin-left: -529px; /* 1058/2 * -1 */
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
This will centralize the content horizontally in every situation.
Hope it helps.
Clear your floats:
<div>
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<style>
.clear{clear:both;}
</style>
This should be a pretty trivial issue, but it's causing me a bit of a headache.
I have an html layout, summarized with the relevant code below. Basically I have the <section> and <aside> acting as the main content, and the right handed content. I am trying to make sure they will always behave in this manner, regardless of any kind of funky boundaries caused by borders, margins, padding, etc. The solution seemed to be simply setting them to have absolute and relative positioning.
This did achieve my desired result, but I am having trouble with the underlying content. The <article> does not stretch to the right height. Since the height is not always determinable at code-time, giving it a set height is not an option. My intended goal is that the underlying <article> background will stretch to accommodate no matter how high either of the <section> or <aside> panes become. Any ideas?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
.container { margin: 0px auto; width: 960px; position: relative }
article {
overflow: hidden;
background-color: Black;
height: auto;
}
section {
width: 675px;
position: relative;
left: 0px;
overflow: hidden;
margin: 10px;
height: 300px;
background-color: Aqua;
}
aside {
width: 260px;
position: absolute;
right: 0px;
top: 0px;
overflow: hidden;
margin: 10px;
height: 500px;
background-color: Fuchsia;
}
</style>
</head>
<body>
<div class="container">
<article>
<section>
</section>
<aside>
</aside>
</article>
</div>
</body>
</html>
As requested, here is the code with faux columns:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Faux column example</title>
<meta charset="UTF-8" />
<style type="text/css">
html, body {
height: 100%;
}
.container {
margin-bottom: 2em;
}
article {
background: #000 url(http://imaginekitty.com/cssExamples/oog.gif) repeat-y;
border: solid 10px #000;
display: block;
margin: 0 auto;
min-height: 100%;
width: 945px;
overflow: hidden;
}
section {
display: block;
float: left;
overflow: hidden;
width: 668px;
}
aside {
float: left;
margin-left: 20px;
overflow: hidden;
width: 255px;
}
</style>
</head>
<body>
<div class="container">
<p>There is no use of absolute or relative positioning here.</p>
<article>
<section>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</section>
<aside><p>asdf</p>
</aside>
</article>
</div>
<div class="container">
<article>
<section>
<p>asdf</p>
</section>
<aside><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</aside>
</article>
</div>
</body>
</html>
The reason I mentioned that absolute positioning is, in my opinion, inappropriate in this situation is that it removes elements from the normal document flow which will most likely cause issues with other elements on the page. At best, it's just unnecessary. At worst, you'll pull your hair out trying to figure out problems. :)
A good article on the subject: http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/