In declaration "#message a" I have a style padding that looks like this
padding: 2px 15px;
so what is the point to have padding top and bottom when there is no change in appearance. Even if I change padding to
"padding: 100px 15px;"
this 100px doesn't make any change in appearance. This 15px is correct and make some change in appearance.
<!DOCTYPE>
<html>
<head>
<title>Chapter 3: Expandable Rows</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body
{
margin:5px;
padding: 0;
font-family: Arial, sans-serif;
font-size: small;
text-align: center;
width: 768px;
}
#register
{
float: left;
width: 100%;
margin:0;
padding: 0;
list-style: none;
color: #690;
background: #BDDB62;
}
#register a
{
text-decoration: none;
color: #360;
}
#reg
{
float: left;
margin: 0;
padding: 8px 14px;
}
#find
{
float: right;
margin: 0;
padding: 8px 14px;
}
#message
{
clear:both;
font-weight: bold;
font-size:110%;
color:#fff;
text-align: center;
background: #92B91C;
}
#message p
{
margin: 0;
padding: 8px 14px;
}
#message strong
{
text-transform: uppercase;
}
#message a
{
margin: 0 0 0 6px;
padding: 2px 15px;
text-decoration: none;
font-weight: normal;
color: #fff;
}
</style>
</head>
<body>
<ul id="register">
<li id="reg">Not registered? Register now!</li>
<li id="find">Find a store</li>
</ul>
<div id="message">
<p><strong>Special this week:</strong> $2 shipping on all orders! LEARN MORE</p>
</div>`enter code here`
</body>
</html>
The anchor tag is an inline element so it will not display vertical padding.
While padding can be applied to all sides of an inline element, only
left and right padding will have an effect on surrounding content.
To see the vertical padding applied change the a to display:inline-block.
#message a{
padding: 2px 15px;
display: inline-block;
}
Example http://jsfiddle.net/sL7kT/
See this article on how CSS properties are applied to inline elements.
Simply a tag cannot be adjusted by width, height , padding etc..
Add: display: inline-block; to make anchor inline block.
#message a {
display: inline-block;
padding: 100px 10px;
}
Demo: http://jsfiddle.net/eAxsh/
you have your a tag in paragraph tag so its abide to the line height of its parents which is your paragraph tag.. so if you give the vertical padding it wont applyl.. rather use inline-block on your a tag
Related
with the following html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Company Home Page with Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="about">
<h4><span>A work selection by </span><a class="sobre" href="">sfgndfyj</a></h4>
</div>
</header>
<main>
<article class="uno">
<h1>
<span id="ppal" class="title_part" style="display: block; font-size: 12vw";>stills & moving image</span>
<span id="sec" class="title_part" style="display: block; font-size: 11vw";>TECHNICAL PRODUCTION</span>
</h1>
</article>
<article class="dos">
</article>
</main>
</body>
</html>
and the following css:
html {
box-sizing: border-box;
font-size: 16px;
}
body {
max-width: 1500px;
margin: 0 auto;
}
/* -------------------------------------- fonts */
#font-face {
font-family: 'Alternate Gothic';
src: url('Alternate Gothic W01 No 3.ttf') format('truetype');
}
#font-face {
font-family: 'Times Roman';
src: url('OPTITimes-Roman.otf') format('opentype');
}
.sobre {
color: black;
}
.sobre:hover {
transition: background-color .1s ease-out,color .1s ease-out;
position: relative;
overflow: hidden;
text-decoration: underline;
background-color: black;
color: white;
}
h1 {
font-family: 'Alternate Gothic';
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
font-size: clamp(.5rem, 10vw, 1rem);
}
h4 {
font-weight: lighter;
letter-spacing: .1rem;
}
#ppal {
word-spacing: 90%;
}
.title_part {
display: inline;
position: relative;
}
/* --------------------------------- spacing */
.about {
text-align: center;
margin: 0 5vw;
}
header {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
margin: 0 2.5rem;
}
.dos {
border-width: 1px 0 0 0;
border-style: solid;
border-color: #000;
margin: 0 2.5rem;
}
I have tried for hours to find out why the h1 goes beyond the limits of its parent.
I am trying to keep h1 in two lines of (responsive) text. When you grow the window it goes above the 1600px limit placed on the body.
No matter if I try max-width, overflow, etc that it keeps getting out the box.
Can anybody tell me what am I doing wrong? Im trying to figure out how to stop the h1 to go beyond the above limit.
Best
It is the white-space: nowrap; which prevents your span to break your lines when the content is filled in the parent. Remove that and your code will work fine
Working Fiddle
html {
box-sizing: border-box;
font-size: 16px;
}
body {
max-width: 1600px;
margin: 0 auto;
border: 1px solid red;
}
main {
}
#font-face {
font-family: "Alternate Gothic";
src: url("Alternate Gothic W01 No 3.ttf") format("truetype");
}
#font-face {
font-family: "Times Roman";
src: url("OPTITimes-Roman.otf") format("opentype");
}
.about {
text-align: center;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
margin: 0 5vw;
}
.fulltitle {
}
h1 {
font-family: "Alternate Gothic";
text-align: center;
border: 1px solid red;
display: inline-block;
}
.uno {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
margin: 0 4vw;
max-width: 1600px;
position: relative;
}
.title_part {
margin: 0 auto;
/* white-space: nowrap; */
}
<header>
<div class="about">
<h4><span>A work selection by </span>mfowmyoxsnk</h4>
</div>
</header>
<main>
<article class="uno">
<div class="fulltitle">
<h1>
<span class="title_part" style="display: block; font-size: 12vw" ;
>stills & moving image</span
>
<span class="title_part" style="display: block; font-size: 11vw" ;
>TECHNICAL PRODUCTION</span
>
</h1>
</div>
</article>
<article class="dos"></article>
</main>
If you want your title to return to the line you have to put wrap like this
white-space: wrap;
Like the others have said you need to remove the "white-space", this will cause the text to go in to two lines. If you want to prevent this behavior you will have to change the font-size to be smaller.
After that, remove the margin from ".uno". This will ensure that the h1 element remains in the div. The margin currently pushes it out the div no matter the size of the child, even if the text is responsive.
Another recommendation beyond what you're looking for, instead of wrapping two spans in a single "h1", remove the h1, and replace the two spans with 1 "h1" element and the other with a "h2" or whatever subheader element depending on the size you want. If you are trying to modify the positions of elements(center, left, right) instead of margins I recommend looking into flexbox.
.uno {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
max-width: 1600px;
position: relative;
}
.title_part {
margin: 0 auto;
}
<div class="fulltitle">
<h1 class="title_part" style="display: block; font-size: 5vw;";>stills & moving image</h1>
<h2 class="title_part" style="display: block; font-size: 3vw; text-align: center; ">TECHNICAL PRODUCTION</h2>
</div>
My bad for the formatting, I'm still learning how to post answers on stackoverflow.
I have found that:
(index.html)
font-size placed in span is making it grow endlessly because of the vw.
(style.css)
clamp will make it responsive the way I want to, with a max-limit to whatever I want in the final layout.
Posting what I get as soon as I have it ready
Below what I accept as a solution to the issue I was having with h1.
It does not jump to a new line once I changed the units applied on index.html / .uno / span you can see applied on the very first post, and some tweaking on the css that you can see hereunder.
I did not need white-space.
I welcome any feedback to fine tune it.
(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Company Home Page with Flexbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="about">
<h4><span>A work selection by </span><a class="sobre" href="">sfgndfyj</a></h4>
</div>
</header>
<main>
<article class="uno">
<h1>
<span id="ppal" class="title_part" style="display: block;";>stills & moving image</span>
<span id="sec" class="title_part" style="display: block;";>TECHNICAL PRODUCTION</span>
</h1>
</article>
<article class="dos">
</article>
</main>
</body>
(style.css)
html {
box-sizing: border-box;
font-size: 16px;
}
body {
max-width: 1500px;
margin: 0 auto;
}
/* -------------------------------------- fonts */
#font-face {
font-family: 'Alternate Gothic';
src: url('Alternate Gothic W01 No 3.ttf') format('truetype');
}
#font-face {
font-family: 'Times Roman';
src: url('OPTITimes-Roman.otf') format('opentype');
}
.sobre {
color: black;
}
.sobre:hover {
transition: background-color .1s ease-out,color .1s ease-out;
position: relative;
overflow: hidden;
text-decoration: underline;
background-color: black;
color: white;
}
h1 {
font-family: 'Alternate Gothic';
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
font-size: clamp(1rem, 11.3vw, 11rem);
margin: 2rem 0;
}
h4 {
font-weight: lighter;
letter-spacing: .1rem;
font-size: clamp(.1rem, 2.5vw, 1rem);
}
#ppal {
font-size: 50%;
font-weight: 400;
word-spacing: 100%;
}
#sec {
word-spacing: 30%;
}
.title_part {
display: inline;
position: relative;
}
/* --------------------------------- spacing */
.about {
text-align: center;
margin: 0 5vw;
}
header {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
margin: 0 1rem;
}
.dos {
border-width: 1px 0 0 0;
border-style: solid;
border-color: #000;
margin: 0 1rem;
padding: 1rem 0;
}
Best
Ok I'm recreating a PSD I found online for practise. In the header there is a search bar and button. To the right of the button there is extra content taking up space, which I can't get rid of.
I have added a jsfiddle
https://jsfiddle.net/jb7j6ysz/
Please ensure the preview is expanded to the left as much as possible
<!DOCTYPE html>
<html>
<head>
<title>Education Compaony</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="branding">
<h2>Education Department</h2>
<h5>A free PSD template</h5>
</div> <!-- /.Branding -->
<div class="directory">
<div class="search">
<input type="text">
<input type="submit" value="Search">
</div> <!-- /.Search -->
<div class="index">
<ul>
<li>A - Z index | </li>
<li>Studenet Login | </li>
<li>Staff Login </li>
</ul>
</div> <!-- /.Index -->
</div> <!-- /.Directory -->
</div> <!-- /.Header -->
</body>
</html>
/* Font Import */
#import url('https://fonts.googleapis.com/css?family=Lora');
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.header{
height: 95px;;
background-color: #FCD05D;
color: #3A302E;
font-family: 'Lora', sans-serif;
}
.branding {
float: left;
margin-left: 200px;
}
.branding h2 {
margin-top: 10px;
text-transform: uppercase;
font-size: 28px;
}
.branding h5 {
margin-top: -20px;
font-size: 16px;
}
.directory {
float: right;
margin-right: 200px;
}
.search {
background-color: black;
border: 5px solid black;
border-radius: 8px;
padding: 1px 0px 5px 12px;
}
.search input[type=text] {
background-color: #FCD05D;
border-radius: 3px;
}
.search input[type=submit] {
background-color: #595657;
color: #FCD05D;
border: 2px solid #595657;
border-radius: 3px;
}
.index ul {
list-style-type: none;
text-decoration: none;
margin-top: -0;
}
.index li {
margin-top: -20px;
font-size: 14px;
display: inline-flex;
word-spacing: 1px;
}
The extra space is coming from the ul where your links are. Since the width is auto, the list section has a greater width than your search section so the search section takes on that width.
You can set padding: 0 to the ul list to reduce some of the space. It has a natural padding to the left. This will still leave some space on the right because of the length of your list. You can set width to the search area to prevent the list from wrapping. Or you could make the search section float left but you will need to adjust padding to make it look symmetrical
Here is an example
https://jsfiddle.net/jb7j6ysz/3/
.search {
background-color: black;
border: 5px solid black;
border-radius: 8px;
padding: 1px 12px 5px 12px;
float: left;
}
.index ul {
list-style-type: none;
text-decoration: none;
margin-top: 0;
padding: 0;
}
I used float for the new fiddle and added padding 0 to the ul. Also adjusted the padding on .search
The index div is in the way. Update your css with this
.index{
position: absolute;
display:block;
left: 40%;
}
The extra space is coming because of your Ul items. Add this in your css
ul{
padding-left:0px;
}
I think your problem is to do with the width of the .index div. Both it and your search bar are contained within the same .directory div. Because both are block-level elements with their width set to the default auto, they take on the width of their parent, which in this case is set by the largest child, the .index div.
By setting the search bar to display: inline-block;, it will only take up as much width as it needs.
.search {
...
display: inline-block;
}
Additionally, the ul used for the .index div has padding-left by default, which you may want to set otherwise.
I am trying to create list items that highlight when hovered but when I use inline, it works where the list items are horizontally next to each other but when I use inline block (so I can set height and width), they get pushed vertically below each other.
Can anyone find my issue?
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="Styles/Master.css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="navBar">
<img id="imgLogo" src="Images/logo_netflix.png" />
<ul id="navBarRight">
<li id="liLogin" class="navItem"><a runat="server" href="Account/Login.aspx">Login</a></li>
<li id="liRegister" class="navItem"><a runat="server" href="Account/Register.aspx">Register</a></li>
</ul>
</div>
</form>
<asp:ContentPlaceHolder id="body" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
Css:
/* Universal */
body {
font-family: "Arial Black", Gadget, sans-serif;
background-color: #DEDEDE;
margin: 0px;
}
/* Navigation Bar */
div#navBar{
height: 50px;
margin: 0px;
background-color: #000000;
box-shadow: 3px 3px 1px #888888;
}
#imgLogo{
max-height: 100%;
max-width: 100%;
margin: 0px 0px 0px 10px;
}
ul#navBarRight{
height: 50px;
width: auto;
margin: 0px;
padding: 0px;
display: inline;
float: right;
margin: 0px 10px 0px 0px;
}
li.navItem{
display: inline-block;
color: black;
list-style-type: none;
height: 100%;
width: 100%;
text-align: center;
line-height: 50px;
margin: 0px 20px 0px 20px;
}
a{
color: white;
text-decoration: none;
}
li:hover{
background-color: gray;
}
How about using float instead of inline or inline block. https://jsfiddle.net/37oseq80/2/
ul#navBarRight{
border:1px solid;
width:500px;
height: 50px;
margin: 0px;
padding: 0px;
float: right;
margin: 0px 10px 0px 0px;
}
li.navItem{
float:right;
color: black;
list-style-type: none;
height: 100%;
width: 40%;
text-align: center;
line-height: 50px;
margin: 0px 20px 0px 20px;
}
And ofcourse dont forget use clear:both after the last child of the ul.
You have width: 100% in the CSS rule for li.navItem- that way the nav items will take the whole width of the parent element and get placed below each other as you describe.
Make that width smaller - try 20% (or a fixed pixel value) as a beginning and then gradually change it until it looks the way you want.
I have a transparent navigation bar that is fixed, and i am trying to get an image, or even just text aligned to the left. The following is the html code and css code I am using:
-------------------------------------------html code------------------------------------------------
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Home</title>
</head>
<body>
<div id="navigation">
<b>
Home
Portfolio
Our Apps
Support
Press
About
</b>
</div>
<div id="content">
Content Here!
</div>
</body>
</html>
-------------------------------------------------CSS Code------------------------------------------
body {
padding: 0; /* Gets rid of the automatic padding */
margin: 0; /* on HTML documents */
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
font-size: 12px;
}
#navigation {
position: fixed;
text-align: center;
top: 0;
width: 100%;
color: #ffffff;
height: 20px;
padding-top: 5px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
#navigation a:visited {
color: white;
}
#content {
width: 80%;
padding-top: 70px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
}
Thanks for any help!
-Aaron
You could use css floats.
CSS
#navigation div.block-left {
float: left;
}
#navigation div.block-right {
float: right;
}
HTML
<div id="navigation">
<div class="block-left">
Put stuff here!
</div>
<div class="block-left">
<b>
Home
Portfolio
Our Apps
Support
Press
About
</b>
</div>
Because both blocks are floating left they will stack in order from left to right.
Also, you shouldn't be using anymore as afaik its deprecated. Better options would be or
I think you will need to explain further, but if I correctly understood what you want, you might try this:
#navigation {
background-image: url('path/to/img.gif');
}
I previously had an issue with floating 3 divs in my footer area which got resolved here by re-ordering the divs and adding an 'overflow:hidden' to my enclosing footer div. Now though I seem to have an extra space (like an extra return) coming between the preceding div and my footer. Just wondering what would be causing this - I had previously set a top margin of 10px to my footer div. Have now removed this but still a large extra space. Ideally I want to set the space (height) to 1opx.
Thanks for any suggestions. Here's the 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>K Blondel Design :: Carpentry & Funiture Design :: Brighton</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="oneColFixCtr.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Abel|Cutive+Mono|Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="subcontainer">
<div class="header">
<div id="mainNav">
<ul id="mainNav">
<li>Home</li>
<li>About Us</li>
<li>Our Work </li>
<li>Contact Us </li>
</ul>
</div>
<div class="contact">
E : click here
<br />
T : 07585 607521
</div>
</div>
<div class="lineborder">
</div>
<div class="sidebar-logo"><img src="Images/k-blondel-design-logo.png" width="64" height="108" alt="K Blondel Design logo" />
</div>
<div id="contentright">
<div class="galleryimg"><div class="photo"><img src="Images/winebar-furniture-01.jpg" width="145" height="200" alt="Winchester winebar" /></div></div>
<div class="galleryimg"><div class="photo"><img src="Images/wooden-outdoor-seating.jpg" width="145" height="200" alt="Winchester winebar" /></div></div>
<div class="galleryimg"><div class="photo"><img src="Images/wooden-shelving.jpg" width="145" height="200" alt="Winchester winebar" /></div></div>
<div class="galleryimg"><div class="photo"><img src="Images/wooden-winerack.jpg" width="145" height="200" alt="Winchester winebar" /></div></div>
</div>
<div id="content">
<h1>Instructions </h1>
<p>At K Blondel Design we aim to fill the gap between the over exuberant furniture maker and the general carpenter. Trained in the art of creating affordable and elegant solutions to 3D problems.</p>
<p>As a small business we are able to deliver a personal one to one design service, talking through various design and material possibilities and arriving at an affordable, bespoke and stylish solution.</p>
<p>From design through to construction and installation we specialise in storage solutions, furniture and interiors for both the domestic and commercial markets. </p>
<p>Based in Brighton we have 20 years' design and commercial experience and an ever-growing client list spanning Sussex, Hampshire, London and Kent.</p>
<!-- end .content -->
</div>
<div class="lineborder"></div>
<div id="footer">
<div class="footercolleft">
Carpentry<br/>
Furniture Design<br/>
Interior Design & Decoration
</div>
<div class="footercoladdress">
Copyright © 2014 Kevin Blondel Design<br />1 Park Terrace, Brighton BN1 0GT
</div>
<div class="footercolright">
Storage Solutions<br/>
Decking & Wooden Flooring<br/>
Shop Fitting / Commercial Interiors
</div>
</div>
<!-- end .subcontainer --></div>
<!-- end .container --></div>
</body>
</html>
and the css...
#charset "UTF-8";
body {
font: 100%/1.4;
background-color:#FFF;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 10px;
padding-left: 40px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
h1 {
font-family: 'Abel', Arial, sans-serif;
font-size:24px;
font-weight: normal;
}
h2 {
font-family: 'Abel', Arial, sans-serif;
font-size:18px;
}
p {
font-family: 'Cutive Mono', Georgia, serif;
font-size:13px;
line-height:1.4em;
font-weight:600;
}
#home #homelink,
#aboutus #aboutuslink,
#ourwork #ourworklink,
#contactus #contactuslink {
font-family: 'Abel', Arial, sans-serif;
color: #494949;
font-size:17px;
text-decoration:none;
border-bottom: solid 6px #494949;
}
#mainNav {
margin: 0;
padding: 0;
list-style: none;
}
#mainNav li {
float: left;
padding: 50px 14px 0 14px;
}
#mainNav a {
font-family: 'Abel', Arial, sans-serif;
color: #494949;
font-size:17px;
text-decoration:none;
padding: 0 20px 0 20px;
}
#mainNav a:hover {
color:#FFF;
background-color: #494949;
}
img {
border: none;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #494949;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #494949;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
width: 1352px;
background-image:url(Images/sktchbook-bgd.jpg);
background-repeat:no-repeat;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
.header {
width: 950px;
height: 72px;
margin-left:90px;
margin-right: 90px;
}
.header img{
border:none;
}
.lineborder {
width: 950px;
background-color:#494949;
height: 1px;
margin-left:110px;
margin-right:110px;
}
.contact {
float: right;
padding: 27px 0 0 0;
font-family: 'Abel', Arial, sans-serif;
color: #494949;
font-size:17px;
}
.sidebar-logo {
float: left;
width: 70px;
}
.subcontainer {
width: 1150px;
min-height: 880px;
margin: 0 auto;
/* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
#content {
padding: 40px 0;
width: 420px;
margin-left:90px;
margin-right:90px;
min-height:475px;
}
#contentright {
float: right;
padding: 40px 0;
width: 420px;
margin-right:90px;
}
.galleryimg {
display: inline-block;
vertical-align: top;
margin: 0 40px 30px 0;
}
.photo {
-moz-box-shadow: 2px 2px 2px 0px #888;
-webkit-box-shadow: 2px 2px 2px 0px #888;
box-shadow: 2px 2px 2px 0px #888;
}
.photo img {
border: 10px solid #fff;
background-color: #fff;
position: relative;
}
/* ~~ miscellaneous float/clear classes ~~ */
.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. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#footer {
padding: 0 0 0 20px;
width: 950px;
height: 150px;
margin-left:90px;
margin-right: 90px;
font-family: 'Abel', Arial, sans-serif;
color: #494949;
font-size:14px;
line-height: 1.5em;
overflow:hidden;
}
#footer a {
text-decoration:none;
padding: 0 5px 0 5px;
}
#footer a:hover {
color:#FFF;
background-color: #494949;
}
.footercolleft {
padding: 0;
margin: 0;
float: left;
width: 200px;
overflow:hidden;
}
.footercolright {
padding: 0;
width: 200px;
overflow:hidden;
}
.footercoladdress {
float:right;
padding: 0 5px 0 5px;
text-align: right;
width:250px;
}
It's coming from the bottom padding on #contentright:
You can fix that by setting the bottom padding to 0:
#contentright {
/* Your existing styles plus...*/
padding-bottom: 0;
}
Then you can apply your 10px margin-top back to your footer:
#footer {
/* Your existing styles plus...*/
margin-top: 10px;
}
Demo