By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,742 Members | 1,033 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,742 IT Pros & Developers. It's quick & easy.

child div: contract/expand depending on content

P: n/a
Hi there,

|
div A \|/
-------------------------------
| |
| | |
| div B \|/ |
| __________ |
--|__________|--------------

I'm experiencing problems with the above example. I'ld like it to work as
the above example: I'ld like div B (which is a child of div A) not to
inherit the width of div A. But it is doing just that right now.

I've set a background color for div B, because what I'ld like to happen is
that div B interupts the bottom line of div A for the width of div B's
content. What it is doing now is that the background color of div B is
eating up way too much bottom line of div A. Any ideas how I can make div B
crop, that is, only be as wide as it's content? It should be able to
expand/contract automatically depending on the contents width. Tips and/or
solutions are much appreciated. Thank you in advance. Here are the style for
the div's:

..divA{
width: 404px;
margin: 0px 0px 16px 0px;
font-size: 11px;
line-height: 16px;
font-style: normal;
font-weight: normal;
color: #666666;
border: 1px solid #000000;
clear: both;
}

..divB{
position: relative;
margin: 0px 0px -8px 8px;
padding: 0px 0px 0px 8px;
font-size: 9px;
line-height: 16px;
font-style: normal;
font-weight: bold;
color: #e50077;
background-color: #ffffff;
display: block;
z-index: 1;
}
May 2 '07 #1
Share this Question
Share on Google+
12 Replies


P: n/a
amygdala wrote:
>
|
div A \|/
-------------------------------
| |
| | |
| div B \|/ |
| __________ |
--|__________|--------------

I'm experiencing problems with the above example.
I'm experiencing problems with it, too - don't use tabs or a
proportional font to draw ASCII art.

And don't post code, post a URL.

--
Berg
May 2 '07 #2

P: n/a

"Bergamot" <be******@visi.comschreef in bericht
news:59*************@mid.individual.net...
amygdala wrote:
>>
|
div A \|/
-------------------------------
| |
| | |
| div B \|/ |
| __________ |
--|__________|--------------

I'm experiencing problems with the above example.

I'm experiencing problems with it, too - don't use tabs or a
proportional font to draw ASCII art.
ASCII art huh? That's way too much credit. ;-)
But, I didn't use tabs, I used spaces... on purpose. I suspected that that
way it would not turn up all that disturbed when somebody views this with
another font.
And don't post code, post a URL.
Sorry, I have no live server to put it on. I'm developing local.
May 2 '07 #3

P: n/a
amygdala wrote:
Any ideas how I can make div B
crop, that is, only be as wide as it's content?
Give divB a width - preferably using em. Start with 15em, then tinker.

May 2 '07 #4

P: n/a
amygdala schrieb:
|
div A \|/
-------------------------------
| |
| | |
| div B \|/ |
| __________ |
--|__________|--------------

I'm experiencing problems with the above example. I'ld like it to work as
the above example: I'ld like div B (which is a child of div A) not to
inherit the width of div A. But it is doing just that right now.

I've set a background color for div B, because what I'ld like to happen is
that div B interupts the bottom line of div A for the width of div B's
content. What it is doing now is that the background color of div B is
eating up way too much bottom line of div A. Any ideas how I can make div B
crop, that is, only be as wide as it's content?
Use either a span element instead or (CSS) display: inline.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
May 2 '07 #5

P: n/a

"zzpat" <zz*******@gmail.comschreef in bericht
news:f1********@enews4.newsguy.com...
amygdala wrote:
> Any ideas how I can make div B crop, that is, only be as wide as it's
content?
Give divB a width - preferably using em. Start with 15em, then tinker.
Hi zzpat, thanks for the response.

Well, I was hoping I could avoid hardcoding the width, because the width of
the content is subject to change. Any other suggestions perhaps?

Is inheriting width intentional behavious by the way? Seems pretty odd to
me.

Cheers

May 2 '07 #6

P: n/a
amygdala wrote:
"Bergamot" <be******@visi.comschreef in bericht
news:59*************@mid.individual.net...
>>
don't use tabs or a
proportional font to draw ASCII art.

But, I didn't use tabs, I used spaces... on purpose.
If you used spaces *and* a monospace font, the weird spacing in your
drawing wouldn't have been there.
>don't post code, post a URL.

Sorry, I have no live server to put it on. I'm developing local.
Sorry, that's no excuse. If your production server isn't publicly
available, find one that is. Most ISPs give their users some free web
space, plus there are free servers like yahoo/geocities if you're desperate.

Make it easy for us to help you and you'll get a better response.
Posting code is not the way. Posting a URL is.

Besides, code snippets usually aren't adequate. They rarely tell the
whole story, including what you are really trying to accomplish. If we
know the whole situation, we may be able to suggest a better way to go
about it altogether. You may be fixing the wrong problem, which often
happens when you've chosen a solution without really defining the "problem".

--
Berg
May 2 '07 #7

P: n/a

"Johannes Koch" <ko**@w3development.deschreef in bericht
news:46***********************@authen.yellow.readf reenews.net...
amygdala schrieb:
> |
div A \|/
-------------------------------
| |
| | |
| div B \|/ |
| __________ |
--|__________|--------------

I'm experiencing problems with the above example. I'ld like it to work as
the above example: I'ld like div B (which is a child of div A) not to
inherit the width of div A. But it is doing just that right now.

I've set a background color for div B, because what I'ld like to happen
is that div B interupts the bottom line of div A for the width of div B's
content. What it is doing now is that the background color of div B is
eating up way too much bottom line of div A. Any ideas how I can make div
B crop, that is, only be as wide as it's content?

Use either a span element instead or (CSS) display: inline.
Thanks for the response.

I'm afraid I've tried your suggestions already. That is, with the display:
inline, I take it you mean set divB to display: inline right? I was also
hoping a span would do the trick, but it didn't unfortunately.
May 2 '07 #8

P: n/a
On 2007-05-02, amygdala <no*****@noreply.comwrote:
Hi there,

|
div A \|/
-------------------------------
| |
| | |
| div B \|/ |
| __________ |
--|__________|--------------

I'm experiencing problems with the above example. I'ld like it to work as
the above example: I'ld like div B (which is a child of div A) not to
inherit the width of div A. But it is doing just that right now.

I've set a background color for div B, because what I'ld like to happen is
that div B interupts the bottom line of div A for the width of div B's
content. What it is doing now is that the background color of div B is
eating up way too much bottom line of div A. Any ideas how I can make div B
crop, that is, only be as wide as it's content? It should be able to
expand/contract automatically depending on the contents width.
Make divB float: left.

floats with auto width get the "shrink-to-fit" width rather than the
available width.

You could also use position: absolute on divB, either relying on its auto
static position which I don't really like, or offsetting it from the
bottom of its container with bottom: -8px say. If you do that you will
want to make divA position: relative so it becomes the containing block
for divB.

[...]
.divA{
width: 404px;
margin: 0px 0px 16px 0px;
font-size: 11px;
line-height: 16px;
font-style: normal;
font-weight: normal;
color: #666666;
border: 1px solid #000000;
clear: both;
}

.divB{
position: relative;
margin: 0px 0px -8px 8px;
padding: 0px 0px 0px 8px;
font-size: 9px;
line-height: 16px;
font-style: normal;
font-weight: bold;
color: #e50077;
background-color: #ffffff;
display: block;
z-index: 1;
}
May 2 '07 #9

P: n/a

"Ben C" <sp******@spam.eggsschreef in bericht
news:sl*********************@bowser.marioworld...
On 2007-05-02, amygdala <no*****@noreply.comwrote:
<snip>
> What it is doing now is that the background color of div B is
eating up way too much bottom line of div A. Any ideas how I can make div
B
crop, that is, only be as wide as it's content? It should be able to
expand/contract automatically depending on the contents width.

Make divB float: left.

floats with auto width get the "shrink-to-fit" width rather than the
available width.

