Code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>layOut</title>
<style type="text/css"> 

#domainLogo{
margin-right: 230px;
}
 
#sideBar {
 float: left;
 width: 230px; 
 margin-left: -230px; 
 background: #aaffff;
}

 
.guest-login {
 float:left;
 width:180px;
 background: #fff ;
 padding:0px 0px 3px 50px;
}
 
.guest-login p{margin:0}
.guest-login span, .guest-login strong {
 border:1px solid #555;
 background:#88ffff;
 padding:2px;
 overflow:hidden;
 display:block;
 text-align:center;
}
 
.guest-login span {
 float:left;
 margin:0 3px 0 0;
}
.top span {
 float:right;
 margin:0 0 0 3px;
}
.hr {
 clear:both;
 border:1px solid #555;
 background: #88ffff;
 padding:2px;
 margin:4px 0px;
}
 
.hr hr {
 position:absolute;
 left:-999em;
}
.guest-login div { clear:both }
 
 
</style>
</head>
 
<body>
 
<div class="fullWrapper">
<div id="domainLogo">
 <a href="">myDomain1myDomain2myDomain3myDomain4myDomain5myDomain6myDomain7myDomain8myDomain9myDomain10myDomain11myDomain12myDomain13myDomain14myDomain15myDomain16myDomain17myDomain18myDomain19myDomain20</a>
</div>
</div>
 
<div id="sideBar">
<div class="guest-login" >
  <div class="top folor">
    <p><span>00</span><strong>Guest</strong> </p>
  </div>
  <div class="hr"><hr></div>
 
  <div>
    <p class="folor"><span>00</span> <strong>Login</strong></p>
  </div>
</div>
</div>
 
 </body>
</html>
The code above is some part of the full code at http://dot.kr/x-test/layOut01/

In domainLogo div, there are long text without any space.
If the text is short, no problems.
But when text is very long like the http://dot.kr/x-test/layOut01/, the last part of the text is behind guest-logIn part and go farther to right and the horizental scroll bar is created at the bottom of the browser.

Can I make the layout to automatically dropping the text when the text is very long inside the domainLogo div with your help?