Solved

CSS stopping content from flowing right.

Posted on 2011-02-14
12
217 Views
Last Modified: 2012-08-14
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?
0
Comment
Question by:freshgrill
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 3
  • +2
12 Comments
 
LVL 4

Expert Comment

by:florjan
ID: 34890585
So you want the bar with menu to float when you scroll the page down?
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34890604
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>
0
 

Author Comment

by:freshgrill
ID: 34890704
@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.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 4

Expert Comment

by:florjan
ID: 34890739
@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

0
 

Author Comment

by:freshgrill
ID: 34890786
@florjan: No change, it still is not working.
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34890805
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

0
 
LVL 30

Expert Comment

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

0
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
ID: 34890860
Ahh crap, that didn't really fix it... but you should do it anyways ;)

On your .main style, you have a width of 852px with overflow:hidden;

Inside of your main DIV, you have a table with width of 955px.

I think from there you can figure it out, you have a wider table inside of a narrower DIV.  Fix one or the other and everything will start working.
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34890870
For example, change your table width to 100% instead of 955
0
 
LVL 4

Expert Comment

by:florjan
ID: 34891201
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

0
 

Author Closing Comment

by:freshgrill
ID: 34891532
The solution was in Main.

Change Overflow: Hidden to Overflow: visible
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34891638
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

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
email validation 9 49
Silly CSS question - cant figure out 2 22
Debugging Html 8 32
Printing customized headers and footers using html and bootstrap 3 32
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question