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.css"></link>
</head>
<body>
<div class="wrap">
<div class="header">
<h1>Visit Bangkok</h1>
</div>
<div class="links1">
<ul>
<li><a href="bkkaccomodation.html">accomodation</a></li>
<li><a href="bkkplacestogo.html">places to go</a></li>
<li><a href="bkkwhatson.html">what's on</a></li>
<li><a href="bkktravel.html">travel</a></li>
<li><a href="bkkmapsandguides.html">maps and guides</a></li>
<li><a href="bkkpeoplelikeyou.html">people like you</a></li>
</ul>
</div>
<div class="links2">
<ul>
<li><a href="bkkhotels.html">hotels</a></li>
<li><a href="bkkapartments.html">apartments</a></li>
<li><a href="bkkselfcatering.html">selfcatering</a></li>
<li><a href="bkkhomestay.html">homestay</a></li>
<li><a href="bkkcamping.html">camping</a></li>
<li><a href="bkkcaravans.html">caravans</a></li>
</ul>
</div>
<div class="main">
testqertyuiop[]asdfghjkl;'zxcvbnm,./qwertyuiop[sdfghjkl;zxcvbnm,,.qwertyuiop[asdfghjkl;zxcvbnm,qwertyuiop[asdfghjkl;zxcvbnm,qwertyuuii
</div>
<div class="ads">
<h5>Sponsored Advertisements</h5>
</div>
</div>
</body>
</html>
[code] END OF HTML
