div horizontal mit img positionieren

[CarstenH]

tag,
hat jemand eine idee wie man drei container (div) nebeneinander positioniert?
jedes div soll ein hintergrundbild enthalten.
es sollte sich in der y-achse wiederholen.

<table border=1 width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td><div id="shad_left"></div></td>
    <td id="main_cont"><p><p><p><p><p><p><p><p><p></p></p></p></p></p></p></p></p></p>2</td>
    <td><div id="shad_right"></div></td>
  </tr>
</table>

#shad_left{
    width:31px;
    background-image: url(images/shadow_left.png);
    background-repeat: repeat-y;
    vertical-align:bottom;
    
}

#shad_right{
    width:31px;
    background-image: url(images/shadow_right.png);
    background-repeat: repeat-y;
    vertical-align:bottom;
    
    
}

#main_cont{
    width:100%;
    margin-top:0;
    margin-bottom:0;
    background-color:#035f86;
     
}

anbei hier der screenshot:

 

[MyBad]

AW: div horizontal mit img positionieren

Ja:

HTML

<div id="links">Linkes DIV</div>
<div id="mitte">Mittleres DIV</div>
<div id="rechts">Rechtes DIV</div>

CSS

#links, #mitte, #rechts{ float: left; }
#links{ background: url(dein_bild1.gif) repeat-y; width: 100px; }
#mitte{ background: url(dein_bild2.gif) repeat-y; width: 300px;  }
#rechts{ background: url(dein_bild2.gif) repeat-y; width: 100px;  }

Das wichtige ist hierbei "float:left;" damit werden die DIVs nebeneinander ausgerichtet.

Ich hoffe das meintest du.

 

[CarstenH]

AW: div horizontal mit img positionieren

vielen dank erstmal.
die anordnung nebeneinander funktioniert.
aber: die seitlichen containter links und rechts bekommen keinen inhalt, nur das hintergrundbild via css.
sie sollten sich wiederholen - das funktioniert nicht



falls das browserfenster kleiner wird, verschieben sich die divs nach unten:

 

[Mysth]

AW: div horizontal mit img positionieren

Hast du den divs eine Höhe gegeben?
Wenn sie keine fixe oder mindest Höhe haben dann wird sich auch nichts wiederholen weil nicht notwendig.
Du solltest die drei divs noch in ein übergeordnetes div integrieren.
Versuchs mal so:

<div id="container">
<div id="links">Linkes DIV</div>
<div id="mitte">Mittleres DIV</div>
<div id="rechts">Rechtes DIV</div>
</div>

Den "container" gibst du eine Breite von z.B.: 950px

 

[cebito]

AW: div horizontal mit img positionieren

Wozu 3 Divs? Ist ja wieder mal auch nicht viel besser als Tabellendesign. Mach dein Hintergrundbild über die komplette Breite in einen Div und gib diesem rechts und links padding...

#content{
background:url(deinHintergrundbild.jpg) top center repeat-y;
margin:0 auto;
padding:10px 40px;
width:1187px;
}

Edit: Ach ja, wenn sich das ganze anpassen soll, auch kein Problem:

#contentbg{
background:#035F86 url(links.jpg) top left repeat-y;
margin:0;
}
#content{
background:url(rechts.jpg) top right repeat-y;
margin:0;
padding:10px 40px;
}

<div id="contentbg"><div id="content">
Ein bisschen Inhalt...
</div></div>

 

[CarstenH]

AW: div horizontal mit img positionieren

vielen dank.
klappt super !!