Im a self learner for web designing, so i might missed out some fundamentals coding.
So the problem is the
content is overspilling the div from the right in one line.
The code as below
THE HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<div id="bg">
<div id="mainwrapper">
<div id="header">
<div id="logo"></div>
</div>
<div id="contentwrapper">
<div id="leftwrapper">
<div id="contentspacing">
<div id="content">
<p>
asdfasdfasdfasdvvasdvasdvasdvfasdvsdasdas
dfasdfasdfasdvvasdvasdvasdvfasdvsdasdasdfasdfas
</p>
</div>
</div>
</div>
<div id="rightwrapper">
asdfasdf
</div>
</div>
</div>
</div>
</body>
</html>
THE CSS AS BELOW
/* ---------------------------------------------------------------*/
/* ---------------------> RESET <<<-------------------------*/
/* ---------------------------------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
body {
font-family:Arial,sans-serif;
font-size:100%;
line-height:1.3em;
_font-size:16px;
color:#504e45;
background:#ebe9e1 url(pics/bg.jpg) top left repeat-x;
}
#bg {
float:left;
display:block;
height:600px;
width:100%;
background:url(pics/hotel-bg.jpg) top center no-repeat;
margin:0 0 0 0;
}
#mainwrapper {
float:left;
display:block;
width:1000px;
margin:0 auto;
}
#header {
float:left;
display:block;
}
#logo {
width:274px;
height:44px;
background:url(pics/logo.png) no-repeat;
margin:50 0 0 100;
}
p {
float:left;
display:inline-block;
line-height:1.7em;
margin:1em 0;
-webkit-margin-before:1em;
-webkit-margin-after:1em;
-webkit-margin-start:0px;
-webkit-margin-end:0px;
}
#contentwrapper {
float:left;
display:block;
width:1000px;
}
#leftwrapper {
float:left;
display:block;
width:593px;
}
#contentspacing {
float:left;
display:block;
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
#content {
float:left;
display:block;
height:auto;
width:593px;
border:1px solid #bdc9f4;
background:url(pics/bg2.png) top left repeat-x;
margin:35 120;
}
#rightwrapper {
float:left;
display:block;
}
This occurs when you are using rather long words. Try this: