2 Boxen nebeneinander setzen [HTML; CSS]

float:right; oder float:left;

https://jsfiddle.net/Ltk61az9/

Zitat von Eloquent

Ich hab zwei Fragen, ich möchte das zentrieren, wie funktioniert das? und wofür ist das float da?

https://wiki.selfhtml.org/wiki/CSS/Anwen…alte_zentrieren & http://www.w3schools.com/css/css_float.asp

Mach eine Main Content mit WIDTH 960PX

Dann mach eine Box etwa 420PX Breite und setz da noch float:left rein.

Zitat von Eloquent

Ich hab zwei Fragen, ich möchte das zentrieren, wie funktioniert das? und wofür ist das float da?

https://jsfiddle.net/Ltk61az9/13/

So hab ich es gemacht. Die Boxen setzen sich auch untereinander, sobald das Display zu klein wird

Zitat von PixelDixel

https://jsfiddle.net/Ltk61az9/13/
So hab ich es gemacht. Die Boxen setzen sich auch untereinander, sobald das Display zu klein wird

position: absolute;

(Glaub ich. Bin mir nicht sicher!)

Zitat von Stifili

position: absolute;
(Glaub ich. Bin mir nicht sicher!)

Bei absolute legen sich die zwei Boxen übereinander.
https://jsfiddle.net/Ltk61az9/14/

http://prntscr.com/b6rx6q =>

<div style="
width: 120px;
height:150px;
background:url(http://hubba.cc/hubba-imaging/avatarimage?user=Azir&gesture=srp&action=crr=6) 50% 55% no-repeat rgba(0,0,0,.1);
margin:5px 5px 10px 0;
position:relative;
font-family: arial;
float:left;">
<div style="padding:6px 5px;
width:110px;
position:absolute;
top:0;
background-color: #585757;
line-height:13px;
font-family: arial;
font-color: white;
font-size:13px;">Azir</div>
</div></a>
<div style="
width: 120px;
height:150px;
background:url(http://hubba.cc/hubba-imaging/avatarimage?user=Azir&gesture=srp&action=crr=6) 50% 55% no-repeat rgba(0,0,0,.1);
margin:5px 5px 10px 0;
position:relative;
font-family: arial;
float: left;
margin-left: 25px;">
<div style="padding:6px 5px;
width:110px;
position:absolute;
top:0;
background-color: #585757;
line-height:13px;
font-family: arial;
font-color: white;
font-size:13px;">Azir</div>
</div>

Zitat von Azir

http://prntscr.com/b6rx6q =>

Code

<div style="
width: 120px;
height:150px;
background:url(http://hubba.cc/hubba-imaging/avatarimage?user=Azir&gesture=srp&action=crr=6) 50% 55% no-repeat rgba(0,0,0,.1);
margin:5px 5px 10px 0;
position:relative;
font-family: arial;
float:left;">
<div style="padding:6px 5px;
width:110px;
position:absolute;
top:0;
background-color: #585757;
line-height:13px;
font-family: arial;
font-color: white;
font-size:13px;">Azir</div>
</div></a>
<div style="
width: 120px;
height:150px;
background:url(http://hubba.cc/hubba-imaging/avatarimage?user=Azir&gesture=srp&action=crr=6) 50% 55% no-repeat rgba(0,0,0,.1);
margin:5px 5px 10px 0;
position:relative;
font-family: arial;
float: left;
margin-left: 25px;">
<div style="padding:6px 5px;
width:110px;
position:absolute;
top:0;
background-color: #585757;
line-height:13px;
font-family: arial;
font-color: white;
font-size:13px;">Azir</div>
</div>

Alles anzeigen

und genau so sollte man es nicht machen!

immer schön klassen für Sachen nutzen, die es mehrmals gibt. ID's sollten nur einmal vergeben werden.

ich wollte auch nochmal

http://codepen.io/SunnieX/pen/yOmLEO

wird dir bestimmt keine hilfe sein

Zitat von Poi

ich wollte auch nochmal

http://codepen.io/SunnieX/pen/yOmLEO

wird dir bestimmt keine hilfe sein

n00b