why does this css wrap?

iostream71 · Jul 15, 2002

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

<div class="block">
<div class="header">header</div>
<div class="content">


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

DeZiner · Jul 15, 2002

.header{
background-color:gray;
width:10px;
padding:3px 3px 3px 3px;
}

This is set to 10px. Therefore it streches to fit it's content. But that is the width that is now set. Try setting it at 150px then it will not wrap. There may be a css = to nowrap???? DeZiner
Never be afraid to try something new.
Remember that amateurs built the Ark.
Professionals built the Titanic

iostream71 · Jul 15, 2002

no, i did that on purpose. i set it extra small, so that any text could fit in there, and the padding would force it to have a 3 pixel border, no matter the text.

why does it wrap in the first case, but not the second...that's what i don't understand

iostream71 · Jul 15, 2002

found out why it does. it's because in the first example, it's on word; the second, it's multiple words. i feel stupid now =P

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

why does this css wrap?

iostream71

Programmer

DeZiner

Programmer

iostream71

Programmer

iostream71

Programmer

Similar threads

Part and Inventory Search

Sponsor