nicht angemeldet
Hallo!
Ich versuche nun seit ein paar Tagen in folgendes Layout eine[b] 3. Kolumne [/b]reinzubekommen. Aber ich kapiere die Sache mit Befehlen wie "float" etc einfach nicht. Ich sehe die Logik dahinter noch nicht und dabei möchte ich nur aus einem [b]2 Kolumnenlayout ein 3 Kolumnenlayout machen.[/b]
Also bisher ists so:
[b]Content | Sidebar[/b]
Jetzt möchte ich aber
[b][u]rightsidebar[/u] |content |sidebar [/b]
Was muss man beim CSS verändern/einfügen und wo muss ich den HTML Code korrekt eingeben?
Es spielt keine Rolle wie breit die neue Kolumne ist (welche aber ganz rechts sein Muss von den drei Kolumnen), das kann ich dann selbst anpassen.. mich interessiert vorerst einfach nur wie ich die dritte Kolumne hineinbekomme. Gegebenenfalls kann man die Gesamtbreite vergrössern auf 800 Pixel.
Ich danke für die Hilfe im voraus bestens!!
Hier das CSS:(Ohne die einzelnen Fontstyles etc)
/* -- layout -- */
#content {width: 700px; margin: 0 auto; text-align: left; background: #fff url(http://www.blogblog.com/snapshot_sable/bg-body.gif) 0 0 repeat-y;}
#header {background: #D8DADC url(http://www.blogblog.com/snapshot_sable/bg-headerdiv.gif) 0 0 repeat-y;}
#header div {background: transparent url(http://www.blogblog.com/snapshot/header-01.gif) bottom left no-repeat;}
#main {
line-height: 1.4;
float: left;
padding: 10px 12px;
border-top: solid 1px #fff;
width: 428px;
/* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: ""}"";
voice-family: inherit;
width: 404px;
}
/* IE5 hack */
#main {}
#sidebar {margin-left: 428px; border-top: solid 1px #fff; padding: 4px 0 0 7px; background: #fff url(http://www.blogblog.com/snapshot_sable/bg-sidebar3.gif) 1px 0 no-repeat;}
#footer {clear: both; background: #E9EAEB url(http://www.blogblog.com/snapshot_sable/bg-footer.gif) bottom left no-repeat; border-top: solid 1px #fff;}
Hier HTML:
<!-- Begin #content - Centers all content and provides edges for floated columns -->
<div id="content">
<div id="header"><div>
</div></div>
<!-- Begin #main - Contains main-column blog content -->
<div id="main">
</div>
<!-- End #main -->
<!-- Begin #sidebar -->
<div id="sidebar">
</div>
<!-- End #sidebar -->
<!-- Begin #footer -->
<div id="footer"><hr />
</div>
<!-- End #footer -->
</div>
<!-- End #content -->
Danke nochmals!
Liebe Grüsse!