Link to home
Start Free TrialLog in
Avatar of freshgrill
freshgrill

asked on

CSS stopping content from flowing right.

Something in the CSS file is stopping content from flowing right.

See example: http://www.mffais.com/mffais/about.html

What needs to be changed to allow content to flow right?
Avatar of florjan
florjan

So you want the bar with menu to float when you scroll the page down?
Avatar of Gurvinder Pal Singh
at line 84, make the width of td as flexible

<tr><td width="50">&nbsp;</td><td width="100">&nbsp;</td><td style="min-width:800;width:auto;">&nbsp;</td>
Avatar of freshgrill

ASKER

@florjan: No, no bar floating. I want the text to flow right instead of getting cut off.

Example (2nd sentance):
..., leading newspapers, magazines and
publicity

On the that line it should be:
..., leading newspapers, magazines and lots of
publicity

@gurvinder372: That didn't fix it, I am sure it is something in the "/css/style.css" that is causing it.
@freshgrill try changing
div, p, a, i, img, span, strong, h1, h2, h3, h4, h5, h6, ul, ol, li, label, input, select, textarea{
	padding:0;
	margin:0;
}

Open in new window

to
div, p, a, i, img, span, strong, h1, h2, h3, h4, h5, h6, ul, ol, label, input, select, textarea{
	padding:0;
	margin:0;
}
li {
	padding:auto;
	margin:auto;
}

Open in new window

@florjan: No change, it still is not working.
You are using invalid tags inside of a list.  You have a UL element (unordered list), which is only allowed to have "list items" (LI) as children.  In your code, you have some paragraphs (P) as direct children of the UL, which is not allowed.

Try putting an LI tag AROUNG your P tags so that:

Current markup:
<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <p> (this is not valid) </p>
  <p> (this is not valid) </p>
</ul>

Open in new window


Would become:
<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>
      <p> (this is valid) </p>
      <p> (this is valid) </p>
  </li>
</ul>

Open in new window

@freshgrill:
You've laid out your website using tables and your content is suffering because of it.  Any reason you chose tables?  

ASKER CERTIFIED SOLUTION
Avatar of Designbyonyx
Designbyonyx
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
For example, change your table width to 100% instead of 955
Designbyonyx figgured it out before I did. I'm just providing copy paste code. So change
<table cellspacing=0 cellpadding=0 border=0 width="955"> 

Open in new window

to
<table cellspacing=0 cellpadding=0 border=0 width="100%">

Open in new window

The solution was in Main.

Change Overflow: Hidden to Overflow: visible
While that is a viable solution, you still have a large item inside of a smaller item... which is just not right.

Here is what you have, which is not right:
<div class="main">
  <table width="955">...</table>
</div>

.main {
   width: 892px;
}

Open in new window



Here is one solution:
// Change the width of .main so it will fit the table
.main {
   width: 955px;
}

Open in new window



Here is another solution:

// Make the table 100% wide so it will ALWAYS fit the full width of .main
<div class="main">
   <table width="100%">...</table>
</div>

Open in new window