Css: 2 Divs nebeneinander.

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

15:28, 9.5.2010

Hallo LC,
Ich habe ein kleines Problem. Ich habe eine Große div. In dieser div sollen 2 divs neben einander sein. Das bekomme ich aber irgendwie nicht hin kann mir wer helfen?
hier mein Code:

<style type="text/css">
.box { width: 630; background: #eff0f1;}
.box h1, .box p {margin: 0 10px;}
.box h1 {font-size:150%; color:#ffffff; }
.box .top, .box .bottom{display:block;background: #e2eaf8;}
.box .top b, .box .bottom b
{
  display:block;height: 1px; overflow: hidden; background: #eff0f1;
}
.box .r1{margin: 0 5px;}
.box .r2{margin: 0 3px;}
.box .r3{margin: 0 2px;}
.box .top .r4, .box .bottom .r4{margin: 0 1px;height: 2px;}


 </style> 
  <div class='box'>
  <b class='top'>
    <b class='r1'></b><b class='r2'></b>
    <b class='r3'></b><b class='r4'></b>
  </b>
 
<p align="left"><big><b>Chat:</b></big>  | <?php echo date("d.m.Y") ?>      <a href="#" onclick="self.close();"  align="right">schließen</a>  </p>
<HR WIDTH='400' style='background:#e2eaf8;' align="left">

Hier sollen 2 Divs neben einander die eine soll ca.   400 px breit sein und die andere 200.



 
 </div>

Kann mit wer Helfen?
LG
Chrissi

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
qap2

qap2 hat kostenlosen Webspace.

15:53, 9.5.2010
Das Stichwort dazu ist "float".
krisi12345

krisi12345 hat kostenlosen Webspace.

15:54, 9.5.2010
Entweder mit block: underline; oder mit float: left bzw. float: right;

edit: da war ich wohl jemand schneller (-;

Beitrag zuletzt geändert: 9.5.2010 15:54:57 von krisi12345

Autor dieses Themas

christian1603

christian1603 hat kostenlosen Webspace.

16:09, 9.5.2010

Danke das geht auch soweit:

<style type="text/css">
.box { width: 630; background: #eff0f1;}
.box h1, .box p {margin: 0 10px;}
.box h1 {font-size:150%; color:#ffffff; }
.box .top, .box .bottom{display:block;background: #e2eaf8;}
.box .top b, .box .bottom b
{
  display:block;height: 1px; overflow: hidden; background: #eff0f1;
}
.box .r1{margin: 0 5px;}
.box .r2{margin: 0 3px;}
.box .r3{margin: 0 2px;}
.box .top .r4, .box .bottom .r4{margin: 0 1px;height: 2px;}

 </style> 
  <body bgcolor="#e2eaf8">   
  <div class='box'>
  <b class='top'>
    <b class='r1'></b><b class='r2'></b>
    <b class='r3'></b><b class='r4'></b>
  </b>
 
<p align="left"><big><b>Chat:</b></big>  | <?php echo date("d.m.Y") ?>      <a href="#" onclick="self.close();"  align="right">schließen</a>  </p>
<HR WIDTH='400' style='background:#e2eaf8;' align="left">

<div style="float:left; width:410;"><p>links</p></div>
<div style="float:right;"><p> rechts</p></div>


 
 </div>

Jetzt habe ich ein Neues Problem.
Im IE wird alles richtig dargestellt Im FF aber nicht. Die div <div class='box'> hat einen Hintergrund. Der soll auch hinter den 2 Neuen divs weitergeführt werden. Das wird er aber nur im IE. wo kann der Fehler sein?

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city