I have a problem with the Height Tag in CSS. I want the page to be displayed without any scrollbars and just can't figure out why when i change "height" in the body tag from 99% to 100% suddenly scrollingbars appear and break the design.
I want to know why this happens and what's the reason for it.
thanks!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
height:100%;
}
body {
height: 99%;
margin-left: 20px;
margin-top:0px;
}
.gallerytitle {
position: absolute;
top: 20px;
font-family: serif;
font-size: 20px;
text-align: left;
}
.fullgallerytitle {
text-align: left;
font-family: sans-serif;
font-size: 12px;}
.events{
position: absolute;
font-family: sans-serif;
font-size: 12px;
top: 20px;
right: 20px;}
/* Center Text Section */
.area {
width: 100%;
height: 100%;
position: relative;
}
.middlespace {
position: absolute;
left: 50%;
top: 50%;
display: table;
}
.middlespace p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.bottom-left {
position: absolute;
font:sans-serif;
bottom: 15px;
left: 15px;
}
.contact {
font-size: 11px;
font-family: sans-serif;
border-bottom: 1px black dotted;
}
.exhibitiontitle {
color: #d4d4d4;
font-style: italic;
font-family: sans-serif;
font-size: 10px;
text-align: center;
}
.contact {
font-size: 11px;
font-family: sans-serif;
border-bottom: 1px black dotted;
}
.bold {
font-family: serif;
}
.about {
font-size: 11px;
font-family: sans-serif;
}
.address {
font-size: 11px;
border-bottom: 1px grey dotted;
}
.bottom-right {
position: absolute;
bottom: 15px;
right:15px;
font-style: italic;
color: #8e8e8e;
font-size: 11px;
}
.openinghours {
font-style: italic;
color: #8e8e8e;
font-size: 11px;
}
.subscribebutton
{
height:10px;
font-size: 9px;
}
.subscribebox
{
height:10px;
font-size: 9px;
}
</style>
<title>XYZ</title>
</head>
<body>
<div class="gallerytitle">XYZ<br /></div>
<div class="events">LOREM</div>
<div class="bottom-left">
<span class="about">
<span class="bold">XYZ</span> is a project by XZY. |
<span="address">Website Information</span> — info#info.com
</span>
</div>
<div class="bottom-right">
<span class="openinghours">Open by Appointment</span><span class=""> sponsored by XYZ</span>
</div>
</body>
</html>
There is also bottom margin on the body.
body {
height: 100%;
margin: 0 0 0 20px;
}
Though you should consider using a css reset such as eric meyers reset or normalize
Replacing your body style with this should solve the issue :
body {
height: 100%;
margin-left: 20px;
margin:0px;
}
It breaks the page because you use 99% of the page, then you move everything to the right of 20px. it moves the 99% outside and use more. here is the solution, i think both of them work :
body {
height: 100%;
margin-left: 20px;
margin-right: -20px;
margin-top:0px;
}
or
body {
height: 100%;
padding-left: 20px;
padding-right: -20px;
margin-top:0px;
}
Related
This is my HTML and CSS code. If you run this, there will be a image of a macbook and a 'buy' button. When the browser is minimised, the image is alittle off from the center. When it is in full screen, it causes the image to move up and the 'buy' button gets pushed to the bottom. I tried to use position: fixed but it didnt work. How do you make the picture have fixed position in the middle
.new {
font-family: Arial;
color: rgb(202, 137, 15);
font-size: 18px;
margin-bottom: 15px;
}
.macbook {
font-family: Arial;
font-weight: bold;
font-size: 44px;
margin-top: 0px;
margin-bottom: 10px;
}
.supercharged {
font-family: Arial;
font-weight: bold;
font-size: 60px;
margin-top: 0px;
margin-bottom: 25px;
}
.price {
font-family: Arial;
font-size: 18px;
margin-top: 0px;
}
.button {
background-color: #007aff;
color: white;
border-radius: 100px;
font-weight: bold;
border: none;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
padding-top: 10px;
position: 50px;
}
.button:hover {
opacity: 0.8;
}
.button:active {
opacity: 0.5;
}
.charged {
color: plum;
text-decoration: underline;
}
.picture {
margin-top: 50px;
}
<!DOCTYPE html>
<html align='center'>
<body>
<p class='new'>New</p>
<h2 class='macbook'>MacBook Pro</h3>
<h1 class='supercharged'><span class='charged'>Supercharged</span> for pros.</h1>
<p class='price'>From $1999</p>
<button class='button'>Buy</button>
<img src="https://images.macrumors.com/t/PV_LL2AlRJvaRvbuXCTUOuDpwzU=/800x0/smart/article-new/2013/09/16-inch-macbook-pro.jpg?lossy" alt="Macbook" class='picture'>
</body>
</html>
Just apply display: block to the <a>-element. When you use display: block on an element, it will try to take up as much width as possible. Seeing as it is not inside a parent container, it will take up 100% width of the <body>-element, as that is the elements closest parent. This way, it won't wrap around the image. The link will however stretch and fill the entire parent container as well. To combat this, apply max-width: fit-content, so the link's width is only relative to its content. Then you can apply margin: auto to center the element again.
For a responsive image, apply max-width: 100% and height: auto. This way it will automatically scale down, as the max-width: 100% property won't let it overflow its parent container (the <body>-element)
body {
text-align: center;
}
.new {
font-family: Arial;
color: rgb(202, 137, 15);
font-size: 18px;
margin-bottom: 15px;
}
.macbook {
font-family: Arial;
font-weight: bold;
font-size: 44px;
margin-top: 0px;
margin-bottom: 10px;
}
.supercharged {
font-family: Arial;
font-weight: bold;
font-size: 60px;
margin-top: 0px;
margin-bottom: 25px;
}
.price {
font-family: Arial;
font-size: 18px;
margin-top: 0px;
}
.button {
background-color: #007aff;
color: white;
border-radius: 100px;
font-weight: bold;
border: none;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
padding-top: 10px;
position: 50px;
}
.button:hover {
opacity: 0.8;
}
.button:active {
opacity: 0.5;
}
.charged {
color: plum;
text-decoration: underline;
}
.picture {
margin-top: 50px;
max-width: 100%;
height: auto;
}
a {
display: block;
max-width: fit-content;
margin: auto;
}
<p class='new'>New</p>
<h2 class='macbook'>MacBook Pro</h3>
<h1 class='supercharged'><span class='charged'>Supercharged</span> for pros.</h1>
<p class='price'>From $1999</p>
<button class='button'>Buy</button>
<img src="https://images.macrumors.com/t/PV_LL2AlRJvaRvbuXCTUOuDpwzU=/800x0/smart/article-new/2013/09/16-inch-macbook-pro.jpg?lossy" alt="Macbook" class='picture'>
By default an image is displayed inline, which is causing your issue. You're on the right track, but instead of position fixed, position: block; would be a better choice.
(You can also centre your image and avoid it overflowing using a max-width and some margin)
.new {
font-family: Arial;
color: rgb(202, 137, 15);
font-size: 18px;
margin-bottom: 15px;
}
.macbook {
font-family: Arial;
font-weight: bold;
font-size: 44px;
margin-top: 0px;
margin-bottom: 10px;
}
.supercharged {
font-family: Arial;
font-weight: bold;
font-size: 60px;
margin-top: 0px;
margin-bottom: 25px;
}
.price {
font-family: Arial;
font-size: 18px;
margin-top: 0px;
}
.button {
background-color: #007aff;
color: white;
border-radius: 100px;
font-weight: bold;
border: none;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
padding-top: 10px;
position: 50px;
}
.button:hover {
opacity: 0.8;
}
.button:active {
opacity: 0.5;
}
.charged {
color: plum;
text-decoration: underline;
}
.picture {
margin: 50px auto 0 auto;
display: block;
max-width: 100%;
}
<!DOCTYPE html>
<html align='center'>
<body>
<p class='new'>New</p>
<h2 class='macbook'>MacBook Pro</h3>
<h1 class='supercharged'><span class='charged'>Supercharged</span> for pros.</h1>
<p class='price'>From $1999</p>
<button class='button'>Buy</button>
<img src="https://images.macrumors.com/t/PV_LL2AlRJvaRvbuXCTUOuDpwzU=/800x0/smart/article-new/2013/09/16-inch-macbook-pro.jpg?lossy" alt="Macbook" class='picture'>
</body>
</html>
I'm trying to position a circular instagram icon so it is always centered towards the bottom of a landing page. All my efforts so far such as using position:fixed; have resulted in the icon not remaining underneath the rest of my content when the screen size changes.
My html is like this:
<!DOCTYPE html>
<html>
<head>
<title>RBM Makeup</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
</body>
</html>
And my CSS is like this:
:root{
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face{
font-family: 'milkshake';
src:url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face{
font-family: 'amble';
src:url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro{
height:100%;
width:100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1{
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container{
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a{
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 40px;
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover{
opacity:0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer{
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
left: 47.5%;
}
Any help would be greatly appreciated, thanks :)
Modified two places of your code.
1. .foot
left: 50% plus margin-left: - { width } / 2 can make footer align center no matter how the window changes.
```
.footer {
position: fixed;
bottom: 0;
width: 95px; // here
height: 100px;
left: 50%; // here
margin-left: calc(-95px / 2); // here
}
```
2. .fa
In your code, the Instagram icon is not aligning center inside the black circle, so I make some changes for it.
As the Instagram icon is square, you should not set the width 40px when it's font-size is 55px.
```
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* here */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
```
If you have more questions about my answer, feel free to contact me :)
:root {
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face {
font-family: 'milkshake';
src: url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face {
font-family: 'amble';
src: url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro {
height: 100%;
width: 100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1 {
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container {
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a {
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* need to fit the font-size */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover {
opacity: 0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer {
position: fixed;
bottom: 0;
width: 95px;
height: 100px;
left: 50%;
margin-left: calc(-95px / 2);
}
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
set the parent as
.intro {
width:100%;
height:100vh;
position:relative;
}
and the icon element as
.footer {
position:absolute;
bottom:0;
left:50%;
width:40px;
margin-left:-20px;
}
as an alternative:
.footer {
position:absolute;
bottom:0;
left:0;
width:100%;
text-align:center;
}
.footer > div {
display:inline-block;
}
this will do better as you can add other elements if you end up wanting to add other links
I developed a site and it's working fine. It's just that when I view on smaller window a white space appear on the right hand side.
I found the cause is the width:76% set for div=middle. I tried removing the width and adjusting the middle layout using padding. Again it needs 76% of width to get fixed. Yet the extra space appears.
How to get rid of it? here I attached the css part and html of my scripting. Thanks in advance.
CSS:
body {
font-family: Calibri;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.wrapper {
min-height: 100%;
position: absolute;
}
.left {
background-image: url('images/SideTexture_01.png');
background-repeat: repeat-y;
width: 12%;
height: 100%;
position: absolute;
}
.middle {
width: 76%; /* deactivated to remove extra space on right side */
height: 100%;
position: relative;
float: right;
margin-right: 12%;
padding-left: 12%;
z-index: 99px;
}
.header {
background-color: #cf2122;
width: 100%; /*774*/
height: 30px;
position: relative;
}
.footer {
background-color: #373435;
width: 100%; /*774*/
height: 40px;
text-align: justify;
margin: 0 auto;
clear: both;
}
.border {
border: 1px solid #DFDFDF;
padding: 5px;
}
.border-index {
border: 1px solid #EAEAEA;
padding: 10px;
}
.right {
background-image: url('images/side_texture-2.png');
background-repeat: repeat-y;
width: 12%;
height: 100%;
position: absolute;
float: left;
z-index: -1;
margin-left: 88%;
}
.disclaimer {
color: #FFF;
float: left;
font-size: 9px;
width: 60%;
text-align: justify;
padding-left: 10px;
padding-top: 2px;
}
.copyright {
color: #FFF;
float: right;
font-size: 9px;
position: relative;
float: right;
width: 31%;
padding-top: 15px;
}
A.menu-top:link {
COLOR: #FFFFFF;
TEXT-DECORATION: none;
FONT-WEIGHT: none;
FONT-FAMILY: Calibri;
FONT-SIZE: 13px;
text-transform: uppercase;
}
A.menu-top:active {
COLOR: #FFFFFF;
TEXT-DECORATION: none;
FONT-WEIGHT: none;
FONT-FAMILY: Calibri;
FONT-SIZE: 13px;
text-transform: uppercase;
}
A.menu-top:visited {
COLOR: #FFFFFF;
TEXT-DECORATION: none;
FONT-WEIGHT: none;
FONT-FAMILY: Calibri;
FONT-SIZE: 13px;
text-transform: uppercase;
}
A.menu-top:hover {
COLOR: #FFFFFF;
text-decoration: underline;
FONT-WEIGHT: none;
FONT-FAMILY: Calibri;
FONT-SIZE: 13px;
text-transform: uppercase;
}
.separate {
font-size: 15px;
color: #FFFFFF;
FONT-FAMILY: Calibri;
}
A.menu:link {
COLOR: #fff;
TEXT-DECORATION: none;
FONT-WEIGHT: none;
FONT-FAMILY: Calibri;
FONT-SIZE: 13px;
text-transform: uppercase;
}
A.menu:active {
COLOR: #fff;
TEXT-DECORATION: none;
FONT-WEIGHT: none;
FONT-FAMILY: Calibri;
FONT-SIZE: 13px;
text-transform: uppercase;
}
A.menu:visited {
COLOR: #fff;
TEXT-DECORATION: none;
FONT-WEIGHT: none;
FONT-FAMILY: Calibri;
FONT-SIZE: 13px;
text-transform: uppercase;
}
A.menu:hover {
COLOR: #fff;
text-decoration: underline;
FONT-WEIGHT: none;
FONT-FAMILY: Calibri;
FONT-SIZE: 13px;
text-transform: uppercase;
}
#body_content {
padding: 0px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #000000;
padding-top: 12px;
padding-bottom: 0px;
}
.require {
font-family: Calibri;
font-weight: bold;
color: #CC0000;
}
td {
font-family: Calibri;
font-size: 12px;
color: #3a3a3a;
}
th {
font-family: Calibri;
color: #3a3a3a;
}
.input {
border: 0;
color: #3a3a3a;
font-size: 10px;
text-align: left;
}
.input_contact {
border: 1px solid #999999;
background-color: #F6F7F1;
color: #3a3a3a;
height: 15px;
font-size: 12px;
width: 234px;
}
#media only screen and (max-width: 1280px) {
td.search {
width: 425px;
}
}
#media only screen and (min-width: 1197px) {
td.search {
width: 180px;
}
}
#media only screen and (min-width: 1289px) {
td.search {
width: 170px;
}
}
#media only screen and (min-width: 1346px) {
td.search {
width: 120px;
}
.copyright {
width: 23%;
}
.body-content {
padding-right: 250px;
}
}
.textarea {
border: 1px solid #999999;
background-color: #F6F7F1;
color: #3a3a3a;
font-size: 12px;
}
.star {
font-family: Tahoma;
color: red;
font-size: 16px bold;
}
.notice {
font-family: Tahoma;
color: #0066FF;
font-size: 14px bold;
}
.error {
font-family: Tahoma;
color: #CC0000;
font-size: 14px bold;
}
.require {
font-family: Tahoma;
font-weight: bold;
color: #CC0000;
}
.about-us-image {
width: 99%;
height: 40%;
background-image: url('images/AboutUsBg_01.png'),url('images/AboutUsBg_01.png'),url('images/AboutUsBg_01.png');
z-index: -1;
}
HTML:
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginheight="0">
<div class="wrapper">
<div class="left"></div>
<div class="middle">
<div class="header top_menu"><?php include 'top-menu.php'; ?> </div>
<div id="body_content">
<table height="600" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td>
<table height="600" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-top:10px; padding-left:50px; padding-right:50px; padding-bottom:230px; text-align:justify;">
<?php include('product-include.php'); ?>
<br /> <br />
<?php echo $row_RecTitle['FullTxt']; ?>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="footer" style="top:628px;">
<?php include('footer.php'); ?>
</div>
<div class="right"></div>
</div>
</body>
Update
Image hidden for copyright purpose, This problem only when browser window resized.
Thanks again ..
In my project, I solved it with this
html {
overflow-x: hidden;
}
Try this .. I think it's the easiest way to do what you want . You can creat a div which will be the right side of the background, and the other side will be the ::before selector of the same div ...
In HTML
<body>
<div class="bg"></div>
<div class="middle">
// Some HTML Text
</div>
</body>
In CSS
body{
margin: 0;
padding: 0;
}
.bg::before{
content:" ";
top: 0;
left: 0;
width: 12%;
height: 100%;
background-image: url('images/SideTexture_01.png');
background-repeat: repeat-y;
position: fixed;
z-index: 1;
}
.bg{
top: 0;
right: 0;
width: 12%;
height: 100%;
background-image: url('images/SideTexture_02.png');
background-repeat: repeat-y;
position: fixed;
z-index: 1;
}
.middle{
background: #fff;
margin: auto;
width: 76%;
position: relative;
z-index: 10;
}
Hope this will help you ...
This will solve your issue:
html,body{
margin:0;
padding:0;
overflow:auto;
width:100%;
}
Please help!
I tried many tricks to remove the white space under my footer but none of them solved my problem. I noticed that the white space is only visible in the pages with text, p and h1 tags. Any help is highly appreciated.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Olive Green Studio</title>
<link href="oliva.css" rel="stylesheet" type="text/css" />
<!—[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]—>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header"><!-- end #header -->
<div id="logo">
<a href="index.html">
<img src="olivaimages/olivegreenlogoweb.png" border="none"/>
</a>
</div>
<div id="sidebar1">
<ul>
<li>Home</li>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- end #sidebar1 --></div>
</div>
<div id="mainContent">
<h1>Contact Us </h1>
<p>If you need a creative help or want to take your project to the next level please don't hesitate to drop us a line.</p>
<a class="worklinks" href= "mailto:info#olivegreenstudio.com"> info#olivegreenstudio.com</a>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div class="clearfooter"></div>
<!-- end #container -->
</div>
<div id="footerframe">
<div id="footer">
<div id="footer2">
<div id="address">Khobar<br> Saudi Arabia </div>
<div id="contact">
<strong>Services:</strong><br> Logos<br>Branding<br>Identity<br>Collaterals<br>Packaging<br> Web Design & Development <br>
</div>
<div id="email">
If you have a project inquiry, we will be happy to answer you <a class="contactlink" href="mailto:info#olivegreenstudio.com"> here.</a>
</div>
<div class="social">
<div class="twitter">
<a href="https://twitter.com/OliveGreenSTU" />
<img src="olivaimages/twitterbirdwebgreen.png" onmouseover="this.src='olivaimages/twitterbirdweb-lightgreen.png'" onmouseout="this.src='olivaimages/twitterbirdwebgreen.png'" />
</div>
</a>
<div id="pinterest">
<a href="http://pinterest.com/olivegreenstu/">
<img src="olivaimages/pinterestwebgreen.png" onmouseover="this.src='olivaimages/pinterestweb-lightgreen.png'"
onmouseout="this.src='olivaimages/pinterestwebgreen.png'" />
</a>
</div>
<div class="copywrite"> © 2013 Olive Green. All rights reserved.</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#charset "UTF-8";
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #FFFFFF;
height: 100%;
}
.twoColFixLtHdr #header {
height: 170px;
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: center center;
margin: 0px;
padding: 0;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #5A6219;
text-decoration: none;
font-style: normal;
font-weight: normal;
padding-bottom: 20px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #908B23;
text-decoration: none;
line-height: 1.5em;
margin-bottom: 30px;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
color: #908B23;
text-decoration: none;
margin: 0px;
}
.twoColFixLtHdr #container {
width: 900px;
text-align: left; /* this overrides the text-align: center on the body element. */
min-height: 100%;
margin-top: 0;
margin-right: auto;
margin-left: auto;
position: relative;
margin-bottom: -215px;
height: 100%;
}
.twoColFixLtHdr #mainContent {
height: 100%;
background-color: #FFF;
float: left;
width: 100%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
padding-top: 50px;
padding-bottom: 70px;
}
.workmaincontent {
height: 100%;
background-color: #FFF;
float: left;
width: 100%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
padding-top: 50px;
padding-bottom: 70px;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.twoColFixLtHdr #sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 300px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
margin-top: 70px;
background-color: #FFFFFF;
height: 30px;
}
#sidebar1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 200px;
line-height: 1.5em;
text-decoration: none;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 500px;
}
#sidebar1 ul {
background-color: #FFFFFF;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#sidebar1 li {
display: run-in;
list-style-type: none;
}
#sidebar1 a {
display: run-in;
text-decoration: none;
color: #918C10;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
padding: 5px;
float: left;
width: 65px;
}
#sidebar1 a:hover {
color: #5A6219;
}
.worklinks{
font-family: Arial, Helvetica, sans-serif;
color: #5A6219;
text-decoration: none;
}
.worklinks:hover{
font-family: Arial, Helvetica, sans-serif;
color: #908B23;
text-decoration: none;
}
#print{
height: 100%;
background-color: #FFF;
width: 730px;
float: left;
padding-right: 15px;
padding-left: 15px;
margin-left: 85px;
margin-right: 85px;
}
#web{
height: 100%;
background-color: #FFF;
width: 730px;
float: left;
padding-right: 15px;
padding-left: 15px;
margin-left: 85px;
margin-top: 50px;
margin-bottom: 50px;
}
#packaging{
background-color: #FFF;
height: 100%;
width: 730px;
float: left;
padding-right: 15px;
padding-left: 15px;
margin-left: 85px;
}
.imagetitles a {
text-decoration: none;
font-family: "Century Gothic";
font-size: 25px;
font-style: normal;
font-weight: normal;
color: #00CCCC;
}
#printtitle{
bottom: -5px;
left: 333px;
}
#webtitle{
position: absolute;
left: 333px;
top: 521px;
}
#packagingtitle{
position: absolute;
left: 317px;
top: 823px;
width: 89px;
}
#bigimages{
width: 570px;
height: 100%;
}
.imagestalk {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
font-size: 14px;
line-height: 1.5em;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 20px;
}
.thumbnails {
border: 5px solid #666666;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
line-height: 1.5em;
font-weight: normal;
color: #5A6219;
text-decoration: none;
}
h3 a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
font-style: normal;
font-weight: normal;
text-decoration: none;
}
h3 a:visited {
color: #D0BA0B;
text-decoration: underline;
}
h3 a:hover {
color: #5A6219;
}
h3 a:active {
color: #579835;
}
.back{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
padding-left: 520px;
}
.back a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #666666;
}
.back a:visited {
color: #666666;
text-decoration: none;
}
.back a:hover {
color: #000000;
text-decoration: none;
}
.back a:active {
color: #333333;
text-decoration: none;
}
.source{
font-size: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: none;
}
.workimage {
height: 150px;
width: 200px;
float: left;
margin: 20px;
}
img {
border: 0;
}
#logo {
height: 150px;
width: 300px;
float: left;
}
#footerframe {
width: 100%;
background-color: #AEA03A;
height: 215px;
position: relative;
float: right;
}
#footer {
width: 900px;
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
margin-right: auto;
margin-left: auto;
background-color: #AEA03A;
float: none;
position: relative;
height: 215px;
}
#footer2 {
width: 100%;
background-color: #AEA03A;
padding-top: 30px;
float: left;
position: relative;
}
#address {
height: 50px;
width: 180px;
background-color: #AEA03A;
float: left;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
color: #5A6219;
line-height: 1.5em;
}
#contact {
height: 130px;
width: 180px;
background-color: #AEA03A;
float: left;
text-align: left;
margin-right: 180px;
margin-left: 180px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #5A6219;
text-decoration: none;
line-height: 18px;
}
#email {
background-color: #AEA03A;
height: 50px;
width: 180px;
float: right;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #5A6219;
text-decoration: none;
}
.social {
background-color: #AEA03A;
height: 35px;
width: 100%;
float: right;
margin-top: 20px;
}
#pinterest {
height: 20px;
width: 20px;
float: left;
background-repeat: no-repeat;
margin-left: 15px;
margin-bottom: 15px;
}
.twitter {
height: 20px;
width: 20px;
background-repeat: no-repeat;
float: left;
margin-bottom: 15px;
}
.copywrite {
font-size: 11px;
font-weight: lighter;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
text-align: right;
width: 300px;
background-color: #AEA03A;
float: right;
height: 15px;
color: #5A6219;
vertical-align: middle;
margin-bottom: 10px;
margin-top: 5px;
}
.contactlink {
font-family: Arial, Helvetica, sans-serif;
color: #5A6219;
text-decoration: none;
}
.contactlink a {
font-family: Arial, Helvetica, sans-serif;
color: #5A6219;
text-decoration: none;
}
.contactlink:hover {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
}
h4 {
color: #5A6219;
}
.indeximg {
height: 100px;
width: 900px;
background-repeat: no-repeat;
background-position: center top;
background-image: url(../olivaimages/indeximg.png)
}
.indexwrap {
height: 100%;
width: 810px;
padding-left: 90px;
}
#wrapper {
min-height: 100%;
}
.clearfooter {
height: 215px;
clear: both;
}
try this
#footerframe {
background-color: #AEA03A;
bottom: 0;
float: right;
height: 223px;
position: absolute;
width: 100%;
}
Replacing the footers 900px with 100% should do the trick.
I think you'll need implement a sticky footer technics by setting html,body height to 100% and
setting id#container as the following:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
height: auto !important;
min-height: 100%;
height: 100%;
}
example
I've been having trouble fitting some content into a border. When entering more text, instead of extending to fit vertically it just continues past the border as shown in the attached screenshot:
And my CSS file is as follows:
body {
background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/background.png);
background-repeat:repeat;
background-attachment:fixed;
margin: 0px;
padding: 0px;
font-family: Verdana, Tahoma, sans-serif;
}
h1 {
text-align: center;
font-family: Tahoma, Verdana, sans-serif;
font-size: 24pt;
text-shadow: 3px 3px #999999;
font-weight: bold;
}
p {
font-size: 8pt;
}
#content {
width: 800px;
margin: auto;
border: 4px solid gray;
border-radius: 20px;
background-color: #A2B964;
}
#banner {
height: 50px;
background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/bannerbg.png);
background-repeat:repeat;
}
#banner img {
display: block;
margin:auto;
overflow: hidden;
}
#general {
float: right;
width: 250px;
border-radius: 0px 20px 0px 0px;
}
dl {
margin: 10pt;
font-size: 8pt;
font-family: Ariel, sans-serif;
}
dt {
font-weight: bold;
margin-top: 10pt;
}
ul {
list-style-type: none;
}
li {
margin-left:0px;
}
#leftsection {
width: 550px;
overflow:hidden;
background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/background.png);
background-repeat:repeat;
background-attachment:fixed;
}
#rating {
height: 83px;
background-image:url(http://www.cs.aub.edu.lb/hsafa/cmps278/hw2/rbg.png);
background-repeat: repeat;
overflow: hidden;
border-radius: 20px 0px 0px 0px;
}
#rating img {
border-radius: 20px;
}
.special {
vertical-align: top;
font-size: 48pt;
font-weight: bold;
color: red;
}
.review {
font-size: 8pt;
font-family: Verdana, Tahoma, sans-serif;
font-weight: bold;
background-color: #E8DC9B;
border: 2px solid gray;
border-radius: 10px;
padding-left: 8px;
padding-right: 8px;
}
.personal {
margin-bottom: 20pt;
}
.italic {
font-style: italic;
margin-left: 40px;
}
img.review {
padding-right: 5px;
}
#leftcol {
margin-top: 2%;
margin-left: 2%;
margin-right: 2%;
float: left;
width: 47%;
}
#rightcol {
margin-top: 2%;
margin-right: 2%;
float: right;
width: 47%;
}
#pages {
text-align:center;
margin: 5px;
}
#validated {
position: fixed;
top: 90%;
left:80%;
width: 600px;
}
#validated img {
opacity: 0.5;
}
I've added the HTML code on CSSDeck: http://cssdeck.com/labs/full/bldwwaec
It would be better if you put the HTML codes too.
The right side element is either fixed (or absolute) or float. If it is float, you can simple fix it with adding a <br /> at the end of its parent element and set clear: both; on it. Like this:
<div id="parent">
<div>aaa</div>
<div class="float-right">bbbb</div>
<br style="clear: both;" />
</div>
Now, the div#parent fits with the content and if you set a border on it, your problem would fix.
In absolute case, however, it is not as easy as I explained and recommend revising the use of absolute (or fixed) for that part.
Good luck,
Mohammad Ali Sharpasand
Of course today, float is no longer needed, as the flexbox is available:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Also, grid is amazing:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
you have to put one more div over the id=content and you can call the calss=pagewrapper.
.pagewrapper{
margin: 0 auto;
width: 800px;
}
put float:left in your ID
#content{
float: left;
}
The problem appears to be the floating right column.
#rightcol {
float: right;
}
It would appear you need to clear the float, since floating elements are removed from normal page flow, the parent element will not expand to match the height. A simple solution is to add a clearfix to your parent element or class (in our case ID)
#content:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
This should solve your issue, if you have more questions about this I would suggest looking here.