Zwei Probleme mit meiner Box?!

[Steffan2010]

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

[webtaste6659]

Wenn Du den Boxen noch den Wert "float: left;" gibst müssten die nebeneinander sein.

[Steffan2010]

Vielen Dank, für die Antwort. Mein Code sieht mit dem float jetzt so aus:

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

transparent;
float: left;

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;
float: left;
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;
float: left;
margin:0;
width:220px;
}

Das Resultat ist leider die totale Zerstörung:



Was habe ich da falsch gemacht?

[wahsaga]

Was habe ich da falsch gemacht?

Du hast einfach auf ein Stichwort hin irgendwas in deinen Code reingeklatscht, offenbar ohne dich zu informieren ...


Für den Einstieg würde ich erst mal folgenden Artikel vorschlagen, der erklärt einiges von den Basics, die dir zu fehlen scheinen:
Grundlagen für Spaltenlayout mit CSS - SELFHTML aktuell Weblog

[Steffan2010]

Das ist mir einfach als logisch erschienen. Will mir jemand vielleicht einen kleinen Tipp geben? Das würde mich auf die richtige Spur bringen.

Herzlichen Dank!

[Steffan2010]

Hat sich erledigt, trotzdem Danke an alle!

[TobiaZ]

Lösung bitte posten, dann haben alles was davon. Danke!

[Wyveres]

<style>
div
{
	margin:0px;
	padding:0px;
}
div.box
{
	border:1px solid black;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	background:#fff;
}
div.box h2.box-headline
{
	height:20px;
	margin:0px;
	padding:5px;
	background-color: #3A9BD6;
	border-bottom: 1px solid black;
	border-top-left-radius:10px;   
	border-top-right-radius:10px; 
	-moz-border-radius-topleft:10px;
	-moz-border-radius-topright:10px;
	-webkit-border-top-left-radius:10px;  
	-webkit-border-top-right-radius:10px;  
	box-shadow:inset 0px 10px 10px rgba(255,255,255,0.5);
}

</style>

<div class="box">
	<h2 class="box-headline">Box headline</h2>
	<div class="box-content">
  		<p>dies ist content</p>
  		<p>dies ist content</p>
  		<p>dies ist content und ein bisschen mehr content 
dies ist content und ein bisschen mehr 
content dies ist content und ein bisschen 
mehr content </p>
	</div>
</div>

Einfache Lösung ... ohne Bilder und so
und wenn man will kann man die Container Box "div.box" floaten fertig.