Erledigt - CSS Div und untergeordnete div´s

[mystery26284]

Hallo Zusammen.
Ich verzweifel gerade an der Anordnung meiner div Container. Ich Habe bei meinem Body den Header und alles soweit gestalten das es passt.

Meine Vorstellung ist es, das ich einen content wrapper habe, mit einer festen breite der zentral ausgerichtet ist. (Funktioniert)
Darin befindet sich inks der Loginbereich mit einer festen breite (Funktioniert)

Was nicht Funktioniert ist, den main content rechts neben den Loginbereich zu setzen. Dieser wird auch mit float immer drunter gesetzt.

Anbei mein Code im CSS

body {
    font:62,5%/1,8em Helvetica, verdana, arial, sens-serif;
    color:#FFF;
    width:100%;
    background:url(BG_full.jpg) top center no-repeat;
    margin:0 auto;
    }

/*---------------- Header ----------------*/
   
#header {
   
    height:165px;
    background:url(header_repeat.png) repeat-x;
   
}

#header_img {
    height:165px;
    background:url(Header%20Banner_2.png) no-repeat center;
}

#header_center {
    margin:0 auto;
    width:980px;
    height:140px;
}

/*---------------- Content ----------------*/

#wrapper_content {
    width:1200px;
    height:100%;
    margin:0 auto;
    background:rgba(255,255,255,0.5);   
}

#main_content {
    width:1000px;
    height:500px;
    background:#FF0;
    margin:0;

}

/*---------------- Sidebars ----------------*/

#sidbar_left {
    width:160px;
    height:300px;
    padding-left:15px;
    border-bottom-left-radius:80px;
    background:#930;

}

und hier der Code im HTML

<div id="wrapper_content">

    <div id="sidbar_left"><!-- Sidbar -->
   
        <div class="login_font"><!-- login block -->

        </div><!-- login block end -->
   
    </div><!-- Sidbar end -->
    <div id="main_content">
    </div>
</div>

 

[Jormungand]

Huhu,
wenn du deinem main_content ein margin-left:175px gibst (Breite deiner Sidebar plus deren padding) und der Sidebar ein float:left, sollte es gehen.

(Aber nicht vergessen: wer floated muss auch clearen!)

 

[owieortho]

#main_content {
    width:1000px;
    height:500px;
    background:#FF0;
    margin:0;
    margin-left: 175px; /* Achtung, das muss nach dem margin kommen!
}
/*---------------- Sidebars ----------------*/
#sidbar_left {
    width:160px;
    height:300px;
    padding-left:15px;
    border-bottom-left-radius:80px;
    background:#930;
    float: left;

Ups, da war jemand schneller...

 

[mystery26284]

Danke euch beiden für den tip.. Bin echt nicht auf die lösung gekommen..

Das cleanen mach ich mit clear: both;???

Hab mit floaten noch nicht so wirklich gearbeitet :-/

 

[Jormungand]

Je nachdem. Wenn du float:left machst, werden alle folgenden Nachbarelemente rechts davon angeordnet, bis du clear:left machst. Bei float:right werden sie links davon angeordnet. Das ganze wird mit dem entsprechenden clear aufgehoben.

Ein dreispaltiges Layout kannst du z.B. erzeugen, indem du der linken Sidebar float:left gibst, der rechten float:right. Der Content liegt dann dazwischen. Damit sich der folgende footer wieder über die ganze Breite erstreckt, musst du ihm (oder einem Element davor) clear:both geben.

 

[mystery26284]

Ah ok verstanden. Ich danke recht herzlich:

 

[cythux]

Noch ein kleiner Tip für deine #header, #header_img https://developer.mozilla.org/de/docs/Web/CSS/background-image

 

[patrick_l]

Noch ein kleiner Tipp meinerseits. Verpasse der jeweils umschließenden Divsion (siehe Beispiel mit section) eine Klasse mit clear oder clearfix. In CSS vergibst du dort ebenso ein clear:both; . Gerade bei vielem hin und her "gefloate" ganz hilfreich bzw. sorgt dafür das man nicht versehentlich dessen Float-Verhalten vergisst.

<section id="example-one" class="clearfix">
    <!-- example content here! -->
</section>
<section id="example-two" class="clearfix">
    <!-- example content here! -->
</section>

.clearfix {clear:both;}

LG Patrick

 

[mystery26284]

Nochmals Danke für die Hilfreichen Tipps