Lista med float:left

naME · 2009-04-27, 16:20

Hej, jag håller på med en layout där man skall kunna bläddra mellan kategorier på startsidan typ som på www.prisjakt.nu men jag lyckas inte få det som jag vill. Jag skulle vilja slippa dela upp det i två kolumner men när jag bara använder float left så blir det mellanrum när höjden varrierar (se bild). Går detta att lösa eller alternativt hur löser man det snyggast?

se:
http://bayimg.com/IAPPKAaBE

index.html

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
 * <head>
 * * *<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 * * *<title>untitled</title>
 * * *<link href="css/standard.css" rel="stylesheet" type="text/css" />
 * </head>
 
 * <body>
 * * *<div id="layout">
 * * * * <dl id="content">
 * * * * * *<dd>
 * * * * * * * <div class="category">2D-grafik</div>
 * * * * * * * <ul id="contentList">
 * * * * * * * * *<li><a href="#">Fireworks</a></li>
 * * * * * * * * *<li><a href="#">Flash</a></li>
 * * * * * * * * *<li><a href="#">Gimp</a></li>
 * * * * * * * * *<li><a href="#">Illustrator</a></li>
 * * * * * * * * *<li><a href="#">Incscape</a></li>
 * * * * * * * * *<li><a href="#">Paint Shop Pro</a></li>
 * * * * * * * * *<li><a href="#">Photoshop</a></li>
 * * * * * * * </ul>
 * * * * * *</dd>
 * * * * * *<dd>
 * * * * * * * <div class="category">3D-grafik</div>
 * * * * * * * <ul id="contentList">
 * * * * * * * * *<li><a href="#">3DS MAX</a></li>
 * * * * * * * * *<li><a href="#">AutoCAD</a></li>
 * * * * * * * * *<li><a href="#">Blender 3d</a></li>
 * * * * * * * * *<li><a href="#">Bryce 3d</a></li>
 * * * * * * * * *<li><a href="#">Cinema 4D</a></li>
 * * * * * * * * *<li><a href="#">Lightwave 3D</a></li>
 * * * * * * * * *<li><a href="#">Maya</a></li>
 * * * * * * * </ul>
 * * * * * *</dd>
 * * * * * *<dd>
 * * * * * * * <div class="category">Ljudredigering</div>
 * * * * * * * <ul id="contentList">
 * * * * * * * * *<li><a href="#">Assembler</a></li>
 * * * * * * * * *<li><a href="#">C#</a></li>
 * * * * * * * * *<li><a href="#">C++</a></li>
 * * * * * * * * *<li><a href="#">Java</a></li>
 * * * * * * * * *<li><a href="#">Perl</a></li>
 * * * * * * * </ul>
 * * * * * *</dd>
 * * * * * *<dd>
 * * * * * * * <div class="category">Kontorsprogram</div>
 * * * * * * * <ul id="contentList">
 * * * * * * * * *<li><a href="#">MS Excel</a></li>
 * * * * * * * * *<li><a href="#">MS PowerPoint</a></li>
 * * * * * * * * *<li><a href="#">MS Word</a></li>
 * * * * * * * * *<li><a href="#">QuarkXPress</a></li>
 * * * * * * * </ul>
 * * * * * *</dd>
 * * * * * *<dd>
 * * * * * * * <div class="category">Databaser</div>
 * * * * * * * <ul id="contentList">
 * * * * * * * * *<li><a href="#">DB Design</a></li>
 * * * * * * * * *<li><a href="#">DB2</a></li>
 * * * * * * * * *<li><a href="#">MS Access</a></li>
 * * * * * * * * *<li><a href="#">MsSQL</a></li>
 * * * * * * * * *<li><a href="#">MySQL</a></li>
 * * * * * * * * *<li><a href="#">Oracle</a></li>
 * * * * * * * * *<li><a href="#">SQL Basics</a></li>
 * * * * * * * * *<li><a href="#">Sybase</a></li>
 * * * * * * * </ul>
 * * * * * *</dd>
 * * * * * *<dd>
 * * * * * * * <div class="category">Programmering</div>
 * * * * * * * <ul id="contentList">
 * * * * * * * * *<li><a href="#">Assembler</a></li>
 * * * * * * * * *<li><a href="#">C#</a></li>
 * * * * * * * * *<li><a href="#">C++</a></li>
 * * * * * * * * *<li><a href="#">Java</a></li>
 * * * * * * * * *<li><a href="#">Perl</a></li>
 * * * * * * * </ul>
 * * * * * *</dd>
 * * * * * *<dd>
 * * * * * * * <div class="category">Operativsystem</div>
 * * * * * * * <ul id="contentList">
 * * * * * * * * *<li><a href="#">GNU/Linux</a></li>
 * * * * * * * * *<li><a href="#">Ubuntu</a></li>
 * * * * * * * * *<li><a href="#">BSD</a></li>
 * * * * * * * * *<li><a href="#">MAC OSX</a></li>
 * * * * * * * * *<li><a href="#">Windows 7</a></li>
 * * * * * * * * *<li><a href="#">Windows Vista</a></li>
 * * * * * * * * *<li><a href="#">Windows XP</a></li>
 * * * * * * * </ul>
 * * * * * *</dd>
 * * * * * *<dd>
 * * * * * * * <div class="category">Webbutveckling</div>
 * * * * * * * <ul id="contentList">
 * * * * * * * * *<li><a href="#">Adobe Flex</a></li>
 * * * * * * * * *<li><a href="#">ASP</a></li>
 * * * * * * * * *<li><a href="#">ASP.NET</a></li>
 * * * * * * * * *<li><a href="#">ColdFusion</a></li>
 * * * * * * * * *<li><a href="#">CSS</a></li>
 * * * * * * * * *<li><a href="#">Dreamweaver</a></li>
 * * * * * * * * *<li><a href="#">HTML</a></li>
 * * * * * * * * *<li><a href="#">Java</a></li>
 * * * * * * * * *<li><a href="#">Javascript</a></li>
 * * * * * * * * *<li><a href="#">MM Fusion</a></li>
 * * * * * * * * *<li><a href="#">MS FrontPage</a></li>
 * * * * * * * * *<li><a href="#">Perl and CGI</a></li>
 * * * * * * * * *<li><a href="#">PHP</a></li>
 * * * * * * * * *<li><a href="#">Python</a></li>
 * * * * * * * * *<li><a href="#">Ruby on Rails</a></li>
 * * * * * * * * *<li><a href="#">SEO</a></li>
 * * * * * * * * *<li><a href="#">Web Design</a></li>
 * * * * * * * * *<li><a href="#">XML</a></li>
 * * * * * * * </ul>
 * * * * * *</dd>
 * * * * </dl>
 * * * * <div id="rightcol"></div>
 * * *</div>
 * </body>
