---
title: "Vill ha två boxar bredvid varann"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/184231-vill-ha-två-boxar-bredvid-varann"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Emil W"
published: "2010-08-02T19:13:52.000Z"
updated: "2010-08-02T20:47:22.000Z"
replies: 10
views: 1178
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/184231-vill-ha-två-boxar-bredvid-varann"
---

# Vill ha två boxar bredvid varann

## #1 — Emil W, 2010-08-02T19:13Z

Hej alla Wf:are 

Jag skullle vilja ha två boxar bredvid varann men vet inte hur jag ska lösa det.

Html-koden

```
<div class="ny"><a href="">
<img src="hemsida/orm.jpg">
</a>
<div class="list">Förslag eller Tips</div>
Har du tips eller förslag ? <br>så kan du lämna dom här
</div>
<div class="ny"><a href="">
<img src="hemsida/orm.jpg">
</a>
<div class="list">Min blogg</div>
Vill du läsa min blogg ? <br>så kan du läsa den här
</div>
```

Css-koden

```
.ny{
font-family:arial;
float:left;
font-size:8pt;
margin-left:400px;
margin-top:20px;
width:150px;
}
.ny img{
border:0px;
}
.list{
padding:3px;
width:144px;
color:#FFFFFF;
font-family:arial;
font-size:8pt;
font-weight:bold;
background-image:url(hemsida/list.png);
}
```

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

## #2 — Danne V, 2010-08-02T19:20Z

Du kan t.ex. gå in direkt i den ena div-taggen och lägga till t.ex. detta:

```
<div class="ny" style="float:left;">
```

..eller "right" istället för "left" om det passar bättre.

Men sen vill du nog ha lite avstånd mellan boxarna också, då kann du lägga till t.ex.

```
<div class="ny" style="float:leaft; margin-right:20px;">
```

 eller nåt... typ...

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

## #3 — Emil W, 2010-08-02T19:35Z

Det funkade inte. Dom blev inte brevid varandra.

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

## #4 — voigtann1, 2010-08-02T19:44Z

har du en parent-nod som är smalare än vad dina två boxar är? float:left skall lösa problemet normalt.

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

## #5 — Emil W, 2010-08-02T19:48Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1511933)**
>
> har du en parent-nod som är smalare än vad dina två boxar är? float:left skall lösa problemet normalt.

Vad är parent-nod för något ? 
för jag har aldrig hört talas om det.

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

## #6 — voigtann1, 2010-08-02T20:03Z

```
<div id="parent">
    <div class="node"></div>
    <div class="node"></div>
</div>
```

båda .node har #parent som en förälder nod

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

## #7 — Emil W, 2010-08-02T20:08Z

jag har ingen sån box runt.

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

## #8 — voigtann1, 2010-08-02T20:10Z

Ge all genererad HTML kod, för det fungera som Danne V säger med float: <http://jsbin.com/icoce4>

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

## #9 — Emil W, 2010-08-02T20:24Z

Jag postar hela koden i stället för det funkade inte det kan vara någon annan box som stör att det inte funkar för mig.

```
body{
background:#000000;
margin-top:0px;
}

.box{
margin-left:150px;
width:1000px;
height:2000px;
}
.top{
background-image:url(hemsida/top.png);
color:#FFFFFF;
float:left;
width:995px;
height:100px;
}
.meny{
background-image:url(hemsida/meny.png);
padding-left:5px;
padding-top:3px;
color:#000000;
font-size:8pt;
float:left;
font-weight:bold;
font-family:arial;
width:990px;
height:18px;
}
.mitten{
background-image:url(hemsida/bg.png);
padding-left:5px;
padding-top:2px;
color:#000000;
width:990px;
float:left;
height:800px;
}
.bottom{
background-image:url(hemsida/bottom.png);
padding-left:5px;
padding-top:2px;
color:#FFFFFF;
font-family:verdana;
font-size:13px;
float:left;
font-weight:bold;
width:990px;
height:46px;
}
.meny a{
color:#000000;
text-decoration:none;
}
.meny a:hover{
color:#000000;
text-decoration:none;
}
.bottom a{
color:#FFFFFF;
text-decoration:none;
}
.bottom a:hover{
color:#FFFFFF;
text-decoration:none;
}
.logo{
width:250px;
height:50px;
margin-top:10px;
margin-left:10px;
}
.ny{
font-family:arial;
float:left;
font-size:8pt;
margin-left:400px;
margin-top:20px;
width:150px;
}
.ny img{
border:0px;
}
.list{
padding:3px;
width:144px;
color:#FFFFFF;
font-family:arial;
font-size:8pt;
font-weight:bold;
background-image:url(hemsida/list.png);
}
```

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Emils hemsida</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="hemsida1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box">
<div class="top">
<div class="logo"><?php include('hemlogo.php'); ?></div>
</div>
<div class="meny"><a href="#">Startsida</a> - <a href="#">Galleri</a> - <a href="#">Om sida</a></div>
<div class="mitten">
<div class="ny"><a href="">
<img src="hemsida/orm.jpg">
</a>
<div class="list">Förslag eller Tips</div>
Har du tips eller förslag ? <br>så kan du lämna dom här
</div>
<div class="ny"><a href="">
<img src="hemsida/orm.jpg">
</a>
<div class="list">Min blogg</div>
Vill du läsa min blogg ? <br>så kan du läsa den här
</div>
</div>
<div class="bottom">
&copy Emil Wiklund 2010 - <a href="#" title="Emil Wiklund har byggt denna webbplats">Sidan gjord av Emil Wiklund</a>
</div>
</div>
</body>
</html>
```

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

## #10 — voigtann1, 2010-08-02T20:30Z

För det första så har du ju en förälder till dina .ny, .mitten är ju deras förälder.

Och du har för bred, eller en riktigt överdriven padding på dina element, om jag ändrar width på .ny till 95px så hamnar dom rätt.

.mitten har en bredd på 990px, om du skall ha padding på den så få du räkna bort den på din width, exempelvis:

.mitten {
width: 990px;
padding: 10px;
}
så kommer alla dina element inne i den (som är block element) ta upp 990-20px (10px på båda sidorna).

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

## #11 — Emil W, 2010-08-02T20:47Z

Tack så mycket för hjälpen voigtann1 och Danne V.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/184231-vill-ha-två-boxar-bredvid-varann