Anzeige:
Ergebnis 1 bis 3 von 3

Thema: [HTML|CSS] Drei DIVs nebeneinander

  1. #1
    Registrierter Benutzer
    Registriert seit
    24.01.2005
    Beiträge
    23

    [HTML|CSS] Drei DIVs nebeneinander

    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

  2. #2
    Registrierter Benutzer
    Registriert seit
    18.04.2008
    Beiträge
    59
    Zitat Zitat von Keeper Beitrag anzeigen
    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/...te_Positioning

    HTML-Code:
    <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>

  3. #3
    Registrierter Benutzer Avatar von jeebee
    Registriert seit
    01.01.2005
    Ort
    Bern || Zürich
    Beiträge
    540
    Dasselbe funktioniert auch ohne position:absolute mit geschachtelten float-Elementen:
    HTML-Code:
    <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>
    my very own 128 bit integer
    C4 D3 B8 A8 9E A0 C6 EC 7D EC A8 15 28 D1 92 58
    more information

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •