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.
Related
I have this problem when i want to put some text in my body or place something like a div or a section there , the text goes above the navbar which is in header.I tried to put a margin top to the body but it only made a bigger gap between the top.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.logo {
float: left;
height: auto;
width: auto;
}
body{
background-color: #444064;
margin-top:10ex;
}
nav {
float: right;
margin-bottom: 50px;
}
nav ul {
margin: 0,auto;
padding: 0,auto;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 2ex;
padding: 5ex;
}
nav a {
color: #ffffff;
font-weight: 600;
font-size: 4ex;
text-decoration: none;
}
nav a:hover {
color: #a34963;
}
section{
text-align: center;
margin-top: 5ex;
}
h1{
font-size: xx-large;
}
<html>
<div id="wrapper">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="testsite.css">
</head>
<header>
<div id="menu">
<img src="Logo.png" alt="logo" class="logo">
<home>
<nav class="menu">
<ol>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Contact</li>
</ol>
</nav>
</home>
</div>
</header>
<body>
Hello world
</body>
</div>
</html>
Please help me
You have many issues with your code as you have an invalid HTML structure. however the issue you have is: nav { float: right; } that causes you navbar to float and as such the content can flow around the nav element and be displayed above. If you remove the line it not happen anymore.
However, I strongly recommend to get back to some decent tutorials and start at the basics. Like I said your HTML structure is an invalid mess. Some css declarations are incorrect/unnecessary as well (e.g. webkit prefix for box-sizing). Also don't use float as styling technique. Use a modern solution like flexbox or css-grid.
Last but not least, this is how the html structure should look like.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logo {
float: left;
height: auto;
width: auto;
}
body {
background-color: #444064;
margin-top: 10ex;
}
nav {
margin-bottom: 50px;
}
nav ul {
margin: 0 auto;
padding: 0 auto;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 2ex;
padding: 5ex;
}
nav a {
color: #ffffff;
font-weight: 600;
font-size: 4ex;
text-decoration: none;
}
nav a:hover {
color: #a34963;
}
section {
text-align: center;
margin-top: 5ex;
}
h1 {
font-size: xx-large;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="testsite.css">
</head>
<body>
<header>
<div id="menu">
<img src="Logo.png" alt="logo" class="logo">
<home>
<nav class="menu">
<ol>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Contact</li>
</ol>
</nav>
</home>
</div>
</header>
<div id="wrapper">
Hello world
</div>
</body>
</html>
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 3 years ago.
I created a nav bar but my border-bottom not working , it is working as a border-top instead. I am trying to create a nav bar like twitter for learning. It will be a great help if someone helps me to solve it
*{
margin: 0px;
padding: 0px;
}
.header{
width: 100%;
height: auto;
border-bottom: 1px solid #dae0e4;
}
.container{
width: 90%;
margin: 10px auto;
}
.main-nav{
width: 50%;
float: left;
}
.second-nav{
float: right;
}
ul {
list-style-type: none;
overflow: hidden;
}
li {
float: left;
font-size: 120%;
}
li a {
color: #6f7d87;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.body{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<title>Twitter</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="page">
<div class="header">
<div class="container">
<div class="main-nav">
<ul>
<li>Home</li>
<li>Notification</li>
<li>Messages</li>
</ul>
</div>
<div class="second-nav">
<ul>
<li>Search Bar</li>
<li>Profile</li>
<li>Tweet</li>
</ul>
</div>
</div>
</div>
<div class="body">
<p>Something</p>
</div>
</div>
</body>
</html>
I expect the border to show the lining downside but it is showing it upside, I couldn't find the solution anywhere on the web and also I was unable to fix it.
The border did appear, but visually on top of the header.
This is because the child elements of .header are floated and hence the height of .header becomes zero. To avoid this, add a clearfix to .header. Here I've used overflow:auto to fix it.
* {
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
height: auto;
border-bottom: 1px solid #000;
}
.container {
width: 90%;
margin: 10px auto;
overflow: auto;
}
.main-nav {
width: 50%;
float: left;
}
.second-nav {
float: right;
}
ul {
list-style-type: none;
overflow: hidden;
}
li {
float: left;
font-size: 120%;
}
li a {
color: #6f7d87;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.body {
clear: both;
}
<div class="page">
<div class="header">
<div class="container">
<div class="main-nav">
<ul>
<li>Home</li>
<li>Notification</li>
<li>Messages</li>
</ul>
</div>
<div class="second-nav">
<ul>
<li>Search Bar</li>
<li>Profile</li>
<li>Tweet</li>
</ul>
</div>
</div>
</div>
<div class="body">
<p>Something</p>
</div>
</div>
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/
i have searched about and can't seem to find the answer I am looking for.
I want to know how to move my div down below my fixed header.
#import url(http://fonts.googleapis.com/css?family=Oswald);
body {
width: 100%;
margin: auto;
}
.container {
width: 75%;
margin: 0 auto;
}
.header {
background: #6396bc;
width: 100%;
top: 0;
position: fixed;
}
.logo {
float: left;
font-family: "Oswald", sans-serif;
font-size: 15px;
margin-left: 15%
}
a {
text-decoration: none;
color: white;
}
li {
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
font-family: "Oswald", sans-serif
}
.nav {
float: right;
margin-right: 15%
}
<!DOCTYPE html>
<html>
<head>
<title>team Zeus | Home</title>
<link rel="stylesheet" href="../stylesheets/styles.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1>team Zeus</h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Page</li>
<li>Another page</li>
<li>1 other page</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
<p>I copied and pasted some article from Wikipedia in here, you could do that too (to test out the header at the top)</p>
</div>
</body>
</html>
I think it is something to do with the containers, because when I try and resize them with width, it just messes the full page around. I cannot figure it out
Thanks
You mean just move the content down below the header? If that's what you want just position the content div like this:
.div {
position:relative;
top: 100px;
}
i think this will definately help
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;
}