Hi All

 

Sorry if this has been asked before but I have been searching forever and still cannot come up with a basic design to achieve what I want for my layout (To confirm I do not want top and bottom white space)

 

I host a website where I post my amateur photography to friends and family and I would like to make it look a little better, In my head I would like each page to be none scrollable and I will make sure the content fits inside the space reasonably.

 

I'm not currently worried about limited space on mobile and tablet devices as when I have the basic structure I plan on making a mobile and a tablet page so that I can specify the design rather than a fluid site. (I may move to this at a later date)

 

So I would like to have the below example as my page layout

 

 

I'm not sure how far off I am with my code I believe I have it almost there and I'm just missing the bit that allows my main div to be limited to the available space left on the screen between the end of the menu and stop before the start of the footer div, this will allow such as a picture to be 100% hight of the div and the picture (or other object) will re resize depending on the size of the viewing area

 

I really appreciate any help and again apologies if this has been asked before, I'm trying my best not to put up a table formatted site as I know this is very ancient way of coding now

 

CSS Code

 

@charset "utf-8";

/* CSS Document */

* {

margin: 0;

text-align: center;

}

html, body {

height: 100%;

width: 100%;

margin: 0;

}

.wrapper {

min-height: 100%;

margin: 0 auto -20px; /* the bottom margin is the negative value of the footer's height */

}

footer, .push {

height: 20px;

}

.wrapper header #container {

background-color: #A35051;

width: 80%;

margin-left: 10%;

margin-right: 10%;

}

#container {

width: 80%;

margin-left: 10%;

margin-right: 10%;

}

.wrapper main img {

width: 100%;

}

.wrapper header #container #menu {

width: 33.33%;

float: left;

background-color: #180FE4;

}

#container .copyright {

background-color: #32EB16;

}

HTML Code

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

<meta name="description" content="Index">

<script type="text/javascript" src="js/html5.js"></script>

<link href="index.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="wrapper">

<header>

<div id="container">

<h1>Title</h1>

</div>

</header>

<header>

<div id="container">

<div id="menu">Menu 1

</div>

<div id="menu">Menu 2

</div>

<div id="menu">Menu 3

</div>

</div>

</header>

<div id="container">

<main>

<img src="../1.jpg" alt="" id="IMG"> </main>

</div>

<div class="push"></div>

</div>

<footer>

<div id="container">

<p class="copyright">Copyright © 2014</p>

</div>

</footer>

</body>

</html>

Thanks The link above was helpful

Ok so I used the link above and have built the following (its a starter landing page)

 

Please advise if I have bad code or code that could be better but it seems to be OK apart from the below question.

 

 

The issue I'm still having is in the <div class="main"> it does not stretch from the bottom of the <hr noshade> to the top of the <div class="footer">

 

I want this as I would like to be able to code the img so that it keeps it proportions and goes to the maximum size possible either 100% hight or width depending on the image used

 

I do not want the image to go over the 70% container or over the footer as i do not want a scroll bar.

 

HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

<!--Start of CSS Link-->

<link href="test.css" rel="stylesheet" type="text/css">

<style type="text/css">

body {

background-color: #e4e5e7;

}

</style>

<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/tangerine:n4,n7:default.js" type="text/javascript"></script>

<meta charset="utf-8">

</head>

<body>

<div class="wrapper">

<div class="content">

<div class="title">

<p>Skc Photography</p>

</div>

<hr noshade>

<div class="menuwrapper">

<div class="menu">

<p>Home</p>

</div>

<div class="menu">

<p>Galleries</p>

</div>

<div class="menu">

<p>Contact Me</p>

</div>

<div class="menu2">

<p>Member Login</p>

</div>

</div>

<hr noshade>

<div class="main">

<div class="imgouter"><img src="1.jpg"></div>

</div>

</div>

</div>

<div class="footer">SKCPhotography - Copyright © 2014</div>

</body>

</html>

CSS Code

@charset "utf-8";

/* CSS Document */

* {

padding: 0px;

margin: 0px;

}

html, body {

margin: 0;

padding: 0;

height: 100%;

}

* html #outer {/* ie6 and under only*/

height:100%;

}

.content {

padding-top: 20px;

}

.wrapper {

min-height: 100%;

margin: -20px auto 0;

/*Change this to change height of footer must match .footer height number*/

width: 70%;

}

.footer {

height: 20px; /*Change this to change height of footer must match .wrapper margin -number*/

background-color: #2C5463;

text-align: center;

width: 70%;

color: #FCFCFC;

margin-left: auto;

margin-right: auto;

border-radius: 151px;

}

.title {

font-size: 50px;

font-family: tangerine;

font-style: normal;

font-weight: 700;

font-variant: normal;

color: #2C5463;

float: left;

width: 100%;

margin-bottom: 2px;

margin-top: 10px;

}

.main {

background-color: #938D8D;

float: left;

width: 100%;

}

hr {

border-radius: 208px;

border-width: 2px;

border-color: #2C5463;

}

.menu {

text-align: center;

color: #FCFCFC;

background-color: #2C5463;

float: left;

width: 100px;

margin-right: 5px;

padding-top: 3px;

padding-right: 3px;

padding-bottom: 3px;

padding-left: 3px;

border-radius: 38px;

}

.menu2 {

text-align: center;

color: #FCFCFC;

background-color: #2C5463;

float: Right;

width: 100px;

padding-top: 3px;

padding-right: 3px;

padding-bottom: 3px;

padding-left: 3px;

border-radius: 38px;

}

.menuwrapper {

width: 100%;

float: left;

margin-top: 2px;

margin-bottom: 2px;

}

.img {

float: left;

}

.imgouter{

text-align: center;

background-color: #e4e5e7;

}

.imgouter img{

display: inline-block;

}

I think you can add some more different styles in the css code.