---
title: "3 div på rad - enkel kod"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/118694-3-div-på-rad-enkel-kod"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Fuel"
published: "2004-12-26T08:37:30.000Z"
updated: "2004-12-26T15:51:15.000Z"
replies: 2
views: 445
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/118694-3-div-på-rad-enkel-kod"
---

# 3 div på rad - enkel kod

## #1 — Fuel, 2004-12-26T08:37Z

Hur fixar jag detta:

```php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="sv">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>3 div på rad</title>
<style type="text/css">
h1 { margin:0px; }
.content { width:100%; }
.top {  background:#336699; color:#ffffff; }
.left { float:left; background:#ffffcc; width:170px; }
.middle {  background:#eeeeee; width:auto;  margin-left:170px; margin-right:170px; }
.right { float:right;  background:#ffaacc; width:170px;}
</style>
</head>
<body>
<div class="content">
<div class="top"><h1>LOGO</h1></div>
<div style="clear:both;"></div>
<div class="left">Left asd asdasd as das asd d asd</div>
<div class="right">Right asd asd as sdas das sadss</div>
<div class="middle">
Middle asdasd asd asd sasdas d askjd akjsd kajsdbkjasbd 
jaskjda jbksakj s sa jbk jkaasjd asjbkd jksadass
<p>asd asd asd asd asd asdasd sadsad asd asd asd asd sa
asd as sad asd asdas sad asd sad sa asd as asd sad as</p>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
```

om jag egentligen vill ha grund html koden så här

```php
<body>
<div class="content">
<div class="top"><h1>LOGO</h1></div>
<div style="clear:both;"></div>
<div class="left">Left asd asdasd as das asd d asd</div>
<div class="middle">
Middle asdasd asd asd sasdas d askjd akjsd kajsdbkjasbd 
jaskjda jbksakj s sa jbk jkaasjd asjbkd jksadass
<p>asd asd asd asd asd asdasd sadsad asd asd asd asd sa
asd as sad asd asdas sad asd sad sa asd as asd sad as</p>
</div>
<div class="right">Right asd asd as sdas das sadss</div>
<div style="clear:both;"></div>
</div>
</body>
```

 Tanken är att om jag disablar CSS så ska html falla i ordningen left, middle & right. Helst med så enkel CSS som möjligt. Jag har testat några varianter men det blir inte riktigt bra.

Någon som har förslag på en enkel lösning ?

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

## #2 — jarvklo, 2004-12-26T14:56Z

Hmm...
<http://realworldstyle.com/nn4_3col_header.html> är en variant...

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

## #3 — Fuel, 2004-12-26T15:51Z

Det blev i stort sett att jag tog bort \<div class="content"\> och absolut positionera right kolumnen ... tja, det funkar iaf

tack

```php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html lang="sv">
<head>
<title>Test</title>
<style type="text/css">
#left
{
	float:left;
	width:170px;
}

#left-inner
{
	padding:15px;
}

#content
{
	width:auto;
	margin-left:170px;
	margin-right:170px;
}

#content-inner
{
	padding:15px;
}

#right
{

	position: absolute;
	right: 0px;
	top: 80px;
	width: 170px;
	z-index: 3;
	padding: 0px;

}

#right-inner
{
	padding:15px;
}
</style>
</head>
<body>
<div id="left">
<div id="left-inner">
Left
</div>
</div>
<div id="content">
<div id="content-inner">
Content
</div>
</div>
<div id="right">
<div id="right-inner">
Right
</div>
</div>
</body>
</html>
```

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/118694-3-div-på-rad-enkel-kod
