Float: 3 collumns

Agnisr · June 21, 2006

Mēģinu izveidot lapā 3 kolonnas, bet nu nekādīgi nesanāk, visu laika vai nu kāda kolonna "pāriet" savas robežas un teksts iespiežas otrā kolonnā, vai arī pārlec uz leju kā nākošais divs!

Mēginu visu padarīšanu izveikt ar float (maybe kaut ko daru šķērsām un to var izveikt vienkāršāk?

HTML:

<html>
<head>
<title>Lapa</title>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>
<div id="page">
<div id="logo">Lapas logo</div>
<div id="top">
 <div id="left">
<ul>
  <li><a href="">Business idea</a></li>
  <li><a href="">Business plan</a></li>
  <li><a href="">Finances</a></li>
  <li><a href="">Legislation</a></li>
  <li><a href="">Registration</a></li>
  <li><a href="">Taxes</a></li>
  <li><a href="">Personnel</a></li>
  </ul>
 </div>
 <ul>
<li><a href="">Office</a></li>
<li><a href="">Documentation</a></li>
<li><a href="">Marketing</a></li>
<li><a href="">Quality</a></li>
<li><a href="">E-Commerce</a></li>
<li><a href="">European Union</a></li>
 </ul>
</div>

<div id="content">
 <span class="c_left">
<h1>Business idea</h1>
Teksts tekts teksts tekts teksts tekts teksts tekts teksts tekts teksts tekts teksts tekts teksts 
 </span>

 <span class="c_right">
<h1>Business plan</h1>
<a href="">links</a>
Teksts tekts teksts tekts teksts tekts teksts tekts teksts tekts teksts tekts teksts tekts teksts <a href="">links</a>
Teksts tekts teksts tekts teksts tekts teksts tekts teksts tekts teksts tekts teksts tekts
 </span>
 <span class="center">
<h1>Finances</h1>
Teksts tekts teksts tekts teksts tekts teksts tekts teksts tekts teksts tekts teksts tekts teksts <a href="">links</a>
Teksts tekts teksts tekts teksts tekts teksts tekts teksts tekts teksts tekts teksts tekts teksts
 </span>
</div>

<div id="footer">© 2006</div>

</div>
</body>
</html>

CSS:

html,body{
margin: 0px;
padding: 0px;
text-align: center;
font-size: 11px;
font-family: arial, verdana, tahoma, sans-serif;
background-color: #fafafa;
color:#6F7A83
}

ul {
margin: 0;
padding: 0;
list-style-position: inside;
list-style-type: none;
text-align: left;
}

li {
width: 125px;
border-bottom: 1px solid #003366;
text-align: left;
}

li a, a:visited {
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 14px;
}

li:hover a, li:hover {
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 14px;
background-color: #cacaca;
}

#top {
padding: 10px;
background-image: url(logo.jpg);
text-align: left;
border-bottom: 1px solid #003366;
margin-bottom: 1px;
}

#content {
padding: 10px;
text-align: justify;
font-family: arial, verdana;
display: block;
position: relative;
border-top: 5px solid #003366;
}

#left {
float: left;
width: 200px;
margin: 0px;
}

#page{
width:  800px;
margin: 0px auto;
border: 3px solid #003366;
display: block;
}

h1 {
text-decoration: none;
font-weight: bold;
padding: 0;
margin: 0;
font-size: 14px;
color: #476274;
}

#footer {
background-color: #6B7C87;
padding: 10px;
display: block;
border-top: 1px solid #003366;
color: #fafafa;
clear: both;
}

#logo {
padding: 10px;
background-color: #6B7C87;
text-align: left;
margin-bottom: 1px;
color: #fafafa;
}

.c_left {
width: 33%;
float: left;
display: inline;
margin-right: 10px;
border-right: 1px solid #003366;
padding-right: 10px;

}

.c_right {
width: 33%;
padding-left: 10px;
float: right;
display: inline;
margin-left: 10px;
border-left: 1px solid #003366;
}

#content a, #content a:visited { 
color: #2397E9;
text-decoration: underline;
font-weight: normal;
font-size: 11px
}

#content a:hover { 
color: #2397E9;
text-decoration: none;
font-weight: normal;
font-size: 11px;
}

.center {
width: 32%;
text-align: justify;
}