Home/ Questions/Q 8721461
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T07:13:32+00:00

I’ve searched this site all over and can’t find the solution to my problem.

  • 0

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;

    • 0