4 replies [Last post]
ardmoretreasures
Offline
Regular
winston salem, nc
Last seen: 12 years 25 weeks ago
winston salem, nc
Joined: 2006-12-15
Posts: 32
Points: 0

Happy Holidays everyone! Once again I am stuck. This page does validate XHTML/CSS but I am having a strange layout issue. This is a three column layout but the right column has begun to drop and falls under the copy or "over" the copy in the middle column . They are controlled from an external CSS doc called "layout_styles.css" (that I coppied below). Here is a link to the page:

http://mobilemedicalpractice.com/index.php

Any help greatly appreciated!

/* CSS Document */

body {
background-color: #ededee;
margin: 0px;
padding: 0px;
}

#navi_top {
background-image: url(../images/bkgrnd_navi_top.jpg);
background-repeat: no-repeat;
width: 990px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
z-index: 15;
overflow: auto;
}

#wrapper {
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
overflow: hidden;
width: 990px;
}

#container{
background-color:#fff;
float:left;
width:459px;
border-right-width: 198px;
border-left-width: 303px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #ededee;
border-left-color: #ededee;
}
#leftRail{
float:left;
width:303px;
margin-left:-553px;
position:relative;
background-color: #ededee;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

#center{
float:left;
padding: 0px;
background-color: #FFFFFF;
width: 440px;
margin-right: -190px;
}
#rightRail{
float:right;
width:198px;
margin-right:-200px;
position:relative;
}

#content {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
margin: 0px;
}

/*NAVI FOOTER*/

#navcontainer_ft {
float: left;
padding: 0px;
text-align: center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

#navcontainer_ft ul {
list-style-type: none;
padding: 0px;
margin: 0px
}

#navcontainer_ft li {
display:inline;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

#navcontainer_ft a
{
width: 100%;
margin: 0px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: x-small;
color: #000000;
padding: 0px;
}

#navcontainer_ft a:link, #navcontainer_ft a:visited
{
color: #000000;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

#navcontainer_ft a:hover {
text-decoration:underline;
color: #000000;
}

div#footer{
color: #ededee;
overflow: hidden;
width: 975px;
clear:both;
margin-right: auto;
margin-left: auto;
}
div#footer p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
color: #000000;
margin-top: 5px;
margin-right: 0;
margin-bottom: 0;
margin-left: 10px;
padding: 0px;
}
div#footer a{display:inline;padding:0;color: #000000}
img {
margin: 0px;
padding: 0px;
}

/*END OF NAVI FOOTER*/

/*Expanded Center Column*/
#leftRail_expanded{
float:left;
width:303px;
margin-left:-973px;
position:relative;
background-color: #ededee;
}

#container_expanded{
background-color:#fff;
float:left;
width:655px;
border-right-width: 0px;
border-left-width: 303px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #fff;
border-left-color: #ededee;
border-top-width: thin;
border-bottom-width: thin;
}

#center_expanded{
float:left;
padding: 5px;
background-color: #FFFFFF;
width: 655px;
margin-right: 0px;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Which bit is the right

Which bit is the right column?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 9 years 31 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

The right column would be

The right column would be the rightRail ID, or the part with the glossy buttons in it.

html > body #home > div #wrapper > div #container > div #leftRail > div #rightRail > div #bodynav > div .article_box > img

Methinks you're missing a </div> somewhere. These breadcrumbs show me that your right column starts before your left column ends.

I examined your code a bit further and I realized that you start the left column with <div id="leftRail"> and then you start

If you were wondering where I got the breadcrumbs, it's the Firefox Web Developer toolbar. I used "Outline Current Element" from within the Outline menu.

Was it necessary to post this topic twice?

ardmoretreasures
Offline
Regular
winston salem, nc
Last seen: 12 years 25 weeks ago
winston salem, nc
Joined: 2006-12-15
Posts: 32
Points: 0

No luck

Thanks for the response, I tried adding some closing but no luck. I had a deadline of this monday (which is missed) and broke the layout friday night, I hadn't received a reply in over 24 hrs on the first post so I posted again thinking maybe people weren't viewing it because I hadn't included the code.

ardmoretreasures
Offline
Regular
winston salem, nc
Last seen: 12 years 25 weeks ago
winston salem, nc
Joined: 2006-12-15
Posts: 32
Points: 0

Got it!!!

Thanks again! I went back through it and you were right, there was a DIV closing tag missing, once applied no prob!