---
title: "cssproblem"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/51828-cssproblem"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "netfeed"
published: "2002-08-31T18:05:19.000Z"
updated: "2002-09-02T17:51:37.000Z"
replies: 14
views: 624
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/51828-cssproblem"
---

# cssproblem

## #1 — netfeed, 2002-08-31T18:05Z

säg att jag vill ha en sida som ser ut så här:

```php
----------------
|               |
----------------
|   |       |   |
|   |       |   |
|   |       |   |
|   |       |   |
|   |       |   |
|   |       |   |
-----------------
```

jaja väldigt grovt då

detta vill jag bygga upp med css
men hur skall man göra för att de två yttre sidorna skall bli lika långa som den mittre om man har mycke text i den mittre och någon längd inte för deffinierad... går detta?

och nej jag vill inte göra det i tabbeller eller ramar

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

## #2 — jarvklo, 2002-08-31T21:24Z

En rejäl genomgång om hur man kan kombinera nästlade \<div\>:ar och CSS för att få till detta hittar du t.ex. i artikeln <http://webreference.com/authoring/style/sheets/layout/advanced/>

En bra länksamling med referenser flera bra CSS-layout-teknikartiklar hittar du [här](http://www.websitetips.com/css/index.shtml#cssp)

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

## #3 — Matte, 2002-08-31T22:13Z

Här är en idé:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" 
  content="text/html; charset=iso-8859-1">
<title>CSS</title>
<style type="text/css">
<!-- 
body {
  text-align: center;
  background-color: #6495ed; 
}
body,div,p {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 12px;
}
.omkring {
  margin: auto;
  border: 1px solid black;
  background-color: #fff8dc;
  width: 628px;
}
.top {
  text-align: left;
  height: 50px;
  border-bottom: 1px solid black;
  padding: 5px;
}
.left {
  float:left; 
  width: 110px;
  text-align: left;
}
.right {
  float: right;
  width: 110px;
  text-align: left;
}
.middle {
  text-align: left;
  width: 400px;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-top: 1px solid #fff8dc;
  margin:auto;
}
.inre {
  margin:5px;
}
.transp {
  float: right;
  width: 1px;
  height: 400px; /* för minihöjd */
}
-->
</style>
</head>
<body>
<div class="omkring">

<div class="top">Topp</div>

<div class="left">
<div class="inre">
Vänster
</div></div>

<div class="right">
<div class="inre">
Höger
</div></div>

<div class="middle">
<!-- en transparent bild för minihöjd -->
<img src="transparent.gif" alt="" class="transp">
<div class="inre">
Och en massa text
<br><br><br><br>
Och en massa text
<br><br><br><br>
Och en massa text
<br><br><br><br>
Och en massa text
</div>
<br style="clear:both">
</div>

</div><br style="clear:both">

</body>
</html>
```

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

## #4 — Coper, 2002-09-01T01:45Z

Matte -\> jag testade det som du gjorde men det fungerar  inte så bra i Mozilla. Men man såg det mycket bra i IE någon som vet varför?

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

## #5 — Matte, 2002-09-01T08:47Z

Faktum är att jag testade det även i Mozilla och det såg Ok ut för mig. Testade det med godkänt resultat på IE6, Mozilla 1.0 och Opera 6.04. Samtliga i windows.

Testade det även på NN4.78 (windows) och det fungerade i stort sett där också, men linjerna behöver fixas på annan sätt.

Så här såg det ut för mig i Mozilla: <http://member.webforum.nu/818/mozilla.jpg>

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

## #6 — netfeed, 2002-09-01T10:06Z

trevligt trevligt
tack tack

precis vad jag behöver

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

## #7 — netfeed, 2002-09-01T16:45Z

först en liten fråga: 

vad gör:
\<br style="clear:both"\> ???

sedan:

<http://it.hule.harryda.se/itda00a/vicber/visa/index.php>

titta på den lilla rutan i mitten tillvänster
varför är den så? hur kan jag få den "inskjuten"?

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

## #8 — Matte, 2002-09-01T19:34Z

\<br style="clear:both"\> är samma sak som \<br clear="all"\> om du gör det med html. Clear betyder att gå till slutet på det som är flytande, vänster, höger eller som i det här fallet båda.

Det är svårt att med CSS fixa till något i stil med det du vill ha, kanske får man arbeta lite med \<img\> för att få till linjer rätt. Och kanske också få det att funka i Opera. Här är ett försök: <http://member.webforum.nu/818/netfeedCSS.html> med CSS <http://member.webforum.nu/818/netfeed.css>

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

## #9 — Coper, 2002-09-01T20:50Z

Matte -\> om du skriver mycket mer i mitt delen så  kommer texten utanför linjerna (Under sista stecket) i mozilla. I alla fall när jag testade...

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

## #10 — Matte, 2002-09-01T21:04Z

> **Coper skrev:**
>
> Matte -\> om du skriver mycket mer i mitt delen så  kommer texten utanför linjerna (Under sista stecket) i mozilla. I alla fall när jag testade...

Det händer om du låser höjden med height. Det är därför jag har lagt en smal transparent bild flytande längst till höger. Den håller minihöjden istället.

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

## #11 — Coper, 2002-09-01T22:27Z

ah och då skulle jag inte tagit bort den.... :)

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

## #12 — Matte, 2002-09-02T07:41Z

Netfeed =\>

I [den här tråden](http://www.webforum.nu/showthread.php?s=&threadid=50869) ställde du följande fråga:

> tack för den matte... 
> 
> uhm... kan du hjälpa till med en sak till? 
> rubrikerna... hur skall man få dem att gå enda ut?

 Förmodar att det var den här tråden du tänkt svara i. Svarar därför här.

IE lägger till en liten marginal till en float. Jag vet inte hur man kan få bort den. Ställer man in bredderna så att det funkar i Mozilla kommer mitten-delen inte att få plats i IE och kommer därför att skjutas nedåt. 
Kanske detta går att lösa med ett fulhack. Ska ta en titt ikväll.

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

## #13 — OlleBoop, 2002-09-02T09:09Z

<http://www.tantek.com/CSS/Examples/boxmodelhack.html>
Fast det är kanske det du syftar på?

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

## #14 — Matte, 2002-09-02T17:36Z

Nej OlleBoop, det var inte det jag syftade på. Det är dock en viktig länk, delvis tillämpad i det jag visade, och det är därför man hittar class="inre" i koden.

Netfeed:
Här är "hacket" jag lovade dig. Det finns lite fulkod med, men det var vad jag lyckades åstadkomma nu på en liten stund. Du får bearbeta det vidare själv.
Länk: <http://member.webforum.nu/818/netfeedCSS2.html>

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

## #15 — netfeed, 2002-09-02T17:51Z

snyggt
tack nu är jag glad igen
\*puss\*

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/51828-cssproblem
