Jeg synes at det er meget svært at finde ud af hvad det er du ønsker - er det tre kolonner hvor den midterste kolonne er i midten og teksten heri er højrestillet?
Jeg har lige prøvet at stille din kode lidt pænere så den er nemmere at overskue og ændret baggrundsfarven, så man kan skelne de forskellige div's fra hinanden.
Det blå div opfatter jeg som en container du bruger for at hold de tre andre divs samlede, det grønne div er for sig selv, mens det gule er indeholdt i det røde, gør det umuligt (som koden ser ud nu) at have indhold i det røde div uden at det gule automatisk bliver flyttet længere ned.
Er det også sådan du selv opfatter det?
<div style="clear:both;width:100%;background-color:blue">
<div style="float:left;clear:none;width:45%;padding:10px;margin:10px;background-color: red;" align="right">a
<div style="float:left; background-color: yellow">vi tester<br />at det<br />virkera
</div>
</div>
<div style="float:left;clear:none;width:45%;padding:10px;margin:10px;background-color:green">vi tester 2
</div>
</div>
Hvis det du ønsker er 3 kolonner med mulighed for at højrestille teksten i den midterste kolonne ville jeg gøre således:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New document</title>
<meta name="generator" content="TSW WebCoder">
<title>liquid test</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
font-size: 90%;
font-family: arial, helvetica, sans-serif;
}
#header
{
height: 50px;
margin-bottom: 1em;
border-bottom: 1px solid #999;
background-color: #ddd;
}
#gutter
{
float: left;
width: 3%;
height: 1px;
}
#col1
{
float: left;
width: 44%;
margin-bottom: 1em;
border-right: 1px solid #999;
padding-right: 3%;
}
#col2
{
float: left;
width: 19%;
margin-left: 3%;
margin-bottom: 1em;
border-right: 1px solid #999;
padding-right: 3%;
}
#col3
{
float: left;
width: 19%;
margin-left: 3%;
margin-bottom: 1em;
}
#footer
{
clear: both;
height: 50px;
border-top: 1px solid #999;
padding: .5em;
text-align: right;
}
h1
{
margin: 0;
padding: .5em;
}
h2 { margin-top: 0; }
</style>
</head>
<body>
<div id="header">
<h1>Heading</h1>
</div>
<div id="gutter"></div>
<div id="col1">
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="col2">
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
</div>
<div id="col3">
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
</div>
<div id="footer">Footer text here</div>
</html>
(Sakset fra
MaxDesign.