?
Solved

CSS stopping content from flowing right.

Posted on 2011-02-14
12
Medium Priority
?
219 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

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

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

801 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