I've been trying to vertically center some images in my code, and I finally got a solution working on JSFiddle but when I try to paste the same code to a html file the contents aren't centered. Here is the fiddle: http://jsfiddle.net/kf8mksy0/ and the images are centered vertically:
But when I try to paste the code:
<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
width: 100% !important;
font-size: 100%;
-webkit-text-size-adjust:none;
background-color: #FAFAFA
}
#header {
background-color: #FFF;
height: 53px;
padding: 19px 0;
border-top: 6px solid #000;
border-bottom: 1px solid #000;
min-width: 450px;
margin: auto;
}
#header-content-left {
float: left;
padding: 0 0 0 5%;
height: 53px;
}
#header-content-center-1{
float: right;
height: 53px;
line-height: 53px;
padding: 0 2% 0 2%;
border-left: 1px solid #000;
margin: auto;
}
#header-content-center-2{
float: right;
height: 53px;
line-height: 53px;
padding: 0 2% 0 1%;
margin: auto;
}
#header-content-right {
float: right;
height: 53px;
padding: 0 5% 0 2%;
border-left: 1px solid #000;
}
#header-content-center-1 img, #header-content-center-2 img {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
</style>
</head>
<body>
<div id="header">
<div id="header-content-left"><img src="http://lorempixel.com/150/50/" width="175" height="53"/></div>
<div id="header-content-right"><img src= "http://lorempixel.com/150/50/" width="96" height="52" /></div>
<div id="header-content-center-1"><img src="http://lorempixel.com/150/50/" width="78" height="12" /></div>
<div id="header-content-center-2"><img src="http://lorempixel.com/150/50/" width="76" height="12" /></div>
<div style="clear:both;"></div>
</div>
</body>
</html>
The small buttons aren't centered vertically anymore:
I have tried the same code in Chrome, Firefox and IE so I'm sure it's not just browser-wide. Am I missing some declaration? I have DOCTYPE, xlmns and meta tag declarations on my final html but it is not working there either.
JSfiddle uses html5 declaration.
You can change this from the fiddle options on the left.
I used this code in a simple html page and works fine in chrome.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
width: 100% !important;
font-size: 100%;
-webkit-text-size-adjust:none;
background-color: #FAFAFA
}
#header {
background-color: #FFF;
height: 53px;
padding: 19px 0;
border-top: 6px solid #000;
border-bottom: 1px solid #000;
min-width: 450px;
margin: auto;
}
#header-content-left {
float: left;
padding: 0 0 0 5%;
height: 53px;
}
#header-content-center-1 {
float: right;
height: 53px;
line-height: 53px;
padding: 0 2% 0 2%;
border-left: 1px solid #000;
margin: auto;
}
#header-content-center-2 {
float: right;
height: 53px;
line-height: 53px;
padding: 0 2% 0 1%;
margin: auto;
}
#header-content-right {
float: right;
height: 53px;
padding: 0 5% 0 2%;
border-left: 1px solid #000;
}
#header-content-center-1 img, #header-content-center-2 img {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
</style>
</head>
<body>
<div id="header">
<div id="header-content-left">
<img src="http://lorempixel.com/150/50/" width="175" height="53" />
</div>
<div id="header-content-right">
<img src="http://lorempixel.com/150/50/" width="96" height="52" />
</div>
<div id="header-content-center-1">
<img src="http://lorempixel.com/150/50/" width="78" height="12" />
</div>
<div id="header-content-center-2">
<img src="http://lorempixel.com/150/50/" width="76" height="12" />
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
UPDATE:
How "DOCTYPE" affects the rendering of HTML elements on different browsers?
Different browsers render the different tags differently. Whenever we define a DOCTYPE, it means we are telling to the browser that HTML Standards of the specified DOCTYPE have been used.
Doctype info
Use the standard HTML5 doctype. That seemed to do the trick across the IDEs/browsers I have installed, but I'm not sure why 4.01/etc..doesn't work.
EDIT: Ah bollocks, idioteque found it...nice catch buddy!
List item
Related
I'm trying to make a comment box that is horizontal with the name box, because the text box was fixed on the top. When I tried to apply margin-top on the text area and form, it moves the name box and the whole entire profile down with it. Is there a way to move the text area down, without affecting anything else. Here is my code:
body {
margin: 0;
}
p.name {
font-family: "Roboto";
margin-top: 90px;
margin-left: 50px;
margin-bottom: 0;
border: 1px solid black;
display: inline-block;
padding: 20px 70px;
font-size: 25px;
}
div.info {
margin-left: 50px;
border: 1px solid black;
padding: 20px 13.5px 20px;
border-top: none;
display: inline-block;
margin-bottom: 0;
}
div.date {
margin-left: 50px;
border: 1px solid black;
border-top: none;
display: inline-block;
padding: 0px 17px 0px;
text-align: center;
}
form {
display: inline-block;
margin-left: 100px;
}
textarea {
width: 300px;
height: 150px;
display: inline-block;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="profile.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>
<body>
<p class="name">henWrek</p>
<form>
<label for="fname">Profile Comments:</label>
<br>
<textarea>Enter your comment here...</textarea>
</form>
<br>
<div class="info">
<img src="default.jpg" height="200" width="210">
</div>
<br>
<div class="date">
<p>Joined: 11/1/2018</p>
<p>Last Online: 11/9/2018 3:21PM</p>
<p>Post Count: 2</p>
</div>
</body>
</html>
Another option is to put a position to the label tag and this tag have a relative position and you can change top and right to move when you want.
body {
margin: 0;
}
p.name {
font-family: "Roboto";
margin-top: 90px;
margin-left: 50px;
margin-bottom: 0;
border: 1px solid black;
display: inline-block;
padding: 20px 70px;
font-size: 25px;
}
div.info {
margin-left: 50px;
border: 1px solid black;
padding: 20px 13.5px 20px;
border-top: none;
display: inline-block;
margin-bottom: 0;
}
label{
position:relative;
top:50px;
right:100px;
}
div.date {
margin-left: 50px;
border: 1px solid black;
border-top: none;
display: inline-block;
padding: 0px 17px 0px;
text-align: center;
}
form {
display: inline-block;
margin-left: 100px;
}
textarea {
width: 300px;
height: 150px;
display: inline-block;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="profile.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>
<body>
<p class="name">henWrek</p>
<form>
<label class="label-prueba" for="fname"> Profile <br> Comments:</label>
<br>
<textarea>Enter your comment here...</textarea>
</form>
<br>
<div class="info">
<img src="default.jpg" height="200" width="210">
</div>
<br>
<div class="date">
<p>Joined: 11/1/2018</p>
<p>Last Online: 11/9/2018 3:21PM</p>
<p>Post Count: 2</p>
</div>
</body>
</html>
I have seen your code and found your problem, my suggestion is kindly add two property to your .textarea class and that is position:relative and top as per your requirement.
textarea{
position:relative;
top:100px;
}
try margin-top with a negative value, for instance: margin-top: -2px;
I'm coding my first website as a favor and there's some unwanted white space at the bottom that won't go away.
I've checked all the usual solutions like giving the body & footer heights, and setting bottom margins & padding to 0 but they don't seem to be working.
Could somebody please take a look at the code (linked below) and let me know what I'm doing wrong?
https://jsfiddle.net/cshotter/s9k1w6z7/
CSS
<!DOCTYPE html>
<html>
<head>
<title>Quality Precast Concepts</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
background-color: #EEEEEE;
}
a:link {
color: #111111;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.break {
clear: both;
}
#container {
width: auto;
}
#header {
width: 100%;
height: 163px;
color: #FFFFFF;
background-color: #DDDDDD;
}
.fixedwidthheader {
width: 1000px;
background-color: #D2691E;
margin: 0 auto;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
height: auto;
}
.fixedwidthbody {
width: 1000px;
background-color: #EEEEEE;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
height: auto;
}
.fixedwidthfooter {
width: 1000px;
background-color: #D2691E;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
height: auto;
}
#toplogodiv {
float: left;
padding-top: 10px;
padding-left: 10px;
margin: 0 auto;
}
#toplogodiv img {
height: 120px;
}
#headercontactinfo {
width: 300px;
text-align: right;
float: right;
position: relative;
top: 46px;
margin: 0 auto;
font-size: 1.1em;
}
#headercontactinfo p {
padding-right: 10px;
}
#headermenudiv {
position: relative;
top: 9px;
left: -1px;
}
#headermenudiv ul {
background-color: #333333;
padding: 0;
margin: 0;
height: 20px
}
#headermenudiv li {
list-style: none;
font-size: 0.8em;
float: left;
padding: 0px 10px 0 10px;
border-right: 1px solid #D2691E;
background-color: none;
margin-top: 3px;
}
#midsection {
color: #333333;
width: auto;
background-color: #DDDDDD;
}
#midsection img {
width: 1000px;
height: 360px;
box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 1px black;
}
#maincontent {
padding: 10px 0 20px 10px;
background-color: #EEEEEE;
position: relative;
top: -24px;
}
.list {
padding-left: 10px;
}
#frontpagemap {
padding: 0;
margin: 0;
float: right;
position: relative;
top: -310px;
left: -50px;
}
#base {
background-color: #DDDDDD;
width: 100%;
height: 160px;
color: white;
}
#footer {
height: 65px;
}
#footer img {
position: relative;
top: -30px;
left: 10px;
width: 140px;
}
#footercontact {
float: right;
position: relative;
top: -8px;
left: -10px;
}
#designtag {
float: left;
height: 20px;
}
</style>
</head>
HTML
<body >
<div id="container">
<div id="header">
<div class="fixedwidthheader" id="border">
<div id="toplogodiv">
<img src="images/logo.png">
</div>
<div id="headercontactinfo">
<p>03 347 4768</p>
<p>sales#qualityprecast.co.nz</p>
</div>
<div class="break"></div>
<div id="headermenudiv">
<div class="fixedwidthheader">
<ul>
<li>Home</li>
<li>Products</li>
<li>Projects</li>
<li>About Us</li>
<li>The Team</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
<div class="break"></div>
<div id="midsection">
<div class="fixedwidthbody">
<img src="images/header.jpg">
<div id="maincontent">
<h1>Welcome to Quality Precast Concepts</h1>
<h3>Quality Precast & Prestressed Concrete made in Christchurch</h3>
<p>We are a Canterbury born and bred company located on Christchurch’s doorstep – Rolleston. Our aim is to be the supplier of choice for high quality precast & prestressed products. Because of our locastion and adaptable set-up, we are able offer an extensive and complete range of manufacturing and product options to meet your precast concrete needs.</p>
<p>Our areas of expertise include:</p>
<p class="list"><strong>Prestressed</strong></p>
<ul>
<li>Unispan</li>
<li>Flat Slab</li>
<li>Interspan (rib & infill system)</li>
<li>Double Tees</li>
<li>Hollow Core</li>
</ul>
<p class="list"><strong>Precast</strong></p>
<ul>
<li>Tilt Slab Panels</li>
<li>Beams</li>
<li>Columns</li>
<li>Spandrels</li>
<li>Bleachers</li>
<li>Stairs & Landings</li>
</ul>
<div id="frontpagemap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2889.8448452950684!2d172.3751009160351!3d-43.58894799364694!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d32033a1f3d6193%3A0xa416fb59f65b7fab!2s889+Jones+Rd%2C+Rolleston+7675!5e0!3m2!1sen!2snz!4v1450467163060" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div id="base">
<div class="fixedwidthfooter">
<div id="footer">
<img src="images/logo.png">
<div id="footercontact">
<p>Contact us today | 03 347 4768 | sales#qualityprecast.co.nz</p>
<p>889 Jones Road, Rolleston, Christchurch</p>
</div>
<div id="designtag">
Website by CSWeb-Design
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It has to do with the map styles that you've included. You're doing some positioning on frontpagemap that is causing the extra whitespace.
#frontpagemap {
padding: 0;
margin: 0;
float: right;
position: relative;
top: -310px;
left: -50px;
}
Basically, when you do position: relative; the element takes the space that it would normally take up, but you just kind of made it look like it was up higher with top: -310px. It still, technically, takes up the space that it normally took up.
A quick fix would be to use margin-top instead. Which will actually move the element and the space it is taking up, as opposed to just making it appear as though it was positioned up higher.
Your footer is smaller than the footer's container. That's why there's empty space.
Either remove the height:160px from #base or add a position:relative to it, then position:absolute; bottom:0px to .fixedwidthfooter (both have slightly different results).
You're setting the 'base' height to 160px. No need, try getting rid of that.
You need to remove height from the base class
#base {
background-color: #DDDDDD;
width: 100%;
/*height: 160px;*/
color: white;
}
I have updated jsfiddle to show a way to remove the whitespace from the bottom.
I made two changes to the css. I changed the #base height to auto and I changed the height of the .footer img to 20px. You will of course want to use a height for the image that is appropriate. The point I wanted to illustrate is that part of the issue is that the image height is pushing things down.
Please mark this as the accepted answer if it fixes your issue.
I'm having issues with clearing floats (could be something else?). I want to make the #newsbar div cleared from the previous floats. So, it's width can expand 100% across the page/browser
I think I've done what I can, and am becoming real frustrated with this. This is what it looks like currently:
Current output:
http://postimg.org/image/l2rxf4603/
If someone can look over my HTML and CSS, I'd much appreciate it. Thanks!
HTML & CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rob's BBC</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1" />
<style type="text/css">
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
/* background-color: green; */
}
/* BBC Logo */
#logodiv {
padding-top: 8px;
float: left;
border-right: 1px solid #990000;
padding-right: 15px;
}
/* Sign In Text */
#signindiv {
font-weight: bold;
font-size: 0.9em;
float: left;
padding: 5px 50px 8px 8px;
border-right: 1px solid #990000;
}
/* Sign In Image */
#signindiv img {
position: relative;
float: left;
margin: 6px 0 0 2px;
}
#signindiv p {
float: left;
margin: 10px 0 0 4px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
float: left;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style-type: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 15px 20px 10px 20px;
text-align: center;
float: left;
}
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
#searchdiv input {
height: 25px;
border: none;
font-size: 0.9em;
padding-left: 5px;
padding-right: 22px;
background-image:url('images/magnifyglass.png');
background-repeat: no-repeat;
background-position: right center;
}
.break {
clear: both;
}
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png" alt="bbclogo" height="28" />
</div> <!-- logodiv -->
<div id="signindiv">
<img src="images/signinlogo.png" alt="signinlogo" />
<p>Sign In</p>
</div> <!-- signindiv -->
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div> <!-- topmenudiv -->
<div id="searchdiv">
<input type="text" placeholder="search" />
</div> <!-- searchdiv -->
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth">
</div>
</div> <!-- newsbar -->
</div> <!-- fixedwidth -->
</div> <!-- topbar -->
</div> <!-- container -->
</body>
</html>
JsFiddle: http://jsfiddle.net/1f030av9/
Ok, no floating problem, you just have to get the <div> outside of it's parent ( another <div> with classname "fixedwidth"). Also removed some paddings in order to make the search bar not go to the 2nd line.
Changed css:
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
Became:
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed line padding-right: 22px; from #searchdiv input
Here's a fiddle.
Your <div class="fixedwidth"> is set to a width of 1050px; and your div class="newsbar"> is a child of class="fixedwidth". You've set 'newsbar' to 100% but it cannot override the attributes of the parent div class="fixedwidth"
your fiddle
It works for me
It is stretching to 100%
with slight edits not relating to your issue though
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
clear:both;
}
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed padding-right too from #searchdiv input too
I am making a webpage using CSS when I encountered a problem. My menu bar doesn't center the links vertically in the bar. It should be really simple, but I need help. Sorry for making it so long, I just didn't want to leave anything out.
HTML:
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<title>noobyDev</title>
<style>
body {
background-color: CCFFFF;
text-align: center;
}
div.background
{
width: 90%;
height: 200px;
background color: #00FF66;
border: 2px solid black;
margin: 0 auto;
text-align: left;
}
div.background h3
{
margin: 0px 40px;
}
div.logo
{
width: 350px;
height: 75px;
background: url(logo.png);
margin: 30px 40px;
}
div.nav
{
background-color: #00CC66;
border: 2px solid black;
width: 90%;
margin: 0 auto;
text-align: left;
height: 30px;
border-top: 0px solid black;
}
.menu
{
margin: 5px 10px;
background: #00CC66;
color: black;
-webkit-transition: color;
}
.menu:hover
{
color: red;
}
div.center
{
width: 90%;
height: 700px;
background color: white;
border: 2px solid black;
border-top: 0px solid black;
margin: 0 auto;
text-align: left;
}
div.column1 h1
{
margin: 30px 40px;
}
div.column1 p
{
margin: 30px 40px;
}
div.column1
{
width: 70%;
height: 100%;
float: left;
display: block;
border-right: 2px solid black;
}
div.column2
{
width: 30%
height: 100%;
float: left;
display: block;
text-align: left;
}
div.column2 a
{
margin: 30px 40px;
display: block;
text-decoration: none;
font-size: 30px;
font-color: black;
}
div.legal
{
width:90%;
height: 50px;
background color: white;
border: 2px solid black;
border-top: 0px solid black;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="background">
<div class="logo">
</div>
<h3>Have you failed today?</h3>
</div>
<div class="nav">
<a style=text-decoration="none" href="index.html" class="menu">Home</a>
<a style=text-decoration="none" href="html.html" class="menu">HTML</a>
<a style=text-decoration="none" href="javascript.html" class="menu">Javascript</a>
<a style=text-decoration="none" href="css.html" class="menu">CSS</a>
<a style=text-decoration="none" href="java.html" class="menu">Java</a>
<a style=text-decoration="none" href="news.html" class="menu">News</a>
<a style=text-decoration="none" href="games.html" class="menu">Games</a>
<a style=text-decoration="none" href="other.html" class="menu">Other</a>
</font>
</div>
<div class="center">
<div class="column1">
<h1>Home</h1>
<br>
<p>Welcome to noobyDev.com! This is my site where I document all of my fails and successes worth sharing. Feel free to use them unless otherwise instructed to do so. Check back often and admire my awesomeness!</p>
</div>
<div class="column2">
Video?
</div>
</div>
<div class="legal">
<p>This site is heavily protected with a gargantuan army of mutant cotton balls; I would recommend not stirring trouble up. Just so you know, this site looks the best in Internet Explorer.</p>
</div>
</body>
</html>
Just add a line-height to div.nav:
div.nav
{
background-color: #00CC66;
border: 2px solid black;
width: 90%;
margin: 0 auto;
text-align: left;
height: 30px;
line-height: 30px;
}
Here's the JS Bin to test: http://jsbin.com/oliwit/1/
There are generally a lot of misconceptions on how to utilize the vertical-align within CSS, I found this post very helpful on how to get a full understanding of it... http://phrogz.net/css/vertical-align/
Problem:
https://postimg.cc/image/tunhwh8qj/
The trouble I am currently having is that the border around my body is not outlining everything. As I have recently learned I'm guessing this means an element is out of the flow due to floating? However I am not certain how to fix it in this case.
My html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<img src="final.jpg" id="banner">
<ul id="nav">
<li class="links">Home</li>
<li class="links">Location</li>
<li class="links">Facilities</li>
<li class="links">Attractions</li>
<li id = "endlink">Bookings</li>
</ul>
<div id="leftcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
<div class="slideshow">
<img src="1.jpg" width="600" height="450" />
<img src="2.jpg" width="600" height="450" />
<img src="3.jpg" width="600" height="450" />
</div>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS is:
html{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
height: 100%;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
border-bottom: 1px solid #7f7f7f;
border-top: 1px solid #7f7f7f;
}
#mainc {
float: left;
width: 654px;
background-color: white;
margin: 0;
padding-left: 8px;
padding-right: 4px;
height: 100%;
}
#leftcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 290px;
border-right: 1px solid #7f7f7f;
height: 100%;
}
#footer {
clear: both;
position: relative;
bottom: 0.5px;
margin: 0;
background-color: #dad8bf;
border-top: 1px solid #7f7f7f;
}
#footer p{
margin: 0;
}
.links {
float: left;
margin: 0px;
border-right: 1px solid #7f7f7f;
}
#endlink {
float: left;
margin: 0px;
border-right: none;
}
#lastlink{
display: block;
width: 184px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
#lastlink:hover{
background-color: #999999;
}
a:link {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
.slideshow {
height: 483px;
width: 632px;
margin: auto;
padding: 0px;
}
.slideshow img {
padding: 0px;
border: 1px solid #ccc;
background-color: #eee;
}
thanks in advance guys!!
This is happening because your body has fix height of 100%.Change body tag css as:
height:auto;
min-height: 100%
if this doesn't work then add following with this:
overflow:auto;
Probably better NOT to use the body element for your container. Instead, just add
<div class="container"></div>
around your code and in your CSS changehtml to body and body to div.container.
body{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
div.container{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
}
Edit: I completely missed the 100%, that's gotta be it.
Add overflow: hidden to your body element. When elements are floated it will not push the parent container height past it unless there is a clearer