Dreamweaver - div positioning

Author

div positioning

Stephen

2006-02-12, 6:43 pm

I have a two column page that I am having a hard time with. The menu
(left) is pushed below the content (right). I have tried every
combination of float, clear, etc... to make it work to no avail. I am
new to web authoring with divs & css (used tables previously). Here is
the link to the page (look at bottom of page):
http://www.massageeliteinfo.com/LeftNav2col.htm

Here is the style sheet code (any help with this is appreciated):

> navBar is left div
> container is right div

/************** body **************/

body{
font-family: Georgia, Verdana, Tahoma, Arial;
margin: 0px 100px 0px 100px;
background: #ede5d2;
width:800px;
}

/************** menu **************/

#navBar{
float:left;
width:200px;
padding: 10px 10px 10px 10px;
border-left: 1px solid #800000;
background: url(images/side3.jpg) repeat top left;
}

/************** menu ul style **************/

#menu a {
padding-bottom: 10px;
color:#fff;
}

/************** container **************/

#container {
float: right;
margin: 0px 0px 0px 220px;
padding: 10px 0 0 0;
border-top: 1px solid #800000;
border-left: 1px solid #800000;
border-right: 1px solid #800000;
background-color:#fff;
}

/************** web page header **************/

#header {
height: 85px;
float: left;
width: 100%;
padding: 10px;
background: url(images/massageelite.gif) no-repeat top left;
}

/************** links **************/

a:link, a:visited {
color: #800000;
text-decoration: none;
}

/* overrides decoration from previous rule for hovered links */
a:hover {
text-decoration: underline;
}

/* IE fix, blockquotes has font set to bold if embedded in a li with
bold font */
blockquote {
font-weight:normal;
}

/************** headers **************/

h1, h2, h3, h4, h5, h6 {
font-family: Georgia, Verdana, Tahoma, Arial;
margin: 0px;
padding: 0px;
}

h1{
font-family: Georgia, Verdana, Tahoma, Arial;
font-size: 120%;
color: #800000;
}

h2{
font-size: 114%;
color: #800000;
}

h3{
font-size: 100%;
color: #800000;
}

h4{
font-size: 100%;
font-weight: normal;
color: #800000;
}

h5{
font-size: 100%;
color: #800000;
}

/************** lists **************/

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

#numberedLists {
list-style: decimal outside;
}

#numberedLists li{
font-weight:normal;
}

#paraBreakout {
font-style:italic;
}
/*************** Component Divs **************/

#siteName{
margin: 0px;
padding: 0px 0px 10px 10px;
}

/*************** #pageName styles **************/

#pageName{
padding: 0px 0px 10px 10px;
}

/************** #feature styles ***************/

#featureServices {
text-align:center;
border-bottom:solid 1px #800000;
border-top:solid 1px #800000;
padding:10px;
font-size: 80%;
background:#ede5d2;
}

..feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
}

..feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}

/************** #story styles *****************/

#story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}

#story p{
padding: 0px 0px 10px 0px;
}

..massageTypesContentList li{
font-weight:bold;
}

/************* #siteInfo styles ***************/

#siteInfo{
clear: both;
border-top: 1px solid #800000;
font-size: 8pt;
font-family: Georgia, Verdana, Tahoma, Arial;
color: #800000;
background-color: #ede5d2;
padding: 5px 5px 10px 5px;
margin-top: 0px;
}

#siteInfo a {
padding: 0px 4px 0px 0px;
font-size: 8pt;
font-family: Georgia, Verdana, Tahoma, Arial;
color: #800000;
}

/* negative top margin pulls siteinfo up so its top border overlaps
(and thus lines up with)
the bottom border of the navBar in cases where they "touch" */

/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #800000;
font-size: 90%;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a:link{
padding: 2px 0px 2px 10px;
width: 100%;
voice-family: "\"}\"";
voice-family:inherit;
width: auto;
}

#sectionLinks a:visited{
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
padding: 2px 0px 2px 10px;
}

/*********** .relatedLinks styles ***********/

..relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

..relatedLinks h3{
padding: 10px 0px 2px 0px;
}

/************** #headlines styles **************/

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}

#headlines p{
padding: 5px 0px 5px 0px;
}

/* this is for the top anchor bookmarks */
..top {
text-align:right;
color:#A9A9A9;
float:right;
margin-right:10px;
font-weight:normal;
}

/* controls bullets used to demark text bodies */
#bullet {
margin: 0px 10px 0px 0px;
}

#bulletList {
margin: 0px 7px 0px 9px;
}

Amanda H.

2006-02-12, 6:43 pm

Hey there,

Are you trying to have all of the elements line up centrally, as
opposed to offset, right?

Amanda H.

Stephen

2006-02-12, 6:43 pm

I am trying to get the menu (which is waaaay at the bottom/left of the
page) to be up top and to the left of the content.

Amanda H.

2006-02-12, 6:43 pm

Okay, well don't despair. I've been working on it for a bit, cleaning
up your code, and replacing some of it for more leaner bits. I'll load
it up on my website in a bit so you can download the code and compare
it to what you had and learn a little more :). Then, if you have any
questions about the code I changed, just email me at
amanda@amandahenson.com k?

Amanda H.

Stephen

2006-02-12, 6:43 pm

very cool! it seems the more I try to fix it the more it breaks...

I am a c#/sql server programmer and not used to having to put so much
effort into the layout/positioning of controls. I thought, huh, what
could be so hard about designing web pages. well, if your NOT trying
to adhear to any standards then its easy.

let me know the url of your web site, the url in your email is under
construction.

Amanda H.

2006-02-12, 6:43 pm

Man! That was sooo crazy. I ended up starting from scratch and
rebuilding the page, step-by-step. The way I have it set up it nice
and clean, and nested.

I got it to work right in 7 out of 8 broswers and tried it on OS X and
WinXP: Safari, Opera 8.5 (Win/Mac), IE6, Netscape 8/Win & 7.2/Mac,
Firefox 1.5/Win & Firefox 1.0/Mac.

The only one that was a little off lines up flush left, and that was in
IE5.5/Mac. O if I were a man, I would imitate Tim Allen right about
now.

The address is easy: www.amandahenson.com/massage/LeftNav2col.html
www.amandahenson.com/massage/LeftNav2col.css

I think your file was originally htm? Sorry, I changed it on accident
:(.

Make sure to compare the files, so you can see what I did. Ta ta.

Amanda H.

Stephen

2006-02-16, 6:40 pm

excellent! thanks for all your efforts. I will look at your css and
see if I can learn something.

thanks again.

Amanda H. wrote:
> Man! That was sooo crazy. I ended up starting from scratch and
> rebuilding the page, step-by-step. The way I have it set up it nice
> and clean, and nested.
>
> I got it to work right in 7 out of 8 broswers and tried it on OS X and
> WinXP: Safari, Opera 8.5 (Win/Mac), IE6, Netscape 8/Win & 7.2/Mac,
> Firefox 1.5/Win & Firefox 1.0/Mac.
>
> The only one that was a little off lines up flush left, and that was in
> IE5.5/Mac. O if I were a man, I would imitate Tim Allen right about
> now.
>
> The address is easy: www.amandahenson.com/massage/LeftNav2col.html
> www.amandahenson.com/massage/LeftNav2col.css
>
> I think your file was originally htm? Sorry, I changed it on accident
> :(.
>
> Make sure to compare the files, so you can see what I did. Ta ta.
>
> Amanda H.