Jag har en DIV-tagg som innehåller tre DIV-taggar. Den första har float left den andra float right och den tredje ska ligga i mitten. Jag vill alltså ha tre kolumner. (mittenkolumnen ska ha en rörlig bredd medan de andra två ska ha en fast bredd. Vet att min-width och max-width inte fungerar i IE) Firefox följer den uppsatta standarden, vilket inte IE gör. Jag hade missat att lägga med en DTD. När jag gjorde det blir det inte bra i IE heller. Försökte igen och nu fungerar det bättre. Varför har du <b>display: inline;</b> ? Pröva att ta bort det från både #left, #right och #content.Problem med DIV-taggar och CSS i firefox
HTML-filen
<code>
<div class="container">
<div class="left">vänster</div>
<div class="right">höger</div>
<div class="content">mitten<br>mitten<br>mitten<br>mitten</div>
</div>
</code>
CSS filen ser ut så här:
<code>
.container {
max-width: 1000px;
min-width: 330px;
background-color: Fuchsia;
}
.content {
position: relative;
text-align: left;
background-color: green;
display: inline;
width: 100%;
}
.left {
position: relative;
float: left;
background-color: red;
width: 15em;
display: inline;
}
.right {
position: relative;
float: right;
background-color: blue;
width: 15em;
display: inline;
}
</code>
Problemet är att detta ser väldigt olika ut i IE och firefox. Om jag skriver mer text i mittenkolumnen än i den vänstra samt i den högra så fortsätter texten under dessa i Firefox medan det i IE blir tre raka kolumner.
Om jag ändrar i HTML filen till att div-taggarna för höger och väster kolumn ligger i div-taggen för mittenkolumnen så renderas mer lika i firefox och IE. (texten i mittenkolumnen fortsätter då under de andra kolumnerna.) I Firefox blir det dock ingen skillnad.
<code>
<div class="container">
<div class="content">
<div class="left">vänster</div>
<div class="right">höger</div>
mitten<br>mitten<br>mitten<br>mitten
</div>
</div>
</code>
Hur kommer det sig att firefox inte verkar göra skillnad på ordningen av div-taggarna? Har jag tänkt fel? Tycker IE sätt att visa sidan verkar mer logisk.
I Firefox anpassas inte heller höjden på den omslutande div-taggen när någon av div-taggarna som finns inuti den blir högre. Viket det gör i IE.Sv: Problem med DIV-taggar och CSS i firefox
Lägg till vänster- och högermarginaler på content så skall du se att texten inte flödar in under left och right (förstår för övrigt inte varför du använder class för att namnge elementen när det vore naturligare med id).
För att anpassa höjden på det omslutande div-elementet, lägg till en <div style="clear: both"></div> sist i det omslutande elementet.Sv:Problem med DIV-taggar och CSS i firefox
Jag la till vänster- och högermarginaler på content men det verkar bara påverka den första raden, raderna efter den får ingen marginal samt att de flödar in under left.
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#container {
max-width: 1000px;
min-width: 330px;
width: expression(document.body.clientWidth > 1000? "1000px": "auto" );
background-color: Fuchsia;
}
#content {
position: relative;
background-color: green;
width: auto;
margin-left: 2em;
margin-right: 2em;
display: inline;
}
#left {
position: relative;
float: left;
background-color: red;
width: 15em;
display: inline;
}
#right {
position: relative;
float: right;
background-color: blue;
width: 15em;
display: inline;
}
</style>
</head>
<body>
<div id="container">
<div id="left">vänster</div>
<div id="right">höger</div>
<div id="content">mitten<br>mitten</div>
<div style="clear: both"></div>
</div>
</body>
</html>
</code>
I ett annat forum fick jag en länk till http://bluerobot.com/web/layouts/layout3.htmlsom som har en 3-kolumns layout. Där har dom absolute position på den vänstra och högra diven. Den högra diven är positionerad 20 pixlar från webbläsarens högerkant. Om man har en hög upplösning på skärmen tycker jag sidan blir svårläst i och med att raderna i DIV.content blir väldigt långa.
Min tanke var att jag skulle ha en 3-kolumns layout men att denna skulle begränsas i storlek genom att den ligger i en annan div med en maxbredd. Mittenkolumnen ska kunna variera i storlek medan den högra och vänstra ska ha en fast bred. Det kanske inte går att göra så? Eller kan man ändra så att div-taggarna med absolut position får dessa utifrån sin förälder i dokument hierarkin?Sv: Problem med DIV-taggar och CSS i firefox
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#container {
max-width: 1200px;
min-width: 320px;
width: expression(document.body.clientWidth > 1200? "1200px": "auto" );
background-color: Fuchsia;
}
#content {
position: relative;
background-color: green;
margin-left: 15em;
margin-right: 15em;
width: auto;
}
#left {
position: relative;
float: left;
background-color: red;
width: 14em;
display: inline;
}
#right {
position: relative;
float: right;
background-color: blue;
width: 14em;
display: inline;
}
</style>
</head>
<body>
<div id="container">
<div id="left">vänster</div>
<div id="right">höger</div>
<div id="content">mitten<br>mitten</div>
<div style="clear: both"></div>
</div>
</body>
</html>
</code>
Blir dock inte helt bra när man gör fönstret mindre. När fönstret blir mindre så divarna inte får plats att ligga <code>| left |content| right |</code>
så lägger dom sig på rad
<code>
| left |
| right |
|content|
</code>
istället
Nu med marginalerna så blir inte content synlig. (antar att det beror på det i alla fall)
Vad göra?Sv:Problem med DIV-taggar och CSS i firefox