PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [HTML|CSS] Drei DIVs nebeneinander


Keeper
17-01-2011, 11:01
Hallo!

Ich möchte gerne für mein Projekt beliebig viele, aber erstmal konkret drei DIVs nebeneinander platzieren. Die DIVs sollen eine feste breite haben.

Ich habe beim Suchen das hier gefunden:
http://www.glish.com/css/7.asp

Da ist jedoch das mittlere DIV dynamisch breit, wird lediglich durch das Margin begrenzt. Meine Idee wäre es, drei DIVs von fester Breite mit festem Abstand nebeneinander zu haben, am besten linksgebunden. Geht das, und wenn ja, wie?

Viele Grüße
Tim
zenobic
17-01-2011, 16:13
Meine Idee wäre es, drei DIVs von fester Breite mit festem Abstand nebeneinander zu haben, am besten linksgebunden. Geht das, und wenn ja, wie?

Hi,

ja, das geht und sehr einfach mit position:absolute.
Ist praktisch und funktioniert, hat natürlich auch Nachteile, z.B: alles pixelfest ist und somit nicht im "normalen" Documentflow ist.

Hier finden sich weitere Vor- und Nachteile:
http://css-discuss.incutio.com/wiki/Absolute_Layouts#Disadvantages_of_Absolute_Positio ning



<html>
<head>
<style type="text/css">
div#left
{
position:absolute;
left:100px;
width:100px;
top:150px;
background-color:#484;
}
div#middle
{
position:absolute;
left:200px;
top:150px;
width:100px;
background-color:#055;
}
div#right
{
position:absolute;
left:300px;
top:150px;
width:100px;
background-color:#0f5;
}

</style>
</head>

<body>
<div id=left>This is a box with an absolute position</div>
<div id=middle>This is a box with an absolute position</div>
<div id=right>This is a box with an absolute position</div>
<p>With absolute positioning, an element can be placed anywhere on a page.</p>
</body>

</html>
jeebee
17-01-2011, 17:35
Dasselbe funktioniert auch ohne position:absolute mit geschachtelten float-Elementen:

<html><head>
<style type="text/css">
#container{
border:1px solid blue;
padding:0.25em;
height:1.5em;
}
#one{
float:left;
width:200px;
margin-right:15px;
border: 1px solid red;
}
#two{
float:left;
width:250px;
margin-right:15px;
border: 1px solid black;
color:white;
}
#three{
float:left;
width:300px;
border: 1px solid green;
}
#left{
float:left;
width:200px;
height:500px;
border:1px dashed blue;
margin-right:20px;
}
#main{
float:left;
border:1px solid yellow;
height:500px;
}
</style>
</head><body>
<div id="left">
Menu oder so
</div>
<div id="main">
Bla bla bla...
<div id="container">
<div id="one">Box 1</div>
<div id="two">Box 2</div>
<div id="three">Box 3</div>
</div>
<br style="clear:left"/>
bla bla bla zum Zweiten.
</div>
<br style="clear:both"/>
</div>
</body></html>