Layout Messing Up When I Add Text - html

Well, I have a problem. I have my layout exactly as I want it, but when I add text in, the layout changes. It's kind of hard to explain, so I'm going to show pictures.
Layout Before Text:
Layout After Text:
Any help is greatly appreciated
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.header {
color: #AEC6CF;
font-family: gabriola;
font-weight: 900;
font-size: 50px;
position: relative;
}
/* ID */
#row1 {
width: 100%;
height: 15%;
}
#row2 {
width: 100%;
height: 2.5%;
}
#row3 {
width: 100%;
height: 70%;
}
#row4 {
width: 100%;
height: 2.5%;
}
#row5 {
width: 100%;
height: 9.7%;
}
#column1 {
border-bottom: 3px solid black;
border-right: 3px solid black;
width: 20%;
height: 100%;
left: 0;
display: inline-block;
margin-right: -0.25%;
}
#column2 {
border-bottom: 3px solid black;
border-left: 3px solid black;
width: 79%;
height: 100%;
right: 0;
display: inline-block;
margin-left: -0.25%;
}
/* Misc. */
.center {
text-align: center;
}
.right {
text-align: right;
}
.left {
text-align: left;
}
.clearfix {
float: clear;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<title>Test</title>
</head>
<body>
<div id="row1">
<div id="column1" class="clearfix">
</div>
<div id="column2" class="clearfix">
<h1 class="header center">See The Problem?</h1>
</div>
</div>
<div id="row2">
<div id="column1" class="clearfix">
</div>
<div id="column2" class="clearfix">
</div>
</div>
<div id="row3">
<span id="column1" class="clearfix">
</span>
<span id="column2" class="clearfix">
</span>
</div>
<div id="row4">
<span id="column1" class="clearfix">
</span>
<span id="column2" class="clearfix">
</span>
</div>
<div id="row5">
<div id="column1" class="clearfix" style="border-bottom: 0px;">
</div>
<div id="column2" class="clearfix" style="border-bottom: 0px;">
</div>
</div>
</body>
</html>

Related

Error in HTML text does not stand in its block

I just started learning HTML and CSS. And I got a problem. Perhaps she is not worth attention, but still I ask for help. The problem is that the word "Hi" stubbornly does not want to be displayed in its block. And I don’t know how to remove the gap over the header. And sorry for the poor code architecture.
HTML:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<header>
<div class="header">
</div>
</header>
<div class="body">
<div class="all">
<div class="cat">
<h1 acolor>Hi</h1>
</div>
<div class="categ">
<div class="mycat">
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="come">
<p class="color">
<h4></h4>
</p>
</div>
<div class="com">
<p class="color">
</p>
</div>
</div>
</div>
</div>
</div>
<main>
</main>
</div>
<footer>
<div class="footer"></div>
</footer>
</body>
</html>
CSS:
.header{
width: 1922px;
height: 109px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
background-color: #3f4246;
}
.footer{
width: 1928px;
height: 534px;
background-color: #202326;
}
.body{
width: 1920px;
height: 3240px;
background-color: #ffffff;
}
.all{
width: 1170px;
height: 700px;
}
.categ{
width: 273px;
height: 514px;
}
.cat{
width: 273px;
height: 50px;
background-color: #86b817;
margin-left: 391px;
padding-top: 50px;
}
.mycat{
width: 274px;
height: 473px;
background-color: ;
margin-left: 391px;
}
.com{
width: 269px;
height: 45px;
border: 2px solid black;
margin: 0px;
}
.color{
color: #000000;
}
.acolor{
color: black;
text-align: right ;
font-weight: 900;
}
h1 .acolor{
color: red;
}
.come{
width: 269px;
height: 65px;
border: 2px solid black;
margin: 0px;
}

I slightly cleaned your code and needs good attention, no need to use p within h2 tags:
body {
margin: 0;
}
.header {
width: 1922px;
height: 109px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
background-color: #3f4246;
}
.footer {
width: 1928px;
height: 534px;
background-color: #202326;
}
.body {
width: 1920px;
height: 3240px;
background-color: #ffffff;
}
.all {
width: 1170px;
height: 700px;
}
.categ {
width: 273px;
height: 514px;
}
.cat {
width: 273px;
height: 50px;
background-color: #86b817;
margin-left: 391px;
font-weight: 900;
text-align: center;
font-size: 40px;
vertical-align: center;
}
.mycat {
width: 274px;
height: 473px;
background-color: ;
margin-left: 391px;
}
.com {
width: 269px;
height: 45px;
border: 2px solid black;
margin: 0px;
}
.color {
color: #000000;
}
h1 .acolor {
color: red;
}
.come {
width: 269px;
height: 65px;
border: 2px solid black;
margin: 0px;
}
<body>
<header>
<div class="header">
</div>
</header>
<div class="body">
<div class="all">
<div class="cat">
Hi
</div>
<div class="categ">
<div class="mycat">
<div class="com">
<p class="color"></p>
</div>
<div class="com">
<p class="color"></p>
</div>
<div class="come">
<p class="color">
</p>
</div>
<div class="com">
<p class="color">
</p>
</div>
</div>
</div>
</div>
<main>
</main>
<footer>
<div class="footer"></div>
</footer>

You can remove height for .cat class and remove margin for h1 tag as
.cat{
width: 273px;
/*height: 50px;*/
background-color: #86b817;
margin-left: 391px;
padding-top: 50px;
}
.cat h1{
margin: 0;
}
.header{
width: 1922px;
height: 109px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
background-color: #3f4246;
}
.footer{
width: 1928px;
height: 534px;
background-color: #202326;
}
.body{
width: 1920px;
height: 3240px;
background-color: #ffffff;
}
.all{
width: 1170px;
height: 700px;
}
.categ{
width: 273px;
height: 514px;
}
.cat{
width: 273px;
/*height: 50px;*/
background-color: #86b817;
margin-left: 391px;
padding-top: 50px;
}
.mycat{
width: 274px;
height: 473px;
background-color: ;
margin-left: 391px;
}
.com{
width: 269px;
height: 45px;
border: 2px solid black;
margin: 0px;
}
.color{
color: #000000;
}
.acolor{
color: black;
text-align: right ;
font-weight: 900;
}
h1 .acolor{
color: red;
}
.come{
width: 269px;
height: 65px;
border: 2px solid black;
margin: 0px;
}
.cat h1{
margin: 0;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<header>
<div class="header">
</div>
</header>
<div class="body">
<div class="all">
<div class="cat">
<h1 acolor>Hi</h1>
</div>
<div class="categ">
<div class="mycat">
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="com">
<p class="color"><h3></h3></p>
</div>
<div class="come">
<p class="color">
<h4></h4>
</p>
</div>
<div class="com">
<p class="color">
</p>
</div>
</div>
</div>
</div>
</div>
<main>
</main>
</div>
<footer>
<div class="footer"></div>
</footer>
</body>
</html>

aligning an image and a gallery next to one another

I am trying to position the "selected" hero on the right to be aligned with the gallery of heroes to the left so I can add information and a button below the selected hero later on. This page is only missing a paragraph of text that will go below both the gallery; The selected hero and a confirmation button that will go under the hero portrait on the right. Would it be easier to contain all of it in one huge section? Or am I making this too complicated?
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time{
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow:hidden;
background-color: black;
}
.navbar a{
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover{
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
#heroList{
width: 1000px;
margin: 0 50px;
margin-top: 200px;
}
.heroes{
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames{
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color:black;
}
.heroes img{
width: 175px;
height: 175px;
}
#chosenHero{
width: auto;
margin: 0 50px;
margin-top: 50px;
}
.myHero{
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>

If you cannot use grid system, try following CSS modifications:
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time {
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow: hidden;
background-color: black;
}
.navbar a {
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
.navbar:after {
clear: both;
content: "";
display: block;
}
#heroList {
width: calc(100% - 200px);
float: left;
}
.heroes {
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames {
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color: black;
}
.heroes img {
width: 175px;
height: 175px;
}
#chosenHero {
width: 200px;
float: left;
}
.myHero {
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>

This would be the proper way of doing it.
https://i.imgur.com/xIm2fbV.png

Making a vertical navigation between banner and footer

I am running into a few issues on an assignment I am working on.
Would really appreciate some help if it's something small I am missing or if I am completely off track with my code.
The issues I am having are, I can't seem to make my navbar stretch between my banner and footer sections. I also can't seem to get my content div and the table of images within it to align to the left of the navbar.
The code I have so far is: https://pastebin.com/cFVMRCaM
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bazaar Ceramics</title>
<style>
body {
margin: 0px;
padding: 0px;
}
.mainwrapper {
width: 100%;
margin: 0 auto;
height: 100%;
}
.pagebanner {
height: 250px;
margin: 0;
}
.pagebanner img {
width: 100%;
height: 100%;
}
.main {
margin: 0;
}
.navbar {
background-color: brown;
height: 100%;
width: 20%;
float: left;
margin-bottom:
}
.navbar li {
list-style: none;
margin-bottom: 15px;
}
.headers {
width: 80%;
float: left;
padding: 0;
height: 100%;
}
.header {
background-color: #000;
text-align: center;
}
.header h1 {
color: #fff;
margin: 0;
}
.subheading {
background-color: #f8d631;
text-align: center;
}
.subheading h2 {
background-color: #f8d631;
margin: 0;
}
.content {
position: relative;
align: left;
}
.table {
padding-left:500px
border: 20px;
}
.footer {
background-color: darkgreen;
height:20px;
margin-bottom: inherit;
}
</style>
</head>
<body>
<div class="mainwrapper">
<div class="pagebanner">
<img src="../images/banner.jpg"="PageBanner">
</div><!--PageBanner-->
<div class="main">
<div class="navbar">
<ul>
<li>
Information
</li>
<li>
Home
</li>
</ul>
</div><!--Navbar-->
<div class="headers">
<div class="header">
<h1>The Club Site</h1>
</div><!--Main page heading section-->
<div class="subheading">
<h2>Members Prices</h2>
</div><!--Sub heading section-->
</div>
</div>
<div class="content">
<div class="table">
<table>
<th>Discount Prices</th>
<tr><td><img src="../images/smaller/bcpot002_smaller.jpg"</td>
<td><img src="../images/smaller/bcpot002_smaller.jpg"</td>
<td><img
src="../images/smaller/bcpot010_smaller.jpg"</td></tr>
<tr><td><img src="HTML Pract
A/images/smaller/bcpot002_smaller.jpg"</td><td><img src="HTML
Pract A/images/smaller/bcpot006_smaller.jpg"</td><td><img
src="HTML Pract A/images/smaller/bcpot013_smaller.jpg"</td>
</tr>
</table>
</div><!--Table Section-->
</div><!--Content section-->
<div class="footer">
<footer>wsrgferg</footer>
</div><!--Footer section-->
</div><!--Endwrapper-->
</body>
</html>

Alright, then the below should be what you wanted. Using absolute positioning and moving all of the content except the banner and footer into the .main div. Position the .main div relatively and the navbar absolutely. Give the other inner content sections a margin-left of 20%;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bazaar Ceramics</title>
<style>
body {
margin: 0px;
padding: 0px;
}
.mainwrapper {
width: 100%;
margin: 0 auto;
height: 100%;
}
.pagebanner {
height: 250px;
margin: 0;
}
.pagebanner img {
width: 100%;
height: 100%;
}
.main {
margin: 0;
position:relative;
}
.navbar {
background-color: brown;
width: 20%;
position: absolute;
top: 0;
bottom: 0;
}
.navbar li {
list-style: none;
margin-bottom: 15px;
}
.headers {
width: 80%;
margin-left:20%;
padding: 0;
height: 100%;
}
.header {
background-color: #000;
text-align: center;
}
.header h1 {
color: #fff;
margin: 0;
}
.subheading {
background-color: #f8d631;
text-align: center;
}
.subheading h2 {
background-color: #f8d631;
margin: 0;
}
.content {
position: relative;
margin-left:20%;
}
.table {
padding-left:500px
border: 20px;
}
.footer {
background-color: darkgreen;
height:20px;
margin-bottom: inherit;
}
</style>
</head>
<body>
<div class="mainwrapper">
<div class="pagebanner">
<img src="http://www.fillmurray.com/500/300" id="PageBanner">
</div><!--PageBanner-->
<div class="main">
<div class="navbar">
<ul>
<li>
Information
</li>
<li>
Home
</li>
</ul>
</div><!--Navbar-->
<div class="headers">
<div class="header">
<h1>The Club Site</h1>
</div><!--Main page heading section-->
<div class="subheading">
<h2>Members Prices</h2>
</div><!--Sub heading section-->
</div>
<div class="content">
<div class="table">
<table>
<th>Discount Prices</th>
<tr><td><img src="http://www.fillmurray.com/200/100"></td>
<td><img src="http://www.fillmurray.com/200/100"></td>
<td><img
src="http://www.fillmurray.com/200/100"></td></tr>
<tr><td><img src="http://www.fillmurray.com/200/100"></td><td><img src="http://www.fillmurray.com/200/100"></td><td><img
src="http://www.fillmurray.com/200/100"></td>
</tr>
</table>
</div><!--Table Section-->
</div><!--Content section-->
</div>
<div class="footer">
<footer>wsrgferg</footer>
</div><!--Footer section-->
</div><!--Endwrapper-->
</body>
</html>

Form Div breaks parent div and wraps

I really need your help with this. For the life of me, I cannot begin to understand as to why I cannot seem to get my form DIV to properly be positioned on the right side of my 2 column layout.
See attached picture below:
Here is the HTML & CSS in question:
* {
font-family: Segoe UI;
font-size: 9pt;
}
html, body {
padding: 0;
margin: 0;
}
body {
background: rgb(187,195,203);
}
.Absolute-Center {
margin: auto;
}
#wrapper {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
#layout {
height: auto;
width: 900px;
border: 1px solid rgb(112,112,112);
}
#box1 {
background: rgb(141,155,169);
color: #FFF;
padding: 3px;
font-weight: bold;
}
#box2 {
width: 100%;
background: rgb(240,240,240);
border-bottom: 1px solid rgb(180,180,180);
padding: 4px;
box-sizing: border-box;
}
#box3 {
width: 100%;
border-bottom: 1px solid rgb(180,180,180);
}
#box4 {
background: #FFF;
float: left;
width: 175px;
height: 375px;
border-right: 1px solid rgb(180,180,180);
}
#box5 {
background: rgb(240,240,240);
height: 375px;
}
#box7 {
background: rgb(240,240,240);
padding: 5px;
text-align:center;
}
#leftcolumn {
float: left;
}
#rightcolumn {
border: 0;
padding: 3px;
text-align: center;
}
.clear {
clear: both;
}
fieldset {
margin: 0;
padding: 2px;
padding-bottom: 5px;
}
div.wrapper {
width: 500px;
}
div.form {
width: 100%;
background-color: rgb(240,240,240);
border: 1px sold #000;
padding: 5px;
}
div.row {
clear: both;
padding-top: 5px;
}
div.row span.label {
float: left;
width: 50px;
text-align: right;
padding-right: 5px;
}
div.row span.formw {
float: left;
width: 200px;
text-align: left;
}
div.spacer {
clear: both;
}
span.title {
color: rgb(70,141,180);
}
input {
width: 150px;
border: 1px solid #000;
}
<div id="wrapper">
<div id="layout" class="Absolute-Center">
<div id="box1">Application Title</div>
<div id="box2">
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div class="clear"></div>
</div>
<div id="box3">
<!-- LEFT WINDOW PANE -->
<div id="box4">
<div id="menu_wrapper">
<ul id="menu">
<li data-show="#1">File Information</li>
<li data-show="#2">Comments</li>
</ul>
</div>
</div>
<!-- RIGHT WINDOW PANE -->
<div id="box5">
<!-- CONTENT [TAB1] -->
<div id="1" style="width: 100%;" class="hidden tab">
<div class="form">
<form>
<div style="border-bottom: 1px solid #000;" class="row"><span class="title">FILE INFORMATION</span></div>
<div class="row">
<span><b>Date Received</b></span>
</div>
<div class="row">
<span class="label">From:</span><span class="formw"><input type="text"/></span>
</div>
<div class="row">
<span class="label">To:</span><span class="formw"><input type="text"/></span>
</div>
<div class="spacer"></div>
</form>
</div>
</div>
<!-- CONTENT [TAB2] -->
<div id="2" class="hidden tab"></div>
</div>
</div>
</div>
</div>

