Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS stopping content from flowing right.

Posted on 2011-02-14
12
Medium Priority
?
220 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:Gurvinder Pal Singh
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

597 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