Floating and positioning in CSS - html

Question

I've been working on this for a while trying to figure out floating and margins, but I cant seem to get it to work correctly. I think I've done most of everything that the book says to do in this picture, this is what I'm trying to make it look like
I think I might be floating things wrong, everything is just stacking on top of each other on the left side. Here is my fiddle: http://jsfiddle.net/d2u9qLxv/
I've been messing around with the floating and just can't seem to get the hang of it.
Here's my css:
header, footer, nav, div, p, body {
font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
font-size: 1em;
}
header {
background-color: rgb(63, 159, 217);
height: 3em;
}
header .brand {
float: left;
font-family: Vendana, Arial, sans-serif;
padding: 8px 20px 12px;
margin-left: 3em;
font-size: 1.5em;
font-weight: bold;
line-height: 1;
color: #f5f5f5;
text-decoration: none;
}
header nav {
margin: 0.70em 1em 0 0;
}
header ul {
float: left;
margin:0;
padding:0;
}
header li {
padding: 0 1em;
}
header li a:link {
color: #f5f5f5;
text-decoration: none;
}
/* Main structure */
div#container {
}
#main {
margin: 0 20em 0 16em;
}
aside {
}
#rail {
}
/* other common classes */
.well, .alert {
margin-bottom: 2em;
padding: 1em;
}
.well {
float: left;
position: absolute;
width: 15em;
background-color: #f5f5f5;
border: 1px solid #eee;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.well h3 {
float: right;
position: absolute;
width: 19em;
background-color: #b6d1f2;
padding: 1em;
}
.alert {
float: left;
position: absolute;
width: 15em;
background-color: #edebe1;
border-color: #e0d9cb;
color: #817b58;
}
.breadcrumb {
padding: 0.5em 1em;
list-style: none;
background-color: #fbfbfb;
}
/* main styles */
#main {
padding: 0.5em 0.75em;
}
#main h2 {
padding-top: 1em;
font-size: 1.5em;
}
#main h4 {
padding-top: 1.5em;
font-size: 1.2em;
}
#main th {
text-align: left;
}
#main table {
}
#main #yourCompany {
margin-bottom: 1.5em;
font-size: 0.8em;
}
#main #client {
font-size: 0.8em;
}
#main hr {
clear: both;
}
.bigButton {
margin-top: 1em;
background-color: rgb(63, 159, 217);
text-align: center;
color: #f5f5f5;
text-decoration: none;
}
/* left rail styles */
#rail nav {
}
#rail nav ul {
list-style-type:none;
font-size: 1.1em;
}
#rail nav ul li {
margin-bottom: 0.3em;
}
/* right aside styles */
ul#changeList, ul#sellersList, ul#messageList {
background-color: white;
list-style-type:none;
}
ul#changeList li {
overflow: auto;
padding-top: 1em;
}
ul#changeList li p{
padding-top: 0.5em;
}
ul#changeList li span {
min-width: 1.75em;
text-align: right;
font-size: 2em;
padding: 0 1em 0 0;
color: #616466;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
ul#sellersList li, ul#messageList li {
overflow: auto;
padding: 1em 0.25em 0 0;
font-size: 0.75em;
}
ul#sellersList img{
}
ul#sellersList p {
padding-top: 1.5em;
}
ul#messageList img {
padding-right: 0.5em;
}
#messageList li p {
font-size: 0.9em;
padding: 0.3em 0.25em;
}

Answer 1

Try something like this DEMO
header, footer, nav, div, p, body {
font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;
font-size: 1em;
}
header {
background-color: rgb(63, 159, 217);
height: 3em;
}
header .brand {
float: left;
font-family: Vendana, Arial, sans-serif;
padding: 8px 20px 12px;
margin-left: 3em;
font-size: 1.5em;
font-weight: bold;
line-height: 1.2em;
color: #f5f5f5;
text-decoration: none;
}
header nav {
margin: 0.70em 1em 0 0;
}
header ul {
float: left;
margin:0;
padding:0;
}
header li {
list-style:none;
padding: 0 1em;
float:left;
line-height: 3em;
}
header li a:link {
color: #f5f5f5;
text-decoration: none;
}
/* Main structure */
div#container {
}
#main {
margin: 0 20em 0 16em;
}
aside {
}
#rail {
}
/* other common classes */
.well, .alert {
margin-bottom: 2em;
padding: 1em;
}
.well {
float: left;
position: absolute;
width: 15em;
background-color: #f5f5f5;
border: 1px solid #eee;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.well h3 {
float: right;
position: absolute;
width: 19em;
background-color: #b6d1f2;
padding: 1em;
}
.alert {
float: left;
position: absolute;
width: 15em;
background-color: #edebe1;
border-color: #e0d9cb;
color: #817b58;
}
.breadcrumb {
padding: 0.5em 1em;
list-style: none;
background-color: #fbfbfb;
}
/* main styles */
#main {
padding: 0.5em 0.75em;
width: 60%;
}
#main h2 {
padding-top: 1em;
font-size: 1.5em;
}
#main h4 {
padding-top: 1.5em;
font-size: 1.2em;
}
#main th {
text-align: left;
}
#main table {
}
#main #yourCompany {
float:left;
margin-bottom: 1.5em;
font-size: 0.8em;
}
#main #client {
float:right;
font-size: 0.8em;
}
#main hr {
clear: both;
}
.bigButton {
margin-top: 1em;
background-color: rgb(63, 159, 217);
text-align: center;
color: #f5f5f5;
text-decoration: none;
}
/* left rail styles */
#rail {
width:20%
}
#rail nav {
}
#rail nav ul {
list-style-type:none;
font-size: 1.1em;
}
#rail nav ul li {
margin-bottom: 0.3em;
}
/* right aside styles */
ul#changeList, ul#sellersList, ul#messageList {
background-color: white;
list-style-type:none;
}
ul#changeList li {
overflow: auto;
padding-top: 1em;
}
ul#changeList li p{
padding-top: 0.5em;
}
ul#changeList li span {
min-width: 1.75em;
text-align: right;
font-size: 2em;
padding: 0 1em 0 0;
color: #616466;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
ul#sellersList li, ul#messageList li {
overflow: auto;
padding: 1em 0.25em 0 0;
font-size: 0.75em;
}
ul#sellersList img{
}
ul#sellersList p {
padding-top: 1.5em;
}
ul#messageList img {
padding-right: 0.5em;
}
#messageList li p {
font-size: 0.9em;
padding: 0.3em 0.25em;
}
aside{width:20%}
table img{
width: 150px;
height: 150px;
background: #333;
}

Answer 2

The menu options are showing vertically instead of floating leftwards because you've put the float: left onto the ul element; it should be on the li list elements themselves, so they all float left with respect to each other.
However, the more usual way of doing menus, which avoids the vagaries of floating, is to make the list elements to be inline elements (they are block elements by default to achieve the vertical nature of lists. So use:
li { display: inline; }
You will also need:
ul { list-style-type: none; }
to get rid of the bullet points.