Right column layout opportunity...

[SunnyOne99]

I am a newbie and I appreciate the help!

I am working on my final project for my web development class (sing XHTML and CSS). So far, I have a home page that looks exactly as I want it to: The left column has the navigation with a white background and the right column has content with a lite yellow background. My second page - the left column remains the navigation column. I created a table for data for the right column. The issue is that the table starts all the way at the end of the right column. I hope that makes sense and, again, I DO appreciate the help!

-Sue

[Andrea]

...and where SHOULD the table start?

 

Ideally, we need to see a link to the uploaded site, or at the very least, the code.

 

And then there is:

 

http://www.killersites.com/forums/topic/62/html-or-xhtml-updated-30-july-06/

[SunnyOne99]

Here's the link:

 

http://keepingfoodsafeathome.110mb.com/webproject/test/bug.html

 

When I open it in Firefox, it works fine; the table stays put. When I open it in IE and minimize the browser, the table slips down to the bottom. The table should be in the right column just below the header (as it does in Firefox and full screen IE.

 

Thank you!!!

[BeeDev]

Does your navigation bar or content bar have float:right or float:left properties? And if they do, do they have margins? If they have margins try to put: display:inline on those elements. That should fix it.

[SunnyOne99]

Thank you. I'm sorry, I must be misunderstanding you. I tried applying display:inline and that sent the table to the bottom of the left column. Here's the CSS that I have so far for the two pages:

 

body

 

{background-color:#ffffcc;

color:#000000;

font-family: Verdana, Arial, sans-serif;

}

 

#container {width: 1050px;

}

#leftcolumn {float:left;

width: 350px;

}

 

#nav ul {list-style-type: none;

text-decoration: none;

padding-left: 0;

margin-left: 0;

}

 

.img {border: 0;

list-style-type: none;

padding: 10px;

}

 

#rightcolumn {

width: 700px;

margin-left: 260px;

color: #000000;

}

 

#bugcontent {float:right;

}

 

table {width: 700px;

border: 2px solid #009966;

}

 

 

td, th {

border: 1px solid #009966;

}

 

 

.doubleborder {border-color: #009966;

border-width: 10px;

border-style: double;

padding: 5px;

}

 

#footer {font-size: small;

}

[BeeDev]

I just checked that page you linked above on Firefox 3, Internet Explorer 6 & 8. They all look the same. The data table is not spilling under the navigation bar.

[Wickham]

In my IE7 the right table is down below the bottom of the left column, on the right. It's because your widths don't tie up.

 

I'm using your online link code from post #3. The table is 700px plus 2px borders = 704px.

So #rightcolumnbug needs to be 704px. You have a style for #container, but it's not in the code, so when you use a small window resolution there's not enough width so the rightcolumn moves down. Put in a #container div around all your content:-

............

 

 

 

and at the bottom:-

 

.........

 

 

Edited July 10, 2009 by Wickham

[SunnyOne99]

THANK YOU, WICKHAM!!! That resolved my issue!!! :):)