---
title: "float-problem"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/137525-float-problem"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Peeer"
published: "2005-11-13T17:53:04.000Z"
updated: "2005-11-15T15:19:19.000Z"
replies: 9
views: 258
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/137525-float-problem"
---

# float-problem

## #1 — Peeer, 2005-11-13T17:53Z

Hej!
Jag har en div (main) som innehåller två andra divar (left och right). Ingen av divarna har någon fast höjd. Mina frågor är:
1) Hur gör jag för att left (som förövrigt är 150px bred) ska ligga till vänster om right?
2) Om left är längre än right (och därmed tänjer ut main) så vill jag att den ska få en scroll istället för att tänja. 

Tpfh!

Permalänk: https://www.webforum.nu/p/137525

## #2 — caya, 2005-11-13T19:36Z

som svar på båda frågorna
i cssen

\#left {
float:left;
widht:150px;
height:410px;
overflow:auto;
}
\#right {
float:right;
}
.clr {
clear:both;
}

i html

\<div id="main"\>
\<div id="left"\>
lorem ipsum dolor sit amet\</div
\<div id="right"\>
dolero dolera dolor color \</div\>
\<div class="clr"\>&nbsp;\</div\>
\</div\>

Permalänk: https://www.webforum.nu/p/1706582

## #3 — Peeer, 2005-11-13T20:34Z

Nja, jag vill inte ha någon fast höjd på left. Den ska vara lika hög som right och får inte allt plats så ska det dyka upp en scroll. Men tack ändå :)

Permalänk: https://www.webforum.nu/p/1706610

## #4 — caya, 2005-11-13T20:39Z

jag tror vi missuppfattade varandra nu... var det main som skulle få scroll istället för att tänjas? isåfall sätter du bara en fast höjd på den och overflow:auto.

Permalänk: https://www.webforum.nu/p/1706614

## #5 — Peeer, 2005-11-13T20:47Z

Nej, main & right ska aldrig ha någon scroll. Main kommer alltid vara lite längre än right (right ligger i main). Left ska även den vara lika lång som right. Har left innehåll som inte får plats så ska left få en scroll.

Permalänk: https://www.webforum.nu/p/1706619

## #6 — caya, 2005-11-14T09:04Z

isåfall har jag ingen lösning för det är först när man sätter en fast höjd som man kan sätta en scroll (som jag uppfattat det)

Permalänk: https://www.webforum.nu/p/1706817

## #7 — zcorpan, 2005-11-14T17:00Z

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>001</title>
  <style type="text/css">
   #main { position:relative; border:solid; }
   #left { position:absolute; top:0; left:0; width:150px; height:100%; overflow:auto; background:lime; }
   #right { padding-left:150px; background:yellow; }
  </style>
 </head>
 <body>
  <div id="main">
   <div id="left"> foo <br> bar </div>
   <div id="right"> baz </div>
  </div>
 </body>
</html>
```

Nu verkar det här bara fungera i Firefox, samt Firefox visar inte någon scrollningslist...

Permalänk: https://www.webforum.nu/p/1707109

## #8 — zcorpan, 2005-11-15T13:45Z

Anledningen till att Firefox inte visade någon scroll var att det inte fick plats med någon! Ökar man line-height (eller innehållet) så kommer det fram en scroll när den behövs. 

Nedan har jag fått det att fungera i IE5.5 och IE6 också.

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>002</title>
  <style type="text/css">
   #main { position:relative; border:solid; line-height:10; }
   #left { position:absolute; top:0; left:0; width:150px; max-height:100%; overflow:auto; background:lime; }
   #right { margin-left:150px; background:yellow; }
  </style>
  <!--[if gte IE 5.5]>
   <style type="text/css">
    #main { zoom:1; /* hasLayout */ }
   </style>
   <script type="text/javascript">
    window.attachEvent("onload", function() {
     var left = document.getElementById("left");
     var mainHeight = document.getElementById("main").clientHeight;
     left.style.height = mainHeight > left.clientHeight ? "auto" : mainHeight + "px";
    });
   </script>
  <![endif]-->
 </head>
 <body>
  <div id="main">
   <div id="left"> foo <br> bar </div>
   <div id="right"> baz </div>
  </div>
 </body>
</html>
```

Hoppas det är till nån hjälp. :)

Permalänk: https://www.webforum.nu/p/1710689

## #9 — Peeer, 2005-11-15T14:19Z

Ska kolla på det där i kväll, hoppas det fungerar :)

Tack så länge iaf :)

/r Det finns inget sätt att lösa det här utan javascript?!

Permalänk: https://www.webforum.nu/p/1710725

## #10 — zcorpan, 2005-11-15T15:19Z

Fråga Microsoft. ;)

Permalänk: https://www.webforum.nu/p/1710749

---

Tråden på webben: https://www.webforum.nu/amne/html-css/137525-float-problem