You could also use position: absolute on divB, either relying on its auto
static position which I don't really like, or offsetting it from the
bottom of its container with bottom: -8px say. If you do that you will
want to make divA position: relative so it becomes the containing block
for divB.
You're the man Ben! Both solutions work. Great suggestions. Thank you.
May 2 '07 #10

P: n/a

"Bergamot" <be******@visi.comschreef in bericht
news:59*************@mid.individual.net...
amygdala wrote:
>"Bergamot" <be******@visi.comschreef in bericht
news:59*************@mid.individual.net...
>>>
don't use tabs or a
proportional font to draw ASCII art.

But, I didn't use tabs, I used spaces... on purpose.

If you used spaces *and* a monospace font, the weird spacing in your
drawing wouldn't have been there.
>>don't post code, post a URL.

Sorry, I have no live server to put it on. I'm developing local.

Sorry, that's no excuse. If your production server isn't publicly
available, find one that is. Most ISPs give their users some free web
space, plus there are free servers like yahoo/geocities if you're
desperate.

Make it easy for us to help you and you'll get a better response.
Posting code is not the way. Posting a URL is.

Besides, code snippets usually aren't adequate. They rarely tell the
whole story, including what you are really trying to accomplish. If we
know the whole situation, we may be able to suggest a better way to go
about it altogether. You may be fixing the wrong problem, which often
happens when you've chosen a solution without really defining the
"problem".

--
Berg

May 2 '07 #11

P: n/a

"Bergamot" <be******@visi.comschreef in bericht
news:59*************@mid.individual.net...
amygdala wrote:
>"Bergamot" <be******@visi.comschreef in bericht
news:59*************@mid.individual.net...
>>>
don't use tabs or a
proportional font to draw ASCII art.

But, I didn't use tabs, I used spaces... on purpose.

If you used spaces *and* a monospace font, the weird spacing in your
drawing wouldn't have been there.
>>don't post code, post a URL.

Sorry, I have no live server to put it on. I'm developing local.

Sorry, that's no excuse. If your production server isn't publicly
available, find one that is. Most ISPs give their users some free web
space, plus there are free servers like yahoo/geocities if you're
desperate.

Make it easy for us to help you and you'll get a better response.
Posting code is not the way. Posting a URL is.

Besides, code snippets usually aren't adequate. They rarely tell the
whole story, including what you are really trying to accomplish. If we
know the whole situation, we may be able to suggest a better way to go
about it altogether. You may be fixing the wrong problem, which often
happens when you've chosen a solution without really defining the
"problem".
Berg, I see your points and I can see how they are valid. But there are more
roads that lead to Rome. And as I've had a long day, right now this comes
across to me as if you're nitpicking on minor sh*t. Especially since you're
practically ordering me I should do this or that. The odasity!

Posting snippets of code is one of the roads to the proverbal Rome. If you
don't feel comfortable providing solutions to code snippets than may I
suggest you just don't respond, or at least tone your voice down in a
suggestive manner in stead of an ordering one.

Maybe my previous post, which I by accident sent empty, suited my whole feel
on your issues better, but then again, I'm not in the mood for getting
ordered around.
May 2 '07 #12

P: n/a
amygdala wrote:
>
I'm afraid I've tried your suggestions already. That is, with the display:
inline, I take it you mean set divB to display: inline right? I was also
hoping a span would do the trick, but it didn't unfortunately.

I'm curious why the span didn't work. Can you explain what the problem was?

..divA{
width: 404px;
margin: 0px 0px 16px 0px;
font-size: 11px;
line-height: 16px;
font-style: normal;
font-weight: normal;
color: #666666;
border: 1px solid #000000;
clear: both;
}

..spanB{
margin: 0px 0px -8px 8px;
padding: 0px 0px 0px 8px;
font-size: 9px;
line-height: 16px;
font-style: normal;
font-weight: bold;
color: #e50077;
background-color: #ccc;
}

<div class="divA">This is div A<br>
<span class="spanB">This is span B inside of div A
</span></div>

I changed the background color because I was working on a white screen.
May 2 '07 #13

This discussion thread is closed

Replies have been disabled for this discussion.