|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
July 15th, 2002, 07:29 PM
|
|||
|
|||
|
why does this css example wrap?
<html>
<head> <style type="text/css"> .block{ background-color:red; width:200px; height:200px; } .header{ background-color:gray; width:10px; padding:3px 3px 3px 3px; } .content{ background-color:blue; width:100%; height:100%; padding:10px 10px 10px 10px; } </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <!-- outer block --> <div class="block"> <div class="header">header</div> <div class="content"> <!-- inner block --> <div class="block"> <div class="header">sub header</div> <div class="content">sub content</div> </div> </div> </div> </body> </html> if you look at it, you'll see that the header in the "inner block" wraps (what i don't want), while the one in the "outer block" doesn't. why is this, and how can i fix?
|
|
#2
July 15th, 2002, 07:47 PM
|
||||
|
||||
|
I'm far from a CSS expert, but it looks to me like the problem is that you've defined the width of the header space to 10px. When I changed the "Outer Block" header content to something longer than the single word 'header' it wrapped too.
wdn2k
|
|
#3
July 15th, 2002, 08:01 PM
|
|||
|
|||
|
i did that on purpose, so that any text would fit there, and the padding would provide a border.
why would it wrap in one, and not the other? they're the same class
|
|
#4
July 15th, 2002, 08:10 PM
|
||||
|
||||
|
Perhaps I wasn't clear in my reply. BOTH of them wrapped when they had more than one word in them. In fact, if when I seperated the word header into individual letters 'h e a d e r' it displayed vertically! I'm guessing this is because 10px isn't enough room for even two characters to sit side by side without wrapping. The only reason that the word 'header' doesn't wrap is because there are no spaces in it, so the browser doesn't know where to break it. Try putting 'headerheaderheaderheader' into the first one, it won't wrap because there aren't any spaces.
wdn2k
|
|
#5
July 15th, 2002, 08:14 PM
|
|||
|
|||
|
oooooh, ic ic. that makes sense then.
what i was trying to do was make a box that would just surround my text, guess this isn't the way =)
|
|
#6
July 16th, 2002, 03:10 AM
|
|||
|
|||
|
I've used that trick too, assign stupidly small dimensions, and allow the browser to stretch. Key is not to use breaking elements (spaces, hyphens, etc).
Brush up on your html entities. Specifically, use the in place of spaces (Non Braking SPace), the browser won't break them.
|
|
#7
July 16th, 2002, 05:05 PM
|
|||
|
|||
|
awesome, thanks for that tip
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > why does this css example wrap? |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
