Basic design for a complete page layout
Sorry if this has been asked before, but I've searched forever and still can't find a basic project to achieve what I want for my layout (to confirm that I don't want top and bottom free space)
I have a personal photography site where I post my amateur photography to friends and family and I would like to make it a little better. In my head, I would like each page to be non-scrollable, and I will make sure the content is placed within the space reasonably.
Currently, I am not worried about limited space on mobile and tablet devices as once I have a basic structure I plan on making a mobile and tablet page so I can specify a design rather than a fluid site. (I can move on to this later)
So, I would like to have the below example as my page layout
I'm not sure how far away I am with my code. I believe I have almost none, and I just skip the bit that allows my main div to be limited by the available space left on the screen between the end of the ho noshade and stop before the start of the footer, this will allow the image to be displayed at 100% height, while the image (or other object) will change depending on the size of the viewport
I really appreciate any help and again apologize if this has been asked before, I am trying my best not to put the site in a table format as I know this is a very ancient way of coding now
I did some research and thought that I might need to use jquery squirt to set the document / window height, but since I'm new to this I can't seem to find a good example
To summarize, I just want the main div to stretch from the bottom of the hr noshade line to the top of the footer.
@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 {
float: left;
width: 100%;
background-color: #F80307;
}
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;
}
<!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>
<!--End of CSS Link-->
<!--Start of Fonts-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/tangerine:n4,n7:default.js" type="text/javascript"></script>
<!--End of Fonts-->
<meta charset="utf-8">
</head>
<!--Start of Webpage-->
<body>
<!--Start of Page Wrapper (no main content above this line-->
<div class="wrapper">
<!--Start of Main Content-->
<div class="content">
<!--Start of Page Content-->
<!--Start of Title-->
<div class="title">
<p>Skc Photography</p>
</div>
<!--End of Title-->
<!--Start of Member Login--
<div class="login"><p>Member Login</p></div>
<!--End of Member Login-->
<!--Start of line-->
<hr noshade>
<!--Start of line-->
<!--Start of Menu-->
<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>
<!--End of Menu-->
<!--Start of line-->
<hr noshade>
<!--Start of line-->
<!--Start of Main Content-->
<div class="main">This div needs to stretch to top of the Footer and not past it.
</div>
<!--End of Main Content-->
</div>
<!--End of Page Content-->
</div>
<!--End of Page Wrapper (no main content Below this line-->
<!--Start of Footer-->
<div class="footer">SKCPhotography - Copyright © 2014</div>
<!--End of Footer-->
</body>
<!--End of Webpage-->
</html>
source to share
You can achieve this layout easily if you set a main div with a height that calculates 100% minus the known growth factors (your header, menu, and footer).
Here's a simple structured layout based on your request. Hopefully you can copy it to your liking.
NOTE. When viewing it, view it in full page because the page is too small for the main div to display
body, html {
width: 100%;
height: 100%;
margin: 0px;
}
#container {
width: 100%;
height: 100%;
padding: 10%;
box-sizing: border-box;
}
#header {
width: 100%;
height: 30px;
background: blue;
text-align: center;
}
#menu {
width: 100%;
height: 20px;
background: green;
text-align: center;
}
#main {
width: 100%;
height: calc(100% - 70px);
background: orange;
text-align: center;
}
#footer {
width: 100%;
height: 20px;
background: pink;
text-align: center;
}
<div id="container">
<div id="header">header</div>
<div id="menu">Menu</div>
<div id="main">Main</div>
<div id="footer">Footer</div>
</div>
source to share
Try to change css. Then add another element to the DOM and you're fine. So you need to change your CSS
.wrapper {
min-height: 100%;
margin: -20px auto 0;
width: 70%;
position: relative;/*This is new*/
}
.main {
position: absolute;/*This is new*/
/* float: left; */ REMOVE THIS
width: 100%;
height: 100%;/*This is new*/
background-color: #F80307;
}
In the div with class MAIN, add another div that will be positioned relatively.
.new_div{
position: relative;
}
source to share