Solved

simple positioning issue

Posted on 2004-10-20
14
176 Views
Last Modified: 2010-04-09
I want a TD cell in the middle of a page to have horizontal scrollbars if the content is too wide.  I'm going brain dead or something and can't figure it out.

<style>
table{
      width:100%;
      overflow:hidden;
}
td{
      width:100%;
      overflow:hidden;
}
</style>
<table>
      <tr>
            <td><nobr>
            !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!!
            </nobr></td>
      </tr>
</table>

the actual content is a "window" inside of a layout.  this is just a simplified example.  I basically want it to stretch to the width of the container, but have scrollbars beyond that width.

<div> tags would be fine too.
0
Comment
Question by:cwolves
[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
  • 6
  • 4
  • 2
  • +2
14 Comments
 
LVL 96

Expert Comment

by:Lee W, MVP
ID: 12363695
I could be wrong and way off, but it sounds like an <iframe></iframe> tag is what you are looking for.  I've never heard of tables able to do this natively.
0
 
LVL 9

Author Comment

by:cwolves
ID: 12363827
they can.
0
 
LVL 12

Expert Comment

by:minichicken
ID: 12363848
if you are going to use iframe, suggested by leew. I tried it, it works fine....
You may need 2 files instead of 1.


****test.htm
<style>
table{
     width:100%;
     overflow:hidden;
}
td{
     width:100%;
     overflow:hidden;
}
</style>
<table>
     <tr>
          <td><nobr>
          !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!! !!!!!!!!
          </nobr></td>
     </tr>
</table>


****display.htm:
<iframe width="100%" src="test.htm"></iframe>
0
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 
LVL 49

Expert Comment

by:Roonaan
ID: 12363880
and <div style="width:100%:"> didn't do it for you?

-r-
0
 
LVL 9

Author Comment

by:cwolves
ID: 12364168
<div style="width:100%;"> does 100% page width, not container width

and iframes aren't compatible!!!
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 12364259
Then you should add a style="position:relative;" to the container.
0
 
LVL 12

Expert Comment

by:minichicken
ID: 12364295
You can use a textarea to do the scrolling, but it might be a mission to write some javascript to apply styles and set the with of the textarea...
0
 
LVL 9

Author Comment

by:cwolves
ID: 12364575
arg...I want a div that scrolls.  or a table cell, or anything else, but I want it to fill 100% of the parent's width

textareas are useless cause it has real content.
0
 
LVL 3

Expert Comment

by:Daedalus05
ID: 12367053
Try something like this:

Add this to <HEAD>...</HEAD>:
<style type="text/css">
<!--
 div.scroll {
  height: 20px;
  width: 100%;
  overflow: auto;
  padding: 0px;
}
-->
</style>

Replace <TABLE>...</TABLE> with this:
<div width="100%" class="scroll">
<NOBR>
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</NOBR>
</div>
0
 
LVL 9

Author Comment

by:cwolves
ID: 12370097
again, that's 100% of the page width.  I need it to fit to it's parent container.
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 12370180
Can you show us an live example, cause working on imaginairy or "alike" code just often is not the way to get things working, cause of the possible interference of surrounding code.

Regards

-r-
0
 
LVL 9

Author Comment

by:cwolves
ID: 12370278
<table width="100%" bgcolor="#000000" cellspacing="1" cellpadding="0">
      <tr bgcolor="#FFFFFF">
            <td width="200">some content on the left side</td>
            <td><nobr>content that I want to stretch.  If you take the space out of the &lt;no br&gt; tag in this cell, making it a &lt;nobr&gt; tag, you'll see that it pushes the entire table right.  I want it to have a horizontal scrollbar instead of doing that.</nobr></td>
            <td width="200">some content on the right side</td>
      </tr>
</table>
0
 
LVL 49

Accepted Solution

by:
Roonaan earned 500 total points
ID: 12370424
Okee, thank you:

Try this one:

<div style="float:left;width:200px;height:400px;border:solid 1px;">
   some content on the left side
</div>
<div style="float:right;width:200px;height:400px;border:solid 1px;">
   some content on the right side
</div>

<div style="width:100%;overflow:auto;height:400px;">
  <nobr>
  content that I want to stretch. If you take the space out of the
  &lt;no br&gt; tag in this cell, making it a &lt;nobr&gt; tag,
  you'll see that it pushes the entire table right.  I want it
  to have a horizontal scrollbar instead of doing that.
  </nobr>
</div>

You are aware that <nobr> is an non-existing tag, at least in xhtml (http://www.w3schools.com/xhtml/xhtml_reference.asp)

You could try <pre> instead, but that would need you to indeed write the whole line on one line instead of what i did in the
last example.

Regards

-r-
0
 
LVL 9

Author Comment

by:cwolves
ID: 12370651
yeh, I know.  I was just using that to make fake streched content  :-)

the real content is being stretched with images.
0

Featured Post

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!

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.
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

615 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