CODEWITHSUNDEEP
csshtmloverflow
user1761715
user1761715

Reputation: 13

Div won't expand with content

I've searched this site all over and can't find the solution to my problem. First of all here's an image of my problem. (The div's with the "sssss" should expand vertically). So the content of the div should go to the next line when it hits the border. Any advice is very well appreciated.

Image

Here is my code.

HTML

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <LINK rel=StyleSheet href="styles/StyleSheet.css" type="text/css" media=screen>
</head>
<body>
    <form id="Form1">
    <div id="header">
        <div id="header-center">
            <div id="logo">Logo</div>

            <div id="search-user">
                <form action="" id="SearchUser">
                    Search User: <asp:TextBox ID="TextBox1" runat="server">           </asp:TextBox>
                </form>
            </div>
        </div>


        <div id="nav-menu">
            <ul>
                <li><a href="#">Account</a></li>
                <li><a href="#">Burndown Chart</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Extra</a></li>
                <li><a href="#">Extra</a></li>
            </ul>
        </div>
    </div>

    <div id="wrapper">sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>


   </form>
</body>
</html>

CSS

html, body
{
padding: 0px;
margin: 0px;
text-align: center;
background-color: #f3f4f9; 
font-family: Verdana;
border: 0px;
}

#header 
{
width: 100%;
background-color: #0066CC;
}

#header-center 
{
margin: 0 auto;  
width: 800px;
height: 80px;
}

#logo 
{
float: left;
margin-top: 13px;
height: 50px;
font-size: 40px;
color: White;
font-weight: bold;
}

#search-user 
{
float: right;
color: White;
font-size: 11px;
font-weight: bold;
margin-top: 25px;
}

#nav-menu 
{
width: 100%;
margin: 0 auto;
border-top: 1px solid #003366;
clear: both;
}

#nav-menu ul
{
list-style-type:none;
margin:0;
padding:0;
height: 48px;
background-image: url(../images/menu-ul-bg.png);
}

#nav-menu ul li
{
display:inline;
line-height: 50px;
}

#nav-menu ul li a
{
padding: 0px 40px 0px 40px;
text-decoration: none;
color: Black;
font-size: 14px;
}

#nav-menu ul li a:hover
{
color: White;
}

#wrapper 
{
margin: 0 auto;
width: 200px;
border: 1px solid black;
}

Upvotes: 1

Views: 612

Answers (2)

j08691
j08691

Reputation: 207901

It's because you have one long string that the browser won't break on its own. The height will adjust automatically if you break it up into smaller words, if you use the CSS3 word-break or word-wrap property.

Ex: word-break:break-all;

Upvotes: 1

Matija Milković
Matija Milković

Reputation: 2458

You need to add to your #wrapper styling:

word-wrap: break-word;

This will brake long words like the 'ssssssssssssssssssssssss' one and make it go along divs width.

Upvotes: 0

Related Questions