Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

simple positioning issue

Posted on 2004-10-20
14
Medium Priority
?
179 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
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!

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: blockā€¦
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

715 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