473,320 Members | 1,872 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

child div: contract/expand depending on content

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
12 5671
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

"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
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
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

"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
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

"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
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

"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

"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

"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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: chris | last post by:
Hi there, I have recently created a new stylesheet for my site, but I'm having a problem with the way it renders. I have a container div with a background image, which is only being rendered...
3
by: tungchau81 | last post by:
Hi, A Modal Dialog does not allow us to highlight the text content inside <DIV> tag unless I use a <textarea> tag to display that text content. However, the situation of my software makes it...
2
by: Ruskin Hardie | last post by:
There is an iframe in my document that is hidden, which is the target for a submitted form. When the form is submitted, some javascript sets a hidden div, to displaying, eg: ...
4
by: Berko | last post by:
I have a javascript that manipulates the DOM with content that will be of variable heights. How can I ascertain how high my div needs to be in order to show all content without scroll bars. Rather...
2
by: Victor Rodriguez | last post by:
I need a way to be able to retrieve child controls on a <asp:Content I've try I get nothing. Where should I look? thanks, Vic
0
by: pbd22 | last post by:
Hi. I have two divs inside a containing div <div id=container> <div id=top> </div> <div id=bottom> </div> </div>
6
by: AJM Project | last post by:
Hello, I see this is a well known thing and have seen many answers but none have worked for me. It's just a test page I'm making and I've ran into this so I thought I'd ask how to fix it - inline...
5
by: PHPstarter | last post by:
I have 3 divs on a line, surrounded by a another div(wrapper?) The middle section is content, while the div to the left and right work as borders (images). The middle section expands as should, but...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.