Jump to content

elastic div box


ala888

Recommended Posts

Any idea on how I can make a box with a set style(background,border) that is invisible when there is no text inside of it

and is only as large as the amount of text inside of it?

 

Ive tried not setting a width/height; but that ultimately culminates in screen scraping blocks. While the alternative, setting a fixed height/width, detracts from the original point of the "resizable" box

Link to comment
Share on other sites

div is a block element. You can set it using display:inline so that it only expands the height and width to whatever is contained in it. As for the border/background, background not a problem but the border is. You will either need server side scripting or jquery.

Link to comment
Share on other sites

As long as there are paragraphs a content of "" is added after the paragraph content with styling of background color and border.

            #outer {position:relative;}            #outer p:after  {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom:0; background-color: #CC9933; border: 2px solid red; z-index: -1;}
<div id="outer"><p>Test</p><p>Test</p><p>Test</p><p>Test</p></div>
Edited by dsonesuk
Link to comment
Share on other sites

Any idea on how I can make a box with a set style(background,border) that is invisible when there is no text inside of it

Does it show background colour and border: yes!

Does the background colour and border become invisible when theres no text. yes!

 

So what part is not what the OP asked for? that he has to make the mistake of using js, when the same effect can be achieved with css alone, tell me i want to know.

 

note how newsreed acknowledged css solution over javascript as well.

Edited by dsonesuk
Link to comment
Share on other sites

Then i suggest next time you READ the posts and TEST fully, AND give a reason why it is not what the op wanted, before just simply posting a reply dismissing a persons solution.

 

1) As long as there are paragraphs a content of "" is added after the paragraph content.

2) think about it! why would the op leave empty p tags within the div? it would only cause unnecessary spacing to appear.

3) I suggest you READ ALL posts

4) PHP why? we haven't established what server script the OP is using, or even if he is using any at all, also this is CSS topic, and i provided a CSS solution.

Link to comment
Share on other sites

LOOK you can bother as much as you like, BUT! do not just dismiss, give an explanation why you think it is not the OP wanted.

 

newsreed instead newseed... wow! really just because i caught 'r' key, i can really see how this relate to this topic, this i will dismiss without further discussion.

 

oops did it again:)

Edited by dsonesuk
Link to comment
Share on other sites

#outer {position:relative;}#outer p:after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom:0; background-color: #CC9933; border: 2px solid red; z-index: -1;}

 

can you explain this a little more to me? I tried it out and its not working.When I remove the innerHTML of the paragraphs "test"

The div box just becomes a red line- but its still there !

Link to comment
Share on other sites

#outer {position:relative;}#outer p:after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom:0; background-color: #CC9933; border: 2px solid red; z-index: -1;}

 

can you explain this a little more to me? I tried it out and its not working.When I remove the innerHTML of the paragraphs "test"

The div box just becomes a red line- but its still there !

 

Sorry, I'm not going to touch this one again.......

Link to comment
Share on other sites

BUT you just did?

 

As long as there is a paragraph the second line will add "" (content: "" ) which is styled to produce the background, and border. So no paragraph means no border, no background, no empty space (margins of paragraph) produced by leaving empty paragraph.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...