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