webForumDet fria alternativet

Centrera div exklusive höger div?

HTML & CSS

4 svar · 522 visningar · startad av UrMe

Medlem sedan apr. 2001762 inlägg
Frågan#1

Jag har fått en skiss som jag ska sätta ihop och den är uppbyggd ungefär så här:

<div id="div1">innehåll</div>
<div id="div2">asd</div>

Div1 är ungefär 900px bred och div2 är ungefär 180px bred.

Problemet är att div1 ska vara centrerad på sidan och div2 ska ligga till höger om div1.

Hur ska jag lyckas centrera div1 och lägga div2 till höger?

Kan slänga ihop en fulskiss i photoshop om min förklaring är jäkligt luddig :)

Medlem sedan nov. 20014 054 inlägg
#2

Du lägger en wrapper runt om divarna som är = div1 + div2

<div id="wrapper">
<div id="div1">innehåll</div> 
<div id="div2">asd</div> 
</div>

Sen sätter du float: left på div1 och div2, samt margin-left: auto och margin-right: auto på wrapper för att centrera.

Medlem sedan apr. 2001762 inlägg
#3

Men centreras inte båda divarna då?

Har bifogat en bild på hur det ska funka, det svarta strecket är center.

Att lägga en tom div till vänster är ju en fullösning, men om de då sitter på en liten upplösning får de inte hela sidan vänsterjusterad.

layout2.gif
Medlem sedan mars 2001895 inlägg
#4

En idé kunde kanske vara att placera div2 absolut?

#div1 {
    width: 900px;
    margin: 0 auto;
    background: #999;
}
#div2 {
    top: 0;
    left: 50%;
    width: 180px;
    position: absolute;
    margin: 0 0 0 450px;
    background: #000;
    z-index: 1;
}
Medlem sedan apr. 2001762 inlägg
#5

Ah att jag inte tänkte på det :r

Det funkar kanon!

252 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
127 ms — deklarationer (db)
0 ms — hämta statistik (cache)
121 ms — hämta tråd, inlägg och bilagor (db)
128 ms — ändringar (db)