Div container neben- und untereinander anordnen

Status
Nicht offen für weitere Antworten.
B

bomberman

Grünschnabel
Hab ein kleines CSS Problem. Und zwar möchte ich mehrere kleine Boxen innerhalb eines DIVs nebeneinander und untereinander anordnen.

Bei einigen Lösungsansätzen überschreiten die Container das DIV-Elternelement, bei den anderen werden sie nicht nebeneinander angeordnet.
Code: 
#cont_0{
margin:15px;
z-index:1;
position:relative;
width:250px;
left:20px;
border:1px solid #374752;
padding:0 10px 10px 10px;
}
#cont_1{
margin:15px;
position:relative;
width:250px;
left:280px;
border:1px solid #374752;
padding:0 10px 10px 10px;
}

Ziel soll eine Ansicht wie z.B. bei http://www.netvibes.com/ sein.

Hat jemand Ideen oder Vorschläge?
 
Hi,

mit Hilfe der float-Eigenschaft lassen sich die Spalten einrichten, und darin dann die Boxen untereinander anordnen.

Code: 
#wrapper {
width: 610px;
margin: 0 auto;
}

#leftCol {
float: left;
width: 200px;
}

#centerCol {
margin: 0 205px;
}

#rightCol {
float: right;
width: 200px;
}

.box {
border: 1px solid #000;
margin-bottom: 5px;
text-align: center;
}
Code: 
<div id="wrapper">
     <div id="leftCol">
          <div class="box">box 1</div>
          <div class="box">box 2</div>
          <div class="box">box 3</div>
          <div class="box">box 4</div>
     </div>
     <div id="rightCol">
          <div class="box">box 9</div>
          <div class="box">box 10</div>
          <div class="box">box 11</div>
          <div class="box">box 12</div>
     </div>
     <div id="centerCol">
          <div class="box">box 5</div>
          <div class="box">box 6</div>
          <div class="box">box 7</div>
          <div class="box">box 8</div>
     </div>
</div>
 
moin ;)

und wie würd ich das machen, wenn ich 2 div Boxen nebeneinander anordnen würde, das hab ich geschafft ...wie setz ich dann eine weitere box darunter ..also 2 kleine und darunter eine große box, die die größe der beiden kleinen von oben hat ;)

wenn ich eine weitere box erstelle, dann verzerrt mein ganzes design ...
 
Hi,

das ist ganz einfach ;)

Code: 
#wrapper {
width: 600px;
margin: 0 auto;
}

#leftCol {
float: left;
width: 300px;
background: red;
}

#rightCol {
float: right;
width: 300px;
background: yellow;
}

#centerCol {
clear: both;
background: green;
}
Code: 
<div id="wrapper">
     <div id="leftCol">leftCol</div>
     <div id="rightCol">rightCol</div>
     <div id="centerCol">centerCol</div>
</div>
 
auf dich hab ich seit heute morgen gewartet ;)

nunja, ich habe es mit position absolute hinbekommen ...vielleicht komm ich nochmal auf deine alternative zurück ..

nur mal zur verständnis. ich habe links das menü und rechts ein menü ..

in der mitte soll halt die content box aufgeteilt sein wie oben beschrieben :)

das mit dem float wird demnach nicht so einfach funktionieren oder?
weil ich ganz rechts schon ein menü gefloatet habe und links ebenso ;)
 
Sorry, ich kann dir jetzt nicht ganz folgen ...

Jeweils links und rechts eine Menüspalte und dazwischen der Inhalt? Und von welcher Aufteilung sprichst du jetzt? Hast du vielleicht eine Skizze zur Hand?

Und bitte halte dich an die Groß- und Kleinschreibung - siehe Netiquette Nr.15. Vielen Dank!
 
Ups ..wusst ich nicht ;)

------ div header------
div menü links------ div content1------ div content2------ div menü rechts
------ div content3 ------
------ div footer------

Ist es so verständlicher? Generell hattest das richtig verstanden.
Habe es aber jetzt hinbekommen ;)
 
Und welche Bedingungen sollen nun für welche der drei Content-DIVs gelten?

Zeig doch einfach mal deinen bisherigen Quellcode.
 
Ich habe es doch hinbekommen ...ist also erledigt ;)
Quellcode habe ich nicht hier auf dem mac, der liegt auf dem laptop ;)
Danke und schönen Feierabend!
 
D-LuX hat gesagt.:
das mit dem float wird demnach nicht so einfach funktionieren oder?
weil ich ganz rechts schon ein menü gefloatet habe und links ebenso ;)
Zum Vergrößern anklicken....
Dann schau dir mal dieses Modell an ;)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title></title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
}

#wrapper {
width: 800px;
margin: 0 auto;
}

#header, #footer {
background: #000;
color: #fff;
}

#menue_left, #content_1, #content_2 {
float: left;
width: 200px;
}

#menue_left {
background: #aaa;
}

#content_1 {
background: #bbb;
}

#content_2 {
background: #ccc;
}

#menue_right {
float: right;
width: 200px;
background: #ddd;
}

#content_3 {
clear: both;
background: #eee;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="header">header</div>
     <div id="menue_left">menue_left</div>
     <div id="content_1">content_1</div>
     <div id="content_2">content_2</div>
     <div id="menue_right">menue_right</div>
     <div id="content_3">content_3</div>
     <div id="footer">footer</div>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück