Jump to content

Right column layout opportunity...


SunnyOne99

Recommended Posts

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

Link to comment
Share on other sites

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!!!

Link to comment
Share on other sites

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;

}

Link to comment
Share on other sites

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:-

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

 

 

 

Edited by Wickham
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...