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
Solved

simple positioning issue

Posted on 2004-10-20
14
173 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Easy responsive table out of existing table 28 59
Changing Two Areas of a Page 5 25
Set time on Session (ASP) 14 21
really easy css change help please 4 17
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

790 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