9
I created a two column CSS layout by
floating the columns left and right respectively.
When I put text into the first column (via HTML) it continues in
a straight line through the second column and beyond
instead of going onto a new line within the first
column when it reaches the right hand edge of the
first column.
The code is below. Main is the name of the left hand
column and ads is the name of the right hand column.
If you've got the time, have you any idea what is
wrong.
Regards
Jim Walsh
[code] (CSS )
body{
margin:0;
padding:0;
background-color:#0000cc;
min-width:750px
}
div.wrap{
background-color:#cc0000;
margin:0 auto;
padding:0;
width:750px
}
div.header{
background-color:#ddd;
margin:0;
padding:5px;
text-align:center
}
div.links1{
background-color:#c99;
padding:5px
}
div.links2{
background-color:#cc9;
padding:5px
}
div.main{
float:left;
width:500px;
background-color:#cc0000;
padding:0 10px
}
div.ads{
background-color:#c9c;
float:right;
width:150px;
padding:0 10px
}
div.links1 ul{
margin:0;
padding:0;
list-style:none
}
div.links2 ul{
text-align:center;
word-spacing:15px;
margin-bottom:0;
margin:0;
padding:0;
list-style:none
}
div.links1 li
{background-color:orange;
margin:20px;
display:inline;
margin-left:20px;
margin-right:20px
}
div.links2 li{
display:inline;
margin:0;
padding:0
}
h5{
text-align:center;
padding:0 10px
}
a{
text-decoration:none ;
border-style:ridge;
border-color:blue;
padding-left:10px;
padding-right:10px
}
a:link{
color:black;
background-color:orange;
}
a:active{
color:white;
background-color:teal
}
a:visited{
color:purple;
background-color:#aa11aa}
[code](END OF CSS)
[code] HTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Visit Bangkok Accomodation</title>
<link rel="stylesheet " type="text/css" href="bkkcss.cs s"></link>
</head>
<body>
<div class="wrap">
<div class="header">
<h1>Visit Bangkok</h1>
</div>
<div class="links1">
<ul>
<li><a href="bkkaccomo dation.html">ac comodation</a></li>
<li><a href="bkkplaces togo.html">plac es to go</a></li>
<li><a href="bkkwhatso n.html">what's on</a></li>
<li><a href="bkktravel .html">travel</a></li>
<li><a href="bkkmapsan dguides.html">m aps and guides</a></li>
<li><a href="bkkpeople likeyou.html">p eople like you</a></li>
</ul>
</div>
<div class="links2">
<ul>
<li><a href="bkkhotels .html">hotels</a></li>
<li><a href="bkkapartm ents.html">apar tments</a></li>
<li><a href="bkkselfca tering.html">se lfcatering</a></li>
<li><a href="bkkhomest ay.html">homest ay</a></li>
<li><a href="bkkcampin g.html">camping </a></li>
<li><a href="bkkcarava ns.html">carava ns</a></li>
</ul>
</div>
<div class="main">
testqertyuiop[]asdfghjkl;'zxcv bnm,./qwertyuiop[sdfghjkl;zxcvbn m,,.qwertyuiop[asdfghjkl;zxcvb nm,qwertyuiop[asdfghjkl;zxcvb nm,qwertyuuii
</div>
<div class="ads">
<h5>Sponsored Advertisements</h5>
</div>
</div>
</body>
</html>
[code] END OF HTML
