I have to do a project in school using HTML and CSS and so far all am trying to do is the page layout and for whatever reason when I put the footer for my webpage it pops up on the top of the page instead of the bottom and I'm also having a bit of trouble trying to resize it to fix the whole page.
#wrapper {
width: 1024px;
height: 768px;
background-color: #E1E0E0;
}
#banner {
width: 1024px;
height: 220px;
background-color: #6E6A6A;
}
#menuTop {
width: 1024px;
height: 35px;
background-color: #ACAAAA;
}
#columnLeft {
width: 220px;
height: 438px;
background-color: #CBCACA;
float: left;
}
#columnRight {
width: 220px;
height: 438px;
background-color: #CBCACA;
float: right;
}
#content {
width: 584;
height: 438;
background-color: #E1E0E0;
margin-left: 220px;
}
#footer {
width: 1024px;
height: 75px;
background-color: #6E6A6A;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FinalHTML.css">
<title></title>
</head>
<body>
<div id="wrapper">
<div id="banner">
</div>
<div id="menuTop">
</div>
<div id="columnLeft">
</div>
<div id="columnRight">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
The height and width must have a unit, like px, dpi, etc.
#wrapper {
width: 1024px;
height: 768px;
background-color: #E1E0E0;
}
#banner {
width: 1024px;
height: 220px;
background-color: #6E6A6A;
}
#menuTop {
width: 1024px;
height: 35px;
background-color: #ACAAAA;
}
#columnLeft {
width: 220px;
height: 438px;
background-color: #CBCACA;
float: left;
}
#columnRight {
width: 220px;
height: 438px;
background-color: #CBCACA;
float: right;
}
#content {
width: 584px; // here you frogot the unit (px in this case)
height: 438px;
background-color: #E1E0E0;
margin-left: 220px;
}
#footer {
width: 1024px;
height: 75px;
background-color: #6E6A6A;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FinalHTML.css">
<title></title>
</head>
<body>
<div id="wrapper">
<div id="banner">
</div>
<div id="menuTop">
</div>
<div id="columnLeft">
</div>
<div id="columnRight">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
You forgot to type px after your height and width on the content div.
width: 584;
height: 438;
should be
width: 584px;
height: 438px;
#content {
width: 584;
height: 438;
background-color: #E1E0E0;
margin-left: 220px;
}
You forgot the "px"
Related
I want to create container that has two elements with colors given in the picture. The two are different divs and must stay side by side. How do I do it?
Here is my code:
<html>
<head>
<title>Testing</title>
<style>
.container{
width: 50%;
height: 50%;
}
.sidenav{
width: 25%;
height: 100%;
background-color: black;
}
.bgrnd{
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="sidenav">
</div>
<div class="bgrnd">
</div>
</div>
</body>
</html>
You didn't set a height on the body of the document so setting a percentage on the divs won't do anything until you do. You also needed to float the sidenav div.
.container {
width: 50%;
height: 50%;
}
.sidenav {
width: 25%;
height: 100%;
background-color: black;
float: left
}
.bgrnd {
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
html,
body {
height: 100%;
}
<div class="container">
<div class="sidenav">
</div>
<div class="bgrnd">
</div>
</div>
Your code Updated!
body, html{
padding:0px;
margin:0px;
height:100%;
}
.container{
width: 50%;
height: 50%;
}
.sidenav{
width: 25%;
height: 100%;
background-color: black;
float: left;
}
.bgrnd{
width: 75%;
height: 100%;
background-color: blue;
float: left;
}
<div class="container">
<div class="sidenav"></div>
<div class="bgrnd"></div>
</div>
How about this:
<div class="container">
<div class="sidenav">
test
</div>
<div class="bgrnd">
test
</div>
</div>
CSS:
.container {
width: 50%;
height: 50%;
}
.sidenav {
width: 25%;
height: 100%;
background-color: black;
color: #fff;
float: left;
}
.bgrnd {
width: 75%;
height: 100%;
background-color: blue;
color: #fff;
float: right;
}
You can set .sidenav and .bgrnd to position: absolute; and position them accordingly from there. Also, you've set .container to: width: 50%; and height: 50%; which I presume you don't want.
.container {
height: 100%;
width: 100%;
}
.sidenav {
width: 25%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: black;
}
.bgrnd {
width: 75%;
height: 100%;
position: absolute;
top: 0;
left: 25%;
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
</head>
<body>
<div class="container">
<div class="sidenav"></div>
<div class="bgrnd"></div>
</div>
</body>
</html>
How about using css-flex.
#main {
width: 100%;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
.div1 {
width: 25%;
height: 50px;
}
.div2 {
width: 75%;
height: 50px;
}
<div id="main">
<div class="div1" style="background-color:coral;">A</div>
<div class="div2" style="background-color:lightblue;">B</div>
</div>
I'm having an issue in general when it comes to floats. I'll be doing fine with the layout but once I start floating the whole page does weird stuff. I think I need a better understanding of the concept of what goes on. Here is my code for html and css.
* {
margin: 0;
}
#heading {
background-color: black;
height: 150px;
}
#navigation {
background-color: green;
height: 30px;
}
#leftSide {
background-color: blue;
width: 400px;
height: 700px;
}
#rightSide {
background-color: red;
width: 400px;
height: 700px;
float: right;
}
#footer {
background-color: black;
}
<body>
<div id="wrapper">
<div id="heading">Heading</div>
<div id="navigation">Navigation</div>
<div id="leftSide">Left Side</div>
<div id="rightSide">Right Side</div>
<div id="footer">Footer</div>
<div style="clear: right;"></div>
</div>
</body>
Use display:inline-block; for your id leftSide
#heading {
background-color: black;
height: 150px;
}
#navigation {
background-color: green;
height: 30px;
}
#leftSide {
background-color: blue;
width: 50%;
height: 700px;
display:inline-block;
}
#rightSide {
background-color: red;
width: 50%;
height: 700px;
float: right;
}
#footer {
background-color: black;
}
<!DOCTYPE html>
<html>
<head>
<title>This is it</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="heading">Heading</div>
<div id="navigation">Navigation</div>
<div id="leftSide">Left Side</div>
<div id="rightSide">Right Side</div>
<div id="footer">Footer</div>
<div style="clear: right;"></div>
</div>
</body>
</html>
Floating elements create a new block formatting context and so it must be cleared before your footer if you expect it to come below the preceeding contents.
If I guess right, you need to float: left your leftSide div.
I placed your clear: right div above the footer and made it clear: both.
Snippet below:
* {
margin: 0;
}
#heading {
background-color: black;
height: 150px;
}
#navigation {
background-color: green;
height: 30px;
}
#leftSide {
background-color: blue;
width: 400px;
height: 700px;
float: left;
}
#rightSide {
background-color: red;
width: 400px;
height: 700px;
float: right;
}
#footer {
background-color: black;
}
<body>
<div id="wrapper">
<div id="heading">Heading</div>
<div id="navigation">Navigation</div>
<div id="leftSide">Left Side</div>
<div id="rightSide">Right Side</div>
<div style="clear: both;"></div>
<div id="footer">Footer</div>
</div>
</body>
I have really weird problem. I want to do rectangle in rectangle, but dont know why, i cant set padding-top of inside-rectangle. Can somebody tell my why?
#outsideRect{
width: 260px;
height: 440px;
background-color: #4084dd;
border-radius: 10px;
}
#insideRect{
width: 200px;
height: 60px;
background-color: ghostwhite;
border-radius: 10px;
margin: 50px auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="css/style.css">
<script src="scripts/jquery-3.1.0.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<div id="page">
<div id="outsideRect">
<div id="insideRect">
as
</div>
</div>
</div>
</body>
</html>
#outsideRect{
width: 160px;
height: 440px;
background-color: #4084dd;
border-radius: 10px;
}
#insideRect{
width: 100px;
height: 60px;
background-color: ghostwhite;
border-radius: 10px;
margin: 50px auto;
}
.page { display: inline-block; }
#outsideRect2{
width: 160px;
height: 440px;
background-color: #4084dd;
border-radius: 10px;
padding-top: 20px;
}
#insideRect2{
width: 100px;
height: 60px;
background-color: ghostwhite;
border-radius: 10px;
margin: 0 auto;
}
#outsideRect3{
width: 160px;
height: 440px;
background-color: #4084dd;
border-radius: 10px;
}
#insideRect3{
width: 100px;
height: 60px;
background-color: ghostwhite;
border-radius: 10px;
margin: 0 auto;
padding-top: 20px;
}
#insideRect4{
width: 100px;
height: 60px;
background-color: ghostwhite;
border-radius: 10px;
margin: 50px auto;
}
#insideRect5{
width: 100px;
height: 60px;
background-color: ghostwhite;
border-radius: 10px;
margin: 0 auto;
}
<div class="page">
<div id="outsideRect">
<div id="insideRect">
margin on inner rect
</div>
</div>
</div>
<div class="page">
<div id="outsideRect2">
<div id="insideRect2">
padding on outer rect
</div>
</div>
</div>
<div class="page">
<div id="outsideRect3">
<div id="insideRect3">
padding on inner rect
</div>
</div>
</div>
<div class="page">
<div id="outsideRect">
<div id="insideRect4">
margin on inner rect
</div>
<div id="insideRect5">
no margin or padding on inner rect
</div>
</div>
</div>
Padding is always inside the element. Margin is outside the element.
You want to add padding to the outer rectangle if you want the inner rectangle to move down.
Or do you mean to ask why your margin on the inner rectangle isn't working? It's applied outside... between block level elements. Since the inner rectangle is a child of the Outer rectangle, the margin doesn't get allied between parent/child. It get applied between parents. Note how in the 4th example in the snippet the margin is applied to other elements at the same level, but it does not get applied between the parent/child.
#outsideRect{
width: 260px;
height: 440px;
background-color: #4084dd;
border-radius: 10px;
}
#insideRect{
width: 200px;
height: 60px;
background-color: ghostwhite;
border-radius: 10px;
margin: 50px auto;
padding-top: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="css/style.css">
<script src="scripts/jquery-3.1.0.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<div id="page">
<div id="outsideRect">
<div id="insideRect">
as
</div>
</div>
</div>
</body>
</html>
The padding in the solution can be added without any problem in your solution.
As Scott has mentioned, margin is outside of the element, and padding is inside of the element.
If you want to use the margin in the solution, you will need to add position.
For example:
#outsideRect{
width: 260px;
height: 440px;
background-color: #4084dd;
border-radius: 10px;
}
#insideRect{
position: absolute;
width: 200px;
height: 60px;
background-color: ghostwhite;
border-radius: 10px;
margin: 50px auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="css/style.css">
<script src="scripts/jquery-3.1.0.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<div id="page">
<div id="outsideRect">
<div id="insideRect">
as
</div>
</div>
</div>
</body>
</html>
I need your help,
How can the existing code below be modified such that the height of my css boxes are then liquified (as it needs to be this way to adjust to the height of my users screen resolution)?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* { margin:0; padding: 0 }
#container {
width: 100%;
margin: 0 auto;
}
#primary {
float: left;
width: 10%;
background: red;
height: 600px;
}
#content {
float: left;
width: 80%;
background: blue;
height: 600px;
}
#secondary {
float: left;
width: 10%;
background: green;
height: 600px;
}
</style>
</head>
<body>
<div id="container">
<div id="primary">
<p>left</p>
</div>
<div id="content">
<p>center</p>
</div>
<div id="secondary">
<p>right</p>
</div>
</div>
</body>
</html>
Equal height columns can easily be achieved by using the table* display properties.
http://cssdeck.com/labs/2iy6anjy
#container {
display: table;
width: 100%;
margin: 0 auto;
}
#primary {
display: table-cell;
width: 10%;
background: red;
}
#content {
display: table-cell;
width: 80%;
background: blue;
}
#secondary {
display: table-cell;
width: 10%;
background: green;
}
Have a look at the jQuery Equal Heights plugin by Filament:
https://github.com/filamentgroup/jQuery-Equal-Heights
Initialise it:
$('#container div').equalHeights();
remove fixed height and give overflow:hidden
Okay so I asked a question earlier on:
How to make a div fill the remaning vertical space using css
got an answer which Ive now been playing around with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: top;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: bottom;
width: 100%;
height: 15%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
Now ultimatley Id want to achieve this:
in which it covers 100% of the screen but I can choose how those percentages are spread i.e:
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: top;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: bottom;
width: 100%;
height: 15%;
background-color: yellow;
}
As you can html and body have a height of 100% thus filling the screen. The header has a height percentage of 15% the nav bar and body have a percentage of 70% and the footer 15% which in total would make up the 100% of the visible screen...
Now everything seems fine except for my footer:
#footer {
float: bottom;
width: 100%;
height: 10%;
background-color: yellow;
}
if I remove height: 15% then I can see my background color of yellow:
if I dont its some greyish color. and looks to take up about 20% of the screen:
So basically how would I get my divs to take up the correct height percentage I assigned them?
I hope Im making sense.
Thanks in advance.
You can't float to top or bottom. That doesn't exist. So you have to remove that from your header and footer.
And clear the footer by doing:
footer {
clear: both;
}
your problem is that there is no:
float:top;
or
float:bottom;
What you need to do is make them both float:left;
here is a copy and paste of your code with the update:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
float: left;
width: 100%;
height: 15%;
background-color: green;
}
#navbar {
float: left;
width: 20%;
height: 70%;
background-color: red;
}
#content {
float: right;
width: 80%;
height: 70%;
background-color: blue;
}
#footer {
float: left;
width: 100%;
height: 15%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>