Felix Riesterer: links-, mittig und rechtsbündig in einer Zeile

Beitrag lesen

Lieber zwerg,

auch Du leidest wohl unter Divitis...

<div id="footer">
<div style="text-align: left; width: 30%; display: inline-block;">Name</div>
<div style="text-align: center; width: 40%; background-color: yellow; display: inline-block;"><a href="#">Impressum</a></div>
<div style="text-align: right; width: 30%; background-color: red; display: inline-block;">Besucherzahl</div>
</div>

  
Besser:  
~~~html
<div id="footer">  
    <span id="webseiten-name">Name</span>  
    <span id="counter">Besucherzahl</span>  
    <span id="impressums-link"><a href="#">Impressum</a></span>  
</div>

Jetzt kann man das gestalten.

#footer {  
    text-align: center;  
}  
  
#footer #webseiten-name {  
    float: left; /* float schaltet automatisch auf display:block! */  
    width: 30%;  
    margin: 0;  
    padding: 0;  
}  
  
#footer #counter {  
    float: right;  
    width: 30%;  
    background-color: red;  
}  
  
#footer #impressums-link {  
    background-color: yellow;  
}  
  
/* Das hier könnte stören... dann einfach ersatzlos streichen! */  
#footer #impressums-link a {  
    display: block;  
    width: 100%;  
}

Ich verwende übrigens etwas sehr ähnliches auf unserer Schulwebsite.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)