I got it to sit in the right container by adding float:right to the form container div
Fiddle - http://jsfiddle.net/90777hu9/

It's because you float box4 left but you do not float box5 right. So it is still in the flow of the document and pushed below the float left.

Added float:left and width: 78%; to .box5 Press in the snippet the fullpage button to see it
* {
font-family: Segoe UI;
font-size: 9pt;
}
html, body {
padding: 0;
margin: 0;
}
body {
background: rgb(187,195,203);
}
.Absolute-Center {
margin: auto;
}
#wrapper {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
#layout {
height: auto;
width: 900px;
border: 1px solid rgb(112,112,112);
}
#box1 {
background: rgb(141,155,169);
color: #FFF;
padding: 3px;
font-weight: bold;
}
#box2 {
width: 100%;
background: rgb(240,240,240);
border-bottom: 1px solid rgb(180,180,180);
padding: 4px;
box-sizing: border-box;
}
#box3 {
width: 100%;
border-bottom: 1px solid rgb(180,180,180);
}
#box4 {
background: #FFF;
float: left;
width: 175px;
height: 375px;
border-right: 1px solid rgb(180,180,180);
}
#box5 {
background: rgb(240,240,240);
height: 375px;
float:left;
width: 78%;
}
#box7 {
background: rgb(240,240,240);
padding: 5px;
text-align:center;
}
#leftcolumn {
float: left;
}
#rightcolumn {
border: 0;
padding: 3px;
text-align: center;
}
.clear {
clear: both;
}
fieldset {
margin: 0;
padding: 2px;
padding-bottom: 5px;
}
div.wrapper {
width: 500px;
}
div.form {
width: 100%;
background-color: rgb(240,240,240);
border: 1px sold #000;
padding: 5px;
}
div.row {
clear: both;
padding-top: 5px;
}
div.row span.label {
float: left;
width: 50px;
text-align: right;
padding-right: 5px;
}
div.row span.formw {
float: left;
width: 200px;
text-align: left;
}
div.spacer {
clear: both;
}
span.title {
color: rgb(70,141,180);
}
input {
width: 150px;
border: 1px solid #000;
}
<div id="wrapper">
<div id="layout" class="Absolute-Center">
<div id="box1">Application Title</div>
<div id="box2">
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div class="clear"></div>
</div>
<div id="box3">
<!-- LEFT WINDOW PANE -->
<div id="box4">
<div id="menu_wrapper">
<ul id="menu">
<li data-show="#1">File Information</li>
<li data-show="#2">Comments</li>
</ul>
</div>
</div>
<!-- RIGHT WINDOW PANE -->
<div id="box5">
<!-- CONTENT [TAB1] -->
<div id="1" style="width: 100%;" class="hidden tab">
<div class="form">
<form>
<div style="border-bottom: 1px solid #000;" class="row"><span class="title">FILE INFORMATION</span></div>
<div class="row">
<span><b>Date Received</b></span>
</div>
<div class="row">
<span class="label">From:</span><span class="formw"><input type="text"/></span>
</div>
<div class="row">
<span class="label">To:</span><span class="formw"><input type="text"/></span>
</div>
<div class="spacer"></div>
</form>
</div>
</div>
<!-- CONTENT [TAB2] -->
<div id="2" class="hidden tab"></div>
</div>
</div>
</div>
</div>

Block Elements Not Vertically Aligning

I'm currently trying to develop a website. At the moment I'm trying to get the design down, but its giving me quite a tough time.
I have 5 div's. Each one contains two span's, column1 and column2. The div's are block and the span's are inline-block. However, for some reason the div's don't want to align vertically. Any help is appreciated. Also, another thing. Some of the span's inside the div's were replaced with div's. I did this because I planned on using block elements inside of those particular areas and to do that and still validate they had to be div's, not span's.
Below is my current code:
.header {
color: #AEC6CF;
font-family: gabriola;
font-weight: 900;
font-size: 50px;
position: relative;
}
/* ID */
#row1 {
width: 98%;
height: 15%;
position: absolute;
display: block;
}
#row2 {
width: 98%;
height: 2.5%;
position: absolute;
display: block;
}
#row3 {
width: 98%;
height: 70%;
position: absolute;
display: block;
}
#row4 {
width: 98%;
height: 2.5%;
position: absolute;
display: block;
}
#row5 {
width: 98%;
height: 7.25%;
position: absolute;
display: block;
}
#column1 {
border-bottom: 3px solid black;
border-right: 3px solid black;
width: 20%;
height: 100%;
left: 0;
position: absolute;
display: inline-block;
}
#column2 {
border-bottom: 3px solid black;
border-left: 3px solid black;
width: 79.8%;
height: 100%;
right: 0;
position: absolute;
display: inline-block;
}
/* Misc. */
.center {
text-align: center;
}
.right {
text-align: right;
}
.left {
text-align: left;
}
.clearfix {
float: clear;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<title>Design</title>
</head>
<body>
<div id="row1">
<div id="column1" class="clearfix">
</div>
<div id="column2" class="clearfix">
<h1 class="header center">Generic Header</h1>
</div>
</div>
<div id="row2">
<div id="column1" class="clearfix">
</div>
<div id="column2" class="clearfix">
</div>
</div>
<div id="row3">
<span id="column1" class="clearfix">
</span>
<span id="column2" class="clearfix">
</span>
</div>
<div id="row4">
<span id="column1" class="clearfix">
</span>
<span id="column2" class="clearfix">
</span>
</div>
<div id="row5">
<div id="column1" class="clearfix" style="border-bottom: 0px;">
</div>
<div id="column2" class="clearfix" style="border-bottom: 0px;">
</div>
</div>
</body>
</html>

A couple of issues... is there a reason why all of your divs are positioned absolutely? Without specific margins they all just stack ontop of each other since position: absolute; takes them out of the flow of the document. Even relative to the container, they will all be stacked inside of the container.
Secondly, your column widths add up to over 100%. You need to account for the space that the border takes up.
Here is your code without absolutely positioned divs and with adjusted column widths. Hopefully that should get you on the right track.
.header {
color: #AEC6CF;
font-family: gabriola;
font-weight: 900;
font-size: 50px;
position: relative;
}
/* ID */
#row1 {
width: 98%;
height: 15%;
display: block;
}
#row2 {
width: 98%;
height: 2.5%;
display: block;
}
#row3 {
width: 98%;
height: 70%;
display: block;
}
#row4 {
width: 98%;
height: 2.5%;
display: block;
}
#row5 {
width: 98%;
height: 7.25%;
display: block;
}
#column1 {
border-bottom: 3px solid black;
border-right: 3px solid black;
width: 20%;
height: 100%;
left: 0;
display: inline-block;
}
#column2 {
border-bottom: 3px solid black;
border-left: 3px solid black;
width: 73%;
height: 100%;
right: 0;
display: inline-block;
}
/* Misc. */
.center {
text-align: center;
}
.right {
text-align: right;
}
.left {
text-align: left;
}
.clearfix {
float: clear;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<title>Design</title>
</head>
<body>
<div id="row1">
<div id="column1" class="clearfix">
</div>
<div id="column2" class="clearfix">
<h1 class="header center">Generic Header</h1>
</div>
</div>
<div id="row2">
<div id="column1" class="clearfix">
</div>
<div id="column2" class="clearfix">
</div>
</div>
<div id="row3">
<span id="column1" class="clearfix">
</span>
<span id="column2" class="clearfix">
</span>
</div>
<div id="row4">
<span id="column1" class="clearfix">
</span>
<span id="column2" class="clearfix">
</span>
</div>
<div id="row5">
<div id="column1" class="clearfix" style="border-bottom: 0px;">
</div>
<div id="column2" class="clearfix" style="border-bottom: 0px;">
</div>
</div>
</body>
</html>