Kriege das CSS nicht hin - Floating

hijacker

allo,

ich versuche ein bestehendes Template zu ändern. Dabei geht es um 2 Divs, die nebeneinander sein sollen. Eines davon soll im Quelltext vor dem anderen sein (aus SEO-Gründen). Bisher ist es im Quelltext falsch rum.

Der relevante HTML Quelltext ist dieser hier: (ich möchte, dass im html das sidebar-div erst nach dem main-div kommt - das kann ich natürlich auch auswechseln, nur die passenden css änderungen bekomme ich nicht hin!)

Code

<div id="content-wrap" class="two-col"  >    

    <div id="sidebar">                  
                textextext
        </div>

        <div id="main">
                textextext</div>

Code

css ist dieses hier:
  Code:
 #content-wrap {
    float: left;
    width: 850px;
    margin-left: 30px;
    display: inline;
    padding: 0;     
    border-top: 5px solid #fff;
    background: #fff url(content-wrap.jpg) repeat-x;


.two-col #main {
    margin: 10px 5px 0 200px;
}
#main h1 {
    margin: 10px 10px 0 10px;
    font: normal 1.8em Georgia, "Times New Roman", Times, serif;
    color: #444;
    padding: 15px 0 2px 0px;         
    border-bottom: 1px solid #dadada;
}


#sidebar {
    float: left;
    width: 210px;    
    margin-top: 10px;

Alles anzeigen

kann mir da jmd. helfen? was ich auch mache, ich bekomme den css code nicht so hin, dass es aussieht wie vorher? weiß jmd. den richtigen css code?

yeti66

Code

#main{float:right;}
          #sidebar{float:left;}

..dann ist die Reihenfolge in der Anordnung der Container an und für sich irrelevant.

hijacker

Zitat von yeti66
Code
#main{float:right;}
          #sidebar{float:left;}
..dann ist die Reihenfolge in der Anordnung der Container an und für sich irrelevant.

das habe ich um ehrlich zu sein auch gedacht. leider ist das zeug dann aus irgendeinem grund immer untereinander.

--:)
:)--

ungefähr so wie die 2 smileys angeordnet (-- steht für freien raum)...eins oben rechts, ein unten links. und das verstehe ich nicht und ist auch mein problem bei der sache.

yeti66

Jo, tut es aber. Ein Beispiel:

HTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}
/*reset styles end*/
body{ text-align:center;}
#rahmen { position:relative; width: 400px; height:400px;margin: 0 auto; background-color:#CCC;}
#rechte_Spalte{ float:right; width:200px;height:400px; background-color: #F63;}
#linke_Spalte{ float:left; width:100px;height:400px; background-color: #666;}
-->
</style>
</head>
<body>
<div id="rahmen">
  <div id="rechte_Spalte">rechte Spalte</div>
  <div id="linke_Spalte">linke Spalte</div>
</div>
</body>
</html>

Alles anzeigen

Tags