• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 219
  • Last Modified:

Missing Web Text

Any idea why the text on the bottom right of this page is being cut off?

http://www.myvira.com/vira2/events/raceware/raceware_events.asp?event_id=183

Thanks~
0
Bob Schneider
Asked:
Bob Schneider
  • 3
  • 2
  • 2
4 Solutions
 
remorinaCommented:
Because you have    overflow: hidden; in your class #wrap.

overflow:hidden; is sometimes used to imply an auto clear behaviour but it seems that in your case you need to vheck you CSS and specified heights.
0
 
remorinaCommented:
I've also noticed that the column containing the right text is set to position:absolute, please bear in mind that position:absolute; does not act as a layer of the container, it renders as a free positioned layer thus not expanding the wrap  or content Divs.

You need to restructure using floats instead of absolute positioning in order for the overflow to work correctly and the page expands.
0
 
ikrommCommented:
Here is the solution.

Inside the content div,

change the css of the second div (main content) by deleting
margin: 0 0 0 150px;

Open in new window

and add
float: left;

Open in new window


In addition, change the css of the third div (right column) by removing
position: absolute;

Open in new window

and adding
float: left;

Open in new window

This should correct your layout.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Bob SchneiderCo-OwnerAuthor Commented:
Thanks.  So I took the position absolute out of there.  Can you tell me what is wrong with it now?
0
 
ikrommCommented:
you didn't apply the changes i wrote to the middle div.
0
 
remorinaCommented:
You need to use floats for both columns as I've mentioned.

Modify your right column CSS as below
float: right;
padding: 0;
width: 240px;

Open in new window


And the middle column as below
float: left;
margin-left: 15px;
width: 575px;

Open in new window


I've attached the file with the changes I've made which works. empower.htm
0
 
Bob SchneiderCo-OwnerAuthor Commented:
Thank you all very much!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now