Solved

simple positioning issue

Posted on 2004-10-20
14
170 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
  • 6
  • 4
  • 2
  • +2
14 Comments
 
LVL 95

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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
spacing 5 57
Disabled form text field 2 22
My dialog box isnt work, no box displays but text does 8 38
Alignment is not working correctly. 8 33
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

896 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

12 Experts available now in Live!

Get 1:1 Help Now