/    Sign up×
Community /Pin to ProfileBookmark

making div conform to its content’s width

Copy linkTweet thisAlerts:
Nov 05.2004

hello;

I have:

[code]
<body>
<div id=”red” style=”position:absolute;border:solid 3px red;”>
<div id=”blue” style=”position:relative;border:solid 3px blue;”>
<table id=”yellow” style=”position:static;border:solid 3px yellow;”>
<tr>
<td>
vwvwv
</td>
</tr>
</table>
</div>
<div style=”position:relative;”>
<table>
<tr>
<td>
vwvwvsssssssssssssssssssssssssssssssssssssssssssss
</td>
</tr>
</table>
</div>
</div>

</body>
[/code]

The problem is that the blue div is stretching out to the boundary of the red div;

I instead want the blue div to conform itself to the width of the yellow table;

any thoughts;

thanks
Shannon Burnett
Asheville NC USA — sorry about George Bush

to post a comment
HTML

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@MstrBobNov 05.2004 — First off, ick, I think you're using tables for layout. That's a no-no!

Second. <div> is a block level element, which, as you know, means it will default to take up the whole line. The simple solution is to add disply:inline; However, since you have position:static; it'll throw issues. Unless you plan on positioning something, get rid of all those positions. An HTML document is much more fluid and accessible if you let the elements just fall into place. This isn't like desiging for print, you've got different screens and browsers to account for. Really try to limit your positioning as much as you can.
Copy linkTweet thisAlerts:
@dsdsdsdsdauthorNov 05.2004 — hello mstrbob; thanks for your response;

yes I will be using those positions for a JS;

I tried your display:inline suggestion for the blue div but it did not yield the appropriate result; furthermore the display:inline behaved differently in several browsers;

I will, unfortunately, have to JS a solution after html layout is complete;

thanks

dsdsdsdsd
×

Success!

Help @dsdsdsdsd spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.22,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...