Solved

CSS stopping content from flowing right.

Posted on 2011-02-14
12
214 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
  • 4
  • 3
  • 3
  • +2
12 Comments
 
LVL 4

Expert Comment

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

Expert Comment

by:gurvinder372
Comment Utility
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
Comment Utility
@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
 
LVL 4

Expert Comment

by:florjan
Comment Utility
@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
Comment Utility
@florjan: No change, it still is not working.
0
 
LVL 14

Expert Comment

by:Designbyonyx
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 30

Expert Comment

by:LZ1
Comment Utility
@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
Comment Utility
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
Comment Utility
For example, change your table width to 100% instead of 955
0
 
LVL 4

Expert Comment

by:florjan
Comment Utility
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
Comment Utility
The solution was in Main.

Change Overflow: Hidden to Overflow: visible
0
 
LVL 14

Expert Comment

by:Designbyonyx
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now