[Løst] Flere block elementer ved siden av hverandre?

[MarKra]

Jeg støtte på et aldri så lite problem da jeg skulle lage en boks for knapper til facebook, twitter og RSS på siden min. Boksen ser slik ut:

 

 

Problemet her er at alle knappene kommer under hverandre fordi de er block elementer. Knappene er CSS sprite knapper, og jeg brukte denne tutorialen da jeg lagde dem.

 

HTML-koden:

<div id="connect" class="sidebar-box boxshadow">
<h1>Stay Connected!</h1>
<a class="facebook" href="http://www.facebook.com/" title="Become a fan on Facebook!"></a>
<a class="twitter" href="http://www.twitter.com/" title="Become a follower on Twitter!"></a>
<a class="rss" href="http://www.warcraft-universe.com/?feed=rss2" title="RSS-feed for News Entries!"></a>
<a class="rss" href="http://www.warcraft-universe.com/?feed=comments-rss2" title="RSS-feed for Comments!"></a>
</div>

 

CSS-koden:

a.facebook { background: url(http://www.warcraft-universe.com/wp-content/themes/azuredream/images/buttons/facebook.png) no-repeat 0 0; width: 44px; height: 44px; display: block; text-indent: -9999px; }
a.facebook:hover { background-position: 0 -44px; }

a.twitter { background: url(http://www.warcraft-universe.com/wp-content/themes/azuredream/images/buttons/twitter.png) no-repeat 0 0; width: 44px; height: 44px; display: block; text-indent: -9999px; }
a.twitter:hover { background-position: 0 -44px; }

a.rss { background: url(http://www.warcraft-universe.com/wp-content/themes/azuredream/images/buttons/rss.png) no-repeat 0 0; width: 44px; height: 44px; display: block; text-indent: -9999px; }
a.rss:hover { background-position: 0 -44px; }

 

Så er det noen som vet om et triks for å få disse knappene på plass ved siden av hverandre?

Endret 24. mars 2010 av Scorix

[masb]

stikkord: float: left;

[MarKra]

Jeg tenkte på det selv også, og har prøved det, men da blir det jo et nytt problem med at de ikke lenger ligger inni boksen som skal være rundt. Her kan du se hvordan det ser ut når jeg legger til float:

 

HTML-koden

<div id="connect" class="sidebar-box boxshadow">
<h1>Stay Connected!</h1>
<div class="alignleft"><a class="facebook" href="http://www.facebook.com/" title="Become a fan on Facebook!"></a></div>
<div class="alignleft"><a class="twitter" href="http://www.twitter.com/" title="Become a follower on Twitter!"></a></div>
<div class="alignleft"><a class="rss" href="http://www.warcraft-universe.com/?feed=rss2" title="RSS-feed for News Entries!"></a></div>
<div class="alignleft"><a class="rss" href="http://www.warcraft-universe.com/?feed=comments-rss2" title="RSS-feed for Comments!"></a></div>
</div>

 

CSS-koden

.alignleft {
float: left;
}

 

Resultatet av disse endringene blir dette:

 

 

Så hvordan løser jeg isåfall dette?

[MarKra]

Fant en løsning på det gitt. La inn en clear: both; etter knappene, så var den tilbake i boksen sin, så var det bare å legge på litt margin rundt knappene for å få dem midstilt igjen. Sånn ser det ut nå:

 

[masb]

mm, må legge inn en clearfix. goodie!