---
title: "Positionering av 2 divar i en div"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/160619-positionering-av-2-divar-i-en-div"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "annaica"
published: "2007-05-23T08:16:18.000Z"
updated: "2007-05-29T09:39:54.000Z"
replies: 9
views: 429
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/160619-positionering-av-2-divar-i-en-div"
---

# Positionering av 2 divar i en div

## #1 — annaica, 2007-05-23T08:16Z

Jag gör just nu en sida, allt fungerar bra med kod (HTML och PHP) och CSS, jag har bara ett litet problem.

All min text ligger i en div som jag har valt att kalla #content. på en sida ligger det 2 divar i #content; #left och #right.

Lite kod kan se ut såhär;

```php
<div id="content">
<div id="left"><p><img class="dot" src="images/punkt.gif" alt=""/></p>
<h1>Rubrik</h1> 
<li><a href="index.php?page=produkter&subpage=id01">Text</a></li>
<li><a href="index.php?page=produkter&subpage=id02">Text</a></li>
</div>

<div id="right">
	<?php
        if (!isset($_GET["subpage"])) require("page_tjanster.php");
         else 
			if ($_GET["subpage"] == id01) require("tjanster/id01.php");
			if ($_GET["subpage"] == id02) require("tjanster/id02.php");
?>
</div>
</div>
```

i min css fil har #content inga andra atribut än en bakgrundsfärg samt lite padding och en border.

\#left respektive #right vill jag ska ligga till vänster respektive höger, och jag har då försökt använda mig av en float:left/right; men då vill inte min #content "hänga med" utan den lägger sig som en linje ovanför #left och #right.

Jag har då förstått att float gör så att innehållet inte tar någon plats (?), men hur ska jag få mina 2 divar att ligga till vänster resp. höger?

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

## #2 — Danne V, 2007-05-23T08:40Z

Du har hittat ett (av flera) problem med CSS..

Du kan floata EN av divvarna. #content kommer då att sträcka sig i förhållande till den andra, icke-floatade divven.

Problemet är när innehållet i den icke-floatade divven är kortare än i den floatade så kommer ju "container att bli kortare än den floatade som alltså kommer att sticka ut utanför #container.

Detta dilemma kan lösas med t.ex. javascript. Men det kräver ju att användaren har javascriptstödet påslaget. Man kan troligen också fibbla med andra mer eller mindre osäkra hack, men jag har inte fördjupat mig i sånt.

Istället, när jag ställs inför samma problem, så anänder jag helt enkelt en tabell med två celler. Gjort på 1 minut, validerar enligt W3C, stöds av alla webbläsare och kräver inga extra javascripter eller konstiga hack. Men då krävs förstås att man inser att W3C rekommendationer inte är annat än just rekommendationer och inte lag.

Eller så använder jag ett javascript som gjorts av <http://projectseven.com> som funkar med Dreamweaver (kanske med andra program också?).

EDIT: Här är länken till Project Seven's sida: <http://www.projectseven.com/tutorials/css/pvii_columns/index.htm>

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

## #3 — annaica, 2007-05-23T08:46Z

jag provade att lägga en float på enbart den kortaste diven (#right) iom att #left kommer ha en konstant höjd då det är en lista med länkar som inte kommer förändras direkt mycket. Men lägger jag float: right; på #right så visst, den lägger sig till höger, men samtidigt hamnar den "under" #left.

Jag avstår från att använda tabeller så långt det bara är möjligt då jag inte vill göra en layout i tabeller, men här kanske jag inte har något annat val   x( 

Men tack för ditt väldigt snabba svar! :)

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

## #4 — silfver, 2007-05-23T08:47Z

Kan du inte bara sätta en width på dina #left och #right? 49% vardera borde väl fungera utmärkt? 50 % har jag för mig buggar i vissa läsare.

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

## #5 — Danne V, 2007-05-23T08:49Z

> **annaica skrev:**
>
> jag provade att lägga en float på enbart den kortaste diven (#right) iom att #left kommer ha en konstant höjd då det är en lista med länkar som inte kommer förändras direkt mycket. Men lägger jag float: right; på #right så visst, den lägger sig till höger, men samtidigt hamnar den "under" #left.
> 
> Jag avstår från att använda tabeller så långt det bara är möjligt då jag inte vill göra en layout i tabeller, men här kanske jag inte har något annat val   x( 
> 
> Men tack för ditt väldigt snabba svar! :)

Kolla länken jag la till längst ner i mitt första svar...

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

## #6 — tanten, 2007-05-23T11:26Z

För att du ska se bakgrundsfärgen i content så får du antingen floata den left, eller om designen blir fel då sätta höjd på den. Det beror på hur omgivningen runt din content ser ut vilket som blir bäst att göra och om innehållet kommer skifta mycket så det inte går att sätta en höjd. De två inneliggande divvarna kan du också ha left på men de måste veta hur bred content är.

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

## #7 — annaica, 2007-05-23T12:17Z

> **silfver skrev:**
>
> Kan du inte bara sätta en width på dina #left och #right? 49% vardera borde väl fungera utmärkt? 50 % har jag för mig buggar i vissa läsare.

 Provade det, men oavsett vilken bredd jag angav så la sig ändå #right under.

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

## #8 — annaica, 2007-05-23T12:19Z

> **Danne V skrev:**
>
> Kolla länken jag la till längst ner i mitt första svar...

Kollat... men jag får det verkligen inte att fungera med divar så det får bli en tabell med 2 kolumner. Det är den lösningen som jag nu har hittat som funkar.

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

## #9 — tanten, 2007-05-23T12:27Z

Men du måste ha gjort något fel någonstans. Ska fungera... Allt som behövs är

```
#content{
background-color: #00f;
width: 30em;
float: left;
border: 1px solid #000;
}
#left{ 
width: 20%;
 float: left;
}
#right{
width: 80%;
float: left;}
```

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

## #10 — annaica, 2007-05-29T09:39Z

Jag hittade lösningen genom ett annat forum. Det man behöver göra är att lägga till 

```
<div style="clear:both;"></div>
```

efter dessa divar, så funkar det fint!

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/160619-positionering-av-2-divar-i-en-div