Here are three examples.
You'll see that the bottom one behaves a bit differently than the top 2. I'd also suggest trying this in both FireFox and InternetExplorer 7.
CSS is very strict (Which it should be) if you tell it to create a 2x2 box and you want to put a 3x3 box inside of it, you're 3x3x3 box will still be shown - unless you put additoinal rules on the containing box. (Like overflow:auto/Hidden/scroll/visible).
<div style="width: 800px">
<!--- Some controls here -->
<div style="width: 100%; overflow: auto;">
Below is my 900px width div
<div style="width: 900px;">
hi
</div>
</div>
</div>
<div style="width: 800px;border:dashed 1px red;">
<!--- Some controls here -->
<div style="width: 100%; overflow: auto;border:solid 1px blue;">
Below is my 900px width table
<table style="width:900px;" border="1">
<tr>
<td>
This is my cell
</td>
</tr>
</table>
</div>
</div>
<div style="width: 800px;border:dashed 1px red;">
<!--- Some controls here -->
Below is my 900px width table
<div style="width: 100%; overflow: auto;border:solid 1px blue;">
<table style="width:900px;" border="1">
<tr>
<td>
This is my cell
</td>
</tr>
</table>
</div>
</div>
---
if you do this:
<div style="width: 800px;border:dashed 1px red;">
<!--- Some controls here -->
Below is my 900px width table
<div style="width: 100%; overflow: auto;border:solid 1px blue;">
<img src="http://www.conquerclub.com/maps/Middle_Earth.S.jpg" style="width:1000px;height:800px;" />
</div>
</div>
You will see that there's a big image inside the div - which scrolls. Seeing you told the image to be 1000x800 - it's going to be that size regardless of the containing div.
The Killer Ninja Coding Monkeys thank those that mark helpful posts as answers.
My Site |
My Examples |
My Blog