</html>

standard.css

Kod:

body {
 * margin: 0;
 * background: #F2F2F2;
}
 
/* Layout "frame" */
#layout {
 * width: 940px;
 * height: auto;
 * margin: auto;
}
 
/* Page content */
#content {
 * width: 676px;
 * height: 400px;
 * margin: 0;
 * padding: 20px 0 0 0;
 * float: left;
}
 
/* Page content gridbox */
#content dd {
 * width: 316px;
 * height: auto;
 * margin: 0 20px 20px 0;
 * background: #FFF;
 * border: 1px solid #DFDFDF;
 * border-bottom: 0px;
 * float: left;
}
 
/* Page item-list (list) */
#contentList {
 * margin: 0;
 * padding: 0;
 * float: left;
}
 
/* Page item-list (listitem) */
#contentList li {
 * list-style-type: none;
 * float: left;
}
 
/* Page item-list (link) */
#contentList a {
 * width: 306px;
 * height: 22px;
 * padding: 8px 0 0 10px;
 * border-bottom: 1px solid #DFDFDF;
 * text-decoration: none;
 * float: left;
}
 
.category {
 * font-size: 16px;
 * font-weight: bold;
 * padding: 10px 0 7px 10px;
}
 
#rightcol {
 * width: 262px;
 * height: 400px;
 * margin: 20px 0 0 0;
 * background: #FFF;
 * border: 1px solid #DFDFDF;
 * float: left;
}

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Lista med float:left