Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Keep table within div

Status
Not open for further replies.
AndyGroom

AndyGroom

Programmer
May 23, 2001
972
GB
Is there a way I can alter this code such that the table won't expand wider than the div? (For brevity I've omitted the full content of the table which is more complicated than just saying 'hello').
Code: 
<html>
<body>

<div style='background-color: red; margin-right: 200px;'>
<table width='100%'>
<tr><td>Hello</td></tr>
</table>
</div>

</body>
</html>

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments
 
Sort by date Sort by votes
The table isn't extending past the end of the DIV.

Are you sure you're not getting confused with the right-margin on the DIV being ignored in IE due to your document having no DOCTYPE and thus being in quirks mode?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Snippets & Info:
The Out Atheism Campaign
 
Upvote 0 Downvote
Sorry - I should have clarified: "Ignored" is a bad choice of words. It's not ignored as such, but out of view. "Not obvious" would have been a better phrase to use.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Snippets & Info:
The Out Atheism Campaign
 
Upvote 0 Downvote
<div>s are block elements so are 100% of the parent container by default, so having a 200px right margin on a 100% width element is going to be causeing "issues"

Also not having all the code makes it impossible to debug, just post a URI to a page that exhibits the problem please.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
 
Upvote 0 Downvote
Posting a link is tricky as the HTML code is being generated by a VB application and then displayed in a WebBrowser control.

Unfortunately I had to press on and find a solution to this this morning and so in the end I ended up 'forcing' the width of the table each time the browser window resize event fired using this approach:
Code: 
    Dim Ele As HTMLHtmlElement
    For I = 0 To WebBrowserCtrl.Document.All.Length
      Set Ele = WebBrowserCtrl.Document.All(I)
      If (Ele.className = "table") Then Ele.Style.Width = (WebBrowserCtrl.Width / Screen.TwipsPerPixelX) - 30
    Next I

However I am keen to learn a better approach, would specifying a DocType force the table to not grow wider than the width of its parent?

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments
 
Upvote 0 Downvote
However I am keen to learn a better approach, would specifying a DocType force the table to not grow wider than the width of its parent?
Click to expand...
You did not specify a width for the parent...

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
would specifying a DocType force the table to not grow wider than the width of its parent?
Click to expand...

You still haven't shown any scenario where it [!]does[/!] grow wider. Certainly with the code you gave earlier, it did not in either IE 8 or FX 3.

Why not show us broken code that exhibits the problem you are having? At least that way we can give you more than just guesswork.

Did you try my suggestion of a DOCTYPE to see if you were mistaken about what was actually happening?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Snippets & Info:
The Out Atheism Campaign
 
Upvote 0 Downvote
That's weird then, the code I originally pasted, when I view that in IE8 it stretches the whole width of the browser area but if I remove the table the Div stretches the whole width minus 200 pixels as expected. So unless there's some difference between your IE8 and mine we are getting different results.
traingamer said:
You did not specify a width for the parent...
Click to expand...
That's true, however I assumed that by setting a right-hand margin of 200px I was effectively implying a width of whatever the browser width is minus 200px?

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments
 
Upvote 0 Downvote
AndyGroom said:
That's true, however I assumed that by setting a right-hand margin of 200px I was effectively implying a width of whatever the browser width is minus 200px?
Click to expand...
Not a good assumption. The div will grow to contain its contents (and will still have a 200px margin on the right).

To test this, put a background color on the div.
Then put a small table in it and check how big it is.

Then put a large table in it and see how big it becomes.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
That's weird then, the code I originally pasted, when I view that in IE8 it stretches the whole width of the browser area
Click to expand...

Yes - but so does the DIV. The table is still not going outside of the DIV.

I'll say it a 3rd time: Did you try my suggestion of a DOCTYPE to see if you were mistaken about what was actually happening? I think you'll find you have a horizontal scrollbar taking you to the 200px of right-margin.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Snippets & Info:
The Out Atheism Campaign
 
Upvote 0 Downvote
Posting a link is tricky as the HTML code is being generated by a VB application and then displayed in a WebBrowser control.
Click to expand...

Copy the rendered source code from a browser.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
813
spamjim
spamjim
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
550
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
158
jason.lex
jason.lex
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
146
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
149
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top