---
title: "Placera en div på höger sida av en annan div i en div?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/171783-placera-en-div-på-höger-sida-av-en-annan-div-i-en-div"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "xtreme"
published: "2008-05-26T09:35:39.000Z"
updated: "2008-05-26T16:27:14.000Z"
replies: 6
views: 523
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/171783-placera-en-div-på-höger-sida-av-en-annan-div-i-en-div"
---

# Placera en div på höger sida av en annan div i en div?

## #1 — xtreme, 2008-05-26T09:35Z

Har en vit (nästan i alla fall)  ruta där texten finns men på höger sida om den vill jag ha en vit div-spalt där nyheter kommer synas (dvs en större vit textruta och till höger om den en smalare vit ruta med nyheter och lite mellanrum mellan dem). Hur sätter jag dit den? Den hamnar underst. Den som heter "box1" är den jag provat men då hamnar den som sagt under den andra.

HTML:

```
<div id="content-wrap"><div id="content">	
	  <div id="main">		
			<div class="box">
			  <p>
			  <h1>V&auml;lkommen</h1>
			  </p>
			  <p> ffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf 	        </div>

            <div class="box1">
            test test test
            </div>
 
	  </div>
	</div>
	</div>
```

CSS:

```
/* content */
#content-wrap {
	clear: both;
	float: left;
	background: #1183DA;		
	width: 100%;
}
#content {
	text-align: left;	
	padding: 0; 
	margin: 0 auto;		
}

/* main */
#main {
	margin-top: 10px;
	margin-bottom: 10px; 
	padding: 0;		
}
#main h1 { 
	font: bold 2.8em 'Trebuchet MS', Arial, Sans-serif;
	color: #B1E100;
	letter-spacing: -2px;		
	padding-bottom: 0;	
}
#main h1 a {
	color: #B1E100;
	text-decoration: none;
}

/* box */
.box {
	border: 5px solid #1F8ADE;
	background-color: #F9F9F9;
	
}

.box1 {
	border: 5px solid #1F8ADE;
	background-color: #F9F9F9;
	
}
```

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

## #2 — effata, 2008-05-26T09:45Z

Float: left; på #box gör det du vill, men kan skapa andra problem, främst i IE6.
Kombinera det med clearfixhacket brukar vara en bra idé.
<http://www.positioniseverything.net/easyclearing.html>

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

## #3 — Fuel, 2008-05-26T11:07Z

Synd att det ska hackas så mkt för IE. Personligen följer jag 7 år gammal css standard och funkar det inte i IE så.. otur för dom med IE - byt webläsare.

Såga att 

```
<p><h1>V&auml;lkommen</h1></p>
```

 
Ska vara 

```
<h1>V&auml;lkommen</h1>
```

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

## #4 — xtreme, 2008-05-26T12:59Z

> **effata skrev:**
>
> Float: left; på #box gör det du vill, men kan skapa andra problem, främst i IE6.
> Kombinera det med clearfixhacket brukar vara en bra idé.
> <http://www.positioniseverything.net/easyclearing.html>

Detta hjälpte inte så mycket, inget händer, även om jag sätter float: left på box1 med. ;)

```
.box {
	border: 5px solid #1F8ADE;
	background-color: #F9F9F9;
	float: left;
	
}

.box1 {
	border: 5px solid #1F8ADE;
	background-color: #F9F9F9;
		
}
```

Dom flesta som använder IE väl skaffat version 7 som bör klara det bättre. Finns det inget annat sätt?

Fuel:
Eftersom jag inte vill rubriken ska vara uppe i kanten har jag \<p\> på den.

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

## #5 — Fuel, 2008-05-26T13:03Z

Det är felaktig kod .. \<h1\> kan inte vara inom \<p\> .. sätt exempelvis

```
h1 { margin-top:1em; }
```

test..

```
<!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="en" lang="en">
	<head>

		<style type="text/css" id="internalStyle"><!--/*--><![CDATA[/*><!--*/
		/* content */
		#content-wrap
		{
			background: #1183DA;
		}
		
		#content
		{
			text-align: left;	
			padding: 0; 
			margin: 0 auto;		
		}
		
		/* main */
		#main
		{
			margin-top: 10px;
			margin-bottom: 10px; 
			padding: 0;		
		}
		
		#main h1
		{ 
			font: bold 2.8em 'Trebuchet MS', Arial, Sans-serif;
			color: #B1E100;
			letter-spacing: -2px;		
			padding-bottom: 0;	
			margin-top: 1em;
		}
		
		#main h1 a
		{
			color: #B1E100;
			text-decoration: none;
		}
		
		/* box */
		.box
		{
			border: 5px solid #1F8ADE;
			background-color: #F9F9F9;
			margin-right: 420px;

		}
		
		.box1
		{
			border: 5px solid #1F8ADE;
			background-color: #F9F9F9;
			width: 400px;
			float: right;
		}
		
		.cleaner
		{
			clear:both;
			line-height: 0;
			height: 0;
		}
		
		/*]]>*/--></style>
		
		<title>Float</title>
		
	</head>
	<body>

		<div id="content-wrap">
			<div id="content">	
				<div id="main">		
					
					<div class="box1">
		            	
		            	test test test
		            	
		            </div>
		            
					<div class="box">

						<h1>V&auml;lkommen</h1>
						
						<p>
						ffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf 
						sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf 
						sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf 
						sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf 
						sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf 
						sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf 
						sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf 
						sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf 
						sdffdsfsd sfdsf sfdsf sdf sdfs fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf sfdsf sdf sdfs 
						fsdfdsfdsf fsdfsdf fsdfsdf sdffdsfsd sfdsf
						</p>
						
					</div>
					<p class="cleaner"></p>
				</div>
			</div>
		</div>
	</body>
</html>
```

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

## #6 — xtreme, 2008-05-26T13:10Z

> **Fuel skrev:**
>
> Det är felaktig kod .. \<h1\> kan inte vara inom \<p\> .. sätt exempelvis
>
> ```
> h1 { margin-top:1em; }
> ```

OK, tack för det! Hur ska jag nu få till mina två div ;)

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

## #7 — tanten, 2008-05-26T16:27Z

```
.box {
	border: 5px solid #1F8ADE;
	background-color: #F9F9F9;
	width: 80%;
	float: left;
	
}
```

Kanske räcker...

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/171783-placera-en-div-på-höger-sida-av-en-annan-div-i-en-div