✔ DIVs nebeneinander stellen

H

hoctar

Erfahrenes Mitglied
Hallo :)
ich bekomme es einfach nicht hin die divs nebeneinander zu stellen.
Also Name, Bild, und Text sollen ein Block sein und diese sollen dann nebeneinander gestellt werden.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>position</title>
<style type="text/css">
body { margin:0; padding:0; height:1500px; }
div { border:1px solid #888; }

#s1 { width:150px; height:20px; }
#s2 { width:150px; height:70px; }
#r6 { width:150px; height:35px; position:relative; top:20px; left:20px; background-color:#fdd; }

#wrapperBox {
width:200px;
margin:0 auto;
}
</style>
</head><body>
<div id="wrapperBox">

 <div id="s1">Name</div>
 <div id="s2">Bild
  <div id="r6">Text</div>
 </div>
 
</div>

<br style="clear: both;" />

<div id="wrapperBox">

  <div id="s1">Name</div>
  <div id="s2">Bild
   <div id="r6">Text</div>
  </div>

</div>

</body></html>
 
Zuletzt bearbeitet:
#wrapperBox {
float: left;
width:200px;
margin:0 auto;
}


<br style="clear: both;" /> ? wofür soll das sein?

mit clear wird das floaten aufgehoben (also die Zeile mal streichen)
 
Hi,

so sieht mein Vorschlag aus:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>position</title>
<style type="text/css">
body { margin:0; padding:0; height:1500px; }
div { border:1px solid #888; }

.s1 { width:150px; height:20px; float:left; }
.s2 { width:150px; height:70px; float:left; }
.r6 { width:150px; height:35px; float:left; background-color:#fdd; }

.wrapperBox {
width:456px;
margin:0 auto;
}
</style>
</head><body>
<div class="wrapperBox">
 <div class="s1">Name</div>
 <div class="s2">Bild</div>
 <div class="r6">Text</div>
 <br style="clear: both;" />
</div>


<div class="wrapperBox">
  <div class="s1">Name</div>
  <div class="s2">Bild</div>
  <div class="r6">Text</div>
  <br style="clear: both;" />
</div>

</body></html>


Oder stellst du dir das so vor?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>position</title>
<style type="text/css">
body { margin:0; padding:0; height:1500px; }
div { border:1px solid #888; }

.s1 { width:150px; height:20px;  }
.s2 { width:150px; height:70px;  }
.r6 { width:150px; height:35px; background-color:#fdd; }

.wrapperBox {
float:left;
width:200px;
margin:0 auto;
}
</style>
</head><body>
<div class="wrapperBox">
 <div class="s1">Name</div>
 <div class="s2">Bild</div>
 <div class="r6">Text</div>
</div>


<div class="wrapperBox">
  <div class="s1">Name</div>
  <div class="s2">Bild</div>
  <div class="r6">Text</div>
</div>

</body></html>


mfg Maik
 
CSS-Erweiterung für meine zweite Vorlage:

Code: 
.r6 { width:150px; height:35px; background-color:#fdd; position:absolute; bottom:-10px; left:20px;}

.wrapperBox {
float:left;
position:relative;
width:200px;
margin:0 auto;
}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück