Boxen nebeneinander?

[lala0808]

Hallo,

ich arbeite gerade an zwei Boxen für meine Website und habe zwei Probleme, bei denen ich mir selber nicht helfen kann.

Hier mal der Code von der .CSS Datei:

.column_headline {
background:url("http://www.abload.de/img/column_heading_bluevrxi.png") no-repeat scroll 0 0 

transparent;
height:28px;
margin:0;
padding:0 5px 0 0;
width:215px;
}



.column_top {
background:url("http://www.abload.de/img/column_top_bgco9p.png") no-repeat scroll 0 0 

transparent;
margin:0;
min-height:135px;
padding:12px 5px 0 0;
width:215px;
}



.column_bottom {
background:url("http://www.abload.de/img/column_bottom_bgeqb6.png") no-repeat scroll 0 0 

transparent;
height:28px;
margin:0;
width:220px;
}

Hier der Code wo ich das Ausgebe auf der Website:

<div class="column_headline"></div>
<div class="column_top">

Link 1
Link 2

</div>
<div class="column_bottom"></div>



<div class="column_headline"></div>
<div class="column_top">

Link 1
Link 2

</div>
<div class="column_bottom"></div>

Auf meiner Website sieht das ganze dann so aus:

Die folgenden zwei Dinge hätte ich gerne geändert:

Wie ihr seht sind die beiden Boxen untereinander. Ich will aber, dass sie mit einem kleinen Abstand nebeneinander sind. Es sollen also immer zwei Boxen nebeneinander sein und drunter wieder zwei nebeneinander und so weiter ;- )

Zudem verstehe ich nicht, warum meine Box unten unterbrochen ist? Müsste eigentlich durchgehend sein?

Ich würde mich sehr freuen, wenn mir jemand in den zwei Punkten helfen könnte.

Beste Grüße,
Steffan

 

[Sapoot]

AW: Boxen nebeneinander?

Packe die Boxen ein einen Div und floate diese.

Wie hoch ist die Grafik column_top_bgco9p.png ?

 

[lala0808]

AW: Boxen nebeneinander?

Herzlichen Dank, für die Antwort. Die Maße sind:

215px × 123px

Könntest du bitte zeigen, was du genau meinst? Verstehe ich nicht ganz!

 

[Sapoot]

AW: Boxen nebeneinander?

<div class="box">
<div class="column_headline"></div>
<div class="column_top">

Link 1
Link 2

</div>
<div class="column_bottom"></div>
</div>

.box{
float=left;
}

Das Bild 123px hoch und du machst den Div 135px.

 

[lala0808]

AW: Boxen nebeneinander?

<div class="box">
<div class="column_headline"></div>
<div class="column_top">

Link 1
Link 2

</div>
<div class="column_bottom"></div>
</div>

.box{
float=left;
}

Das Bild 123px hoch und du machst den Div 135px.

Vielen Dank

Ich habe nun die beiden Sachen eingebunden. Jetzt stehe ich vor einem ähnlichen Problem wie bei meinen Versuchen:

 

[Sapoot]

AW: Boxen nebeneinander?

.box{
      float: right;
}

.box1{
      float: left;
}

.column_headline {
background:url("http://www.abload.de/img/column_heading_bluevrxi.png") no-repeat scroll 0 0 

transparent;
height:28px;
margin:0;
padding:0 5px 0 0;
width:215px;
}

.column_top {
background:url("http://www.abload.de/img/column_top_bgco9p.png") no-repeat scroll 0 0 

transparent;
margin:0;
min-height:123px;
padding:12px 5px 0 0;
width:215px;
}



.column_bottom {
background:url("http://www.abload.de/img/column_bottom_bgeqb6.png") no-repeat scroll 0 0 

transparent;
height:28px;
margin:0;
width:220px;
}

<div class="box">
     <div class="column_headline"></div>
     <div class="column_top">

     Link 1
     Link 2

     </div>
     <div class="column_bottom"></div>
</div>
<div class="box1">
     <div class="column_headline"></div>
     <div class="column_top">

     Link 1
     Link 2

     </div>
     <div class="column_bottom"></div>
</div>

Sieht das jetzt so bei dir aus?

 

[lala0808]

AW: Boxen nebeneinander?

Tausend Dank, jetzt bin ich glücklich

Eine frage noch... Kann mir jemand sagen, wo die komische Unterbrechung in den Boxen herkommt? Das wollte ich nie...

 

[Sapoot]

AW: Boxen nebeneinander?

meist liegt es an den Margin's und Padding's oftmals vergisst man diese einzurechnen oder diese zu Nullen ( Images ).
Setze meist am Anfang alles auf null.

 

[lala0808]

AW: Boxen nebeneinander?

Danke, dass werde ich mal abchecken ;- )

Schöner Abend noch

 

[behemoth65]

AW: Boxen nebeneinander?

oder du bastelst einen Div-container um die beiden Boxen und floatest jeweils 1 links und 1 rechts. Um böse Überraschungen zu vermeiden solltest Du allerdings fixe Werte verwenden