I want to give a top-margin value to the element p inside the #footer, but the clearfix does not work and the margin keep collapsing outside its parent element, why? code below, the #fotter and the clearfix class is at the final of the code thx.
<!DOCTYPE html>
<html>
<head>
<title>CSS Challenge 1</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Shakespear.net</h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Writings</li>
<li>Sonnets</li>
<li>Life Story</li>
<li>About Shakespear.net</li>
</ul>
</div>
<div id="sidebar">
<h2>Sonnet Index</h2>
<ul>
<li>Sonnet #1</li>
<li>Sonnet #6</li>
<li>Sonnet #11</li>
<li>Sonnet #15</li>
<li>Sonnet #18</li>
</ul>
</div>
<div id="content">
<h1>Shakespeare's Sonnet #18</h1>
<p>This is one of the most famous of the sonnets. It is referenced
in the film Dead Poets Society and gave names to the band The
Darling Buds and the book and television series The Darling Buds
of May. Read it and weep!</p>
<ul>
<li>Shall I compare thee to a summer's day?</li>
<li>Thou art more lovely and more temperate:</li>
<li>Rough winds do shake the darling buds of May,</li>
<li>And summer's lease hath all too short a date:</li>
</ul>
</div>
<div id="footer" class="clearfix">
<p class="copyright">See the
<a href="http://en.wikipedia.org/wiki/Shakespeare%27s_Sonnets">
Shakespeare's sonnets</a> Wikipedia article for more information
</p>
</div>
</div>
</body>
</html>
CSS
html, body, #wrap {
height: 100%;
}
ul {
margin: 0;
padding: 0;
}
#wrap {
max-width: 450px;
margin: auto;
}
/************ header ************/
#header {
background-color: #B5B67D;
height: 16%;
}
#header h1{
margin: 58px 34px 0;
float: right;
font-size: 21px;
}
/************ nav ************/
#nav {
background-color: #689D59;
min-height: 4%;
border-bottom: 2px dashed white;
box-sizing: border-box;
}
#nav li{
display: inline-block;
list-style: none;
font-size: 10px;
margin: 0 4px 0 14px;
}
#nav a{
text-decoration: none;
}
/************ sidebar ************/
#sidebar {
float: right;
background-color: #B5B67D;
width: 23%;
min-height: 70%;
}
#sidebar h2 {
font-size: 8px;
margin-left: 5px;
}
#sidebar li {
font-size: 10px;
margin-left: 20px;
}
/************ content ************/
#content {
float: right;
background-color: #506449;
width: 77%;
min-height: 70%;
}
#content h1{
font-size: 19px;
margin: 18px 0 0 10px;
}
#content p{
font-size: 9px;
margin: 10px
}
#content li{
list-style: none;
font-size: 12px;
text-align: center;
}
/************ footer ************/
#footer {
background-color: #689D59;
min-height: 10%;
clear: both;
font-size: 12px;
}
#footer p{
text-align: center;
margin-top: 351px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
Your clearfix puts the clear after the footer. You want the clear before it. What you have now will only prevent the margin of the next element collapsing.
Place the clearfix on the last element that should obey the floats. In your case, this will work:
<div id="content" class="clearfix">
Please try this:
Use padding instead of margin:
#footer p{
text-align: center;
padding-top:20px
}
A clearfix approach is meant to clear an element's children. You are trying to apply it to the footer element, which is not what is floated. You can try a few things:
Wrap the sidebar and content sections in their own div and apply clearfix to THAT div.
https://jsfiddle.net/va9q1mw8/1/
Scrap the clearfixes altogether and add <div style="clear:both"></div> immediately after the content div, but before the footer
https://jsfiddle.net/va9q1mw8/
Related
when I try to add in h3 onto the website it just stay at the top I tried to use position, top,left in the CSS but it doesn't want to response to it. I also tried to use a gallery template from w3schools to see if it will let me move the gallery but still no luck. I have tried to research this but I had no luck at all. sorry for the long code.
<html>
<link rel="stylesheet" href="sheet.css">
<head>
<title> Jon Barton </title>
</head>
<header>
<ul class= "nav-men">
<li> Gallery </li>
<li>About me </li>
<li> Contract me</li>
</ul>
<h1><span> Software Developer </span> </h1>
<p class = "kicker" >Ideas // Desinger // Implement </p>
</header>
<body>
<h3> Work</h3>
<footer>
<div class = "footer">
<div class ="content-wrap">
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
<p class = "copyright"> All content copyright 2016</p>
</div>
</div>
</html>
The css is a bit long sorry and some of it is just repeated.
#css
header {
background: url(.//277H.jpg) ;
text-align: center;
width: 100%;
height: auto;
position: absolute;
}
.nav-men li {
display:inline;
margin-left: 100px ;
}
.nav-men ul{
margin: 30px 30px 0px 0px;
padding: 0;
list-style-type: none;
text-align: center;
text-decoration: none;
}
.nav-men a {
color:white;
}
.nav-men a:hover, a:visited, a:link, a:active
{
text-decoration: none;
}
h1 {
font-size: 60px;
color: white;
letter-spacing: 0.05em;
text-transform: uppercase;
text-align: center;
font-weight: 700;
margin-bottom: 20px;
}
span {
display: inline-block;
padding: 0.2em 0.6em ;
border: white solid 10px;
}
.kicker {
text-align: center;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
color: white;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.alt-selction {
background: black;
}
.thumb-container {
max-width: 980px ;
margin: 0px auto ;
padding-bottom: 100px;
}
.thumb-unit {
display:block;
width: 25%;
height: 150px;
float:left ;
}
.footer {
margin: 30px;
background: url(../277H.jpg) ;
width: 100%;
height: 100px;
clear: both;
bottom: -53px;
left:-30;
right:0;
position: absolute;
background-size: cover;
float: left;
}
.content-wrap {
float: left;
}
li {
display:inline;
margin-left: 100px ;
}
ul{
margin: 30px 30px 0px 0px;
padding: 0;
list-style-type: none;
text-align: center;
text-decoration: none;
}
a {
color:white;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
}
That's because the position of the <header> and footer is absolute.
position:absolute positioned an element relative to the nearest positioned ancestor instead of positioned relative to the viewport, like fixed.(from here)
Remove the position:absolute from the class header & .footer. Then it will let you put anything between them.
Use this tutorial to have a sticky footer:
[https://css-tricks.com/snippets/css/sticky-footer/]
After just add div at the top as a Header and you can add as many content between them after.
I would recommend first cleaning up a bit of your HTML to put your header and footer inside the body element, and closing your body element properly as otherwise you will most probably run into other problems.
See this fiddle for an example:
https://jsfiddle.net/jowxoaca/1/
Also, as jonju mentioned, removing the position:absolute for header and footer would fix your ordering issue.
I am new to both stackoverflow and web development, so your patience is greatly appreciated. :)All of the HTML and CSS minus certain irrelevant parts can be found at the very bottom.
When styling HTML elements with CSS, I encountered a problem with floating elements and their parent element. The divs with the ids nav and main are contained within the div of the id content. The nav contains an unordered list, which will serve as a basic navigation bar of sorts, while main contains paragraphs and "meat" of the page. I wanted the paragraphs to sit on the right side of the navigation bar, so I decided to float them both. The CSS below was applied to these elements.
#nav {
width: 100px;
float: left;
}
#nav ul {
list-style-type: none;
padding: 0px;
}
#main {
width: 600px;
float: right;
}
When I run my code in a browser, everything looks fine. The elements are positioned in their proper places. However, under closer examination using an examiner tool, my parent element with the id content has collapsed.
I unfortunately cannot post the image due to my lack of reputation. Hopefully this is enough information.
I have already searched the web for the problem, and it seems quite common among newbies such as myself. I read an article on css-tricks.com, and I attempted their methods for solving this problem. Unfortunately, this was to no avail. After further searching, I have been left confused. I would like to apologize for the broadness of this question. Thank you all for your time and knowledge.Here is the HTML..
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="../css/refreshstyle.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>My Website</h1>
</div>
<div id="content">
<div id="nav">
<h3>Navigation</h3>
<ul>
<li><a class="home" href="">Home</a></li>
<li><a class="about" href="">About</a></li>
<li><a class="contacts" href="">Contact</a></li>
</ul>
</div>
<div id="main">
<h2>Home Page</h2>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
<div id="footer">
Copyright ©2014
</div>
</div>
</body>
Below is the CSS...
body {
background-image: url('congruent_pentagon.png');
}
#container {
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
border: 2px solid #a1a1a1;
border-radius: 25px;
}
#header {
background-color: #66CCFF;
color: white;
text-align: center;
padding: 10px;
border-bottom: 2px solid #a1a1a1;
border-top-right-radius:23px;
border-top-left-radius: 23px;
}
h1, h2, h3 {
margin:0;
}
#nav {
width: 100px;
float: left;
}
#nav ul {
list-style-type: none;
padding: 0px;
}
a {
text-decoration: none;
color: #66CCFF;
}
#nav .home {
font-weight: bold;
}
#main {
width: 600px;
float: right;
}
#content {
padding: 10px;
}
#footer {
clear: both;
background-color: #B1F6CB;
padding: 10px;
margin: 0px;
text-align: right;
border-top: 2px solid #a1a1a1;
border-bottom-right-radius: 23px;
border-bottom-left-radius: 23px;
}
In this case you can use the css clearfix class. Define the clearfix class in your css:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* ie 6/7 */
}
Use the clearfix class on the parent element, in your case on the #content element:
<div id="content" class="clearfix">
[...]
</div>
Find more infos about clearing floats in this blog post.
Btw: welcome on stackoverflow :)
I have a practice website set up, but the sidebar keeps going under the footer or mixing with it. Here is all the code (at least for one page) and the css later. I just need a quick help, I know a fair share but not much, so please help.
<!doctype html>
<html>
<head>
<meta charset-"utf-8">
<title>Polyverse</title>
<link rel="stylesheet" href="style.css">
</head>
<!--main part-->
<!--header-->
<body>
<div id="container">
<div>
<body background="images/bg.jpg"></div>
<div id="header">
<h1><center><img src="images/header.png" width="960" height="120" alt=">/center></h1>
<!--navbar-->
<nav id="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Articles</li>
<li>Downloads</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<!--main content-->
<div id="sidebar">
<p>And my sidebar stuff here.</p>
</div>
<div id="main">
<h1><p>About</p></h1>
<article><p>All my text goes here</p></article>
</div>
<!--footer-->
<div id="footer">
<address><p align=right>Last updated the 24th of July 2013<br> Polyverse copyright</p>
</address>
</div>
</div>
</body>
</html>
and the css:
html,
#body {
width: 960px;
margin: 25px auto;
padding-left: 1em;
font-family: Oswald, "Times New Roman",
Times, sans-serif;
height:100%;
}
#container {
position: relative;
padding-bottom: 50px;
min-height: 100%;
margin: 0 auto 0 auto;
}
#navbar {
width: 960px;
}
#navbar ul {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
#main {
float: left;
width: 600px;
}
#sidebar {
float: right;
width: 200px;
}
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted
}
p {
width: 800px;
margin: 25px auto;
}
#footer: {
height: 50px;
width: 960px;
position: absolute;
bottom: 0;
}
So I was just wondering, how would I fix it?
Well, besides the fact that your HTML is full of errors, I would recommend making container a class and add it after the top container. And yes clear your floats
Like so ... (also cleaned up your HTML) ... http://jsfiddle.net/feitla/TC73U/
<div class="container">
<div id="footer" class="clearfix"> <address><p align="right">Last updated the 24th of July 2013<br/> Polyverse copyright</p>
</address>
</div>
</div>
If you can get away with removing position: absolute all you'll need to do is clear your footer:
#footer {
clear: both;
}
both will prevent elements from floating either left (such as #main) or right (such as #sidebar).
If you just wanted to clear #sidebar and not #main, use clear: right;
I'd recommend fixing all the errors in the HTML code before proceeding with fixing the CSS.
This might be a really basic css question but I tried to create my fluid layout following instructions from a book, so far my header and nav bar seems to be in the place but the content div isn't, also I'd like to make my content height flexible because it's for a dynamic web app so the footer should be positioned below it accordingly. Ok so here's the mockup of what id like to achieve
<body>
<div id="header">
<h1>LOGO</h1>
<ul>
<li> Home </li>
<li> Logout </li>
</ul>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>My account</li>
<li>Help</li>
<li>Contact Us </li>
</ul>
</div>
<div id="personalised">
<p>Hey there</p>
</div>
<div id="content">
</div>
<div id="footer">
<p>© TEST</p>
</div>
</body>
</html>
here's my css code:
body{
width: 90%;
margin: 0 auto;}
#content {
overflow: auto;
height: 29em;}
#header{
height: 60px;
overflow: hidden;
}
#header h1 {
float: left;
}
#header ul {
float: right;
}
#header li {
display: inline;
padding: 0.5em;
}
#personalised p {
float: left;
width: 20%;
margin-top:5%;}
#navigation{
margin: 1%;}
#navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
padding: 0px;
list-style: none;
}
div#navigation {
float:right;
position: absolute;
top: 10%;
right: 5%;
}
#navigation ul li {
display: block;
position: relative;
float: left;
}
#navigation li ul { display: none; }
#header, #footer, #navigation, #personalised {
margin: 1%;
}
#footer {
padding: 0.5em 0;
font-family: Arial, Verdana;
font-size: 10px;
text-align: center;}
I know this is long, but I'd really appreciate your help. Thanks in advance
Try working on your formatting first. (It's not too bad, but can use improvement.) That's one of the biggest benefits to you is code that you can read. You can look through what I've done here and play with what you like. http://jsfiddle.net/mPH8X/
<head>
<style>
div {
border: 1px dashed #FF0000;
}
body {
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
#header {
min-height: 60px;
overflow: hidden;
margin: 1%;
}
#header h1 {
float: left;
}
#header ul {
float: right;
}
#header li {
display: inline;
padding: 0.5em;
}
#navigation{
margin: 1%;
float: right;
}
#navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
padding: 0px;
margin: 0px;
list-style: none;
}
#navigation ul li {
margin: 0px;
padding: 0px;
display: block;
position: relative;
float: left;
}
#navigation li ul {
display: none;
}
.body {
clear: both;
}
#personalised {
margin: 1%;
float: left;
width: 20%;
}
#content {
margin: 1%;
float; right;
min-height: 29em;
}
#personalised p {
margin: 0px;
padding: 0px;
}
#header, #footer, #navigation, #personalised {
}
#footer {
padding: 0.5em 0;
font-family: Arial, Verdana;
font-size: 10px;
text-align: center;
}
</style>
<body>
<div id="header">
<h1>LOGO</h1>
<ul>
<li> Home </li>
<li> Logout </li>
</ul>
<div class="clear"></div>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>My account</li>
<li>Help</li>
<li>Contact Us </li>
</ul>
<div class="clear"></div>
</div>
<div class="body">
<div id="personalised">
<p>Hey there</p>
<div class="clear"></div>
</div>
<div id="content">
</div>
</div>
<div id="footer">
<p>© TEST</p>
</div>
</body>
</html>
Edit: Looking at your content statement, you are looking for CSS's min-height. Min-height will set it to a minimum height and grow when necessary. overflow: auto; says if your content stretches past the maximum height, add a scrollbar.
I think the culprit is this:
#content {
overflow: auto;
height: 29em;}
You are explicitly setting the height of the content div. Try setting it to inherit.
Here is a fiddle where the container grows according to the number of elements in it:
http://jsfiddle.net/pUb6q/2/
Uses your layout. The changes are
#content {
border:1px solid black;
float: right;
overflow: auto;
height: inherit;
}
I have six links inside a 100% width DIV.
How can I stop my links from stacking on top of each other, moving, down, and disappearing as I shrink the size of my browser? I would like to have them remain inside the horizontal div.
Here is my code:
.nav {
width: 100%;
height: 84px;
float: left;
background: #333;
}
.logo {
width: 317px;
height: 84px;
float: left;
background: url('img/lifesign.png');
}
.navlink {
height: 84px;
font-family: 'open_sansbold';
color: #FFF;
text-align: center;
line-height: 84px;
padding-left: 22px;
padding-right: 22px;
float: right;
font-size: 80%
}
<div class="nav">
CONTACT
GET INVOLVED
Q+A
HOW IT WORKS
WHO WE ARE
<a class="logo" href="home.htm"></a>
</div>
Set a min-width on your .nav class.
.nav {
width: 100%;
height: 84px;
float: left;
background: #333;
min-width: 960px; /* or whatever width you need */
}
I think the ideal here would be to create a div of fixed width (id of 'page' below) to contain your nav and other page elements. I also took the liberty of cleaning up some of the structure of the nav itself, as well as some of the more unnecessary rules. I think a list is ideal here. You may want to reverse the order of it since you are floating right but otherwise it works great.
<html>
<head>
<style>
body { text-align: center; }
#container { width: 960px; margin: 0 auto; }
#nav { overflow: hidden; list-style: none; padding: 0; margin: 0; background: #333; }
#nav li { float: right; }
#nav li.logo { float: left; }
#nav li a { display: block; padding: 0px 22px; color:#FFF; background: #333; text-align:center; line-height:84px; font-family: 'open_sansbold'; font-size:80%; }
#nav li.logo a { width: 317px; height: 84px; background:url('img/lifesign.png') red; }
</style>
</head>
<body>
<div id="container">
<ul id="nav">
<li class="logo"></li>
<li>CONTACT</li>
<li>GET INVOLVED</li>
<li>Q+A</li>
<li>HOW IT WORKS</li>
<li>WHO WE ARE</li>
</ul>
<div id="main">
<!-- page content here -->
</div>
</div>
</body>
</html>