[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

simple positioning issue

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

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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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…

591 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