Wolfgang Roth Wolfgang Roth - 5 months ago 12
CSS Question

floating divisions of equal size are different size when aligned on top of each other

i am trying to make two divisions in html equal in width. they should remain the same width, when they fit into one row, but also when they are aligned below each other.

The example is here: sample

When the two boxes fit into one row, it looks good:

a busy cat

but if they float, it seems like my second div is smaller than the first

two muppets

this is the complete code of the page:



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>

.container {margin:auto;}
.container-inner {position:relative;left:-50%;float:right}
.container-inner ul {position:relative;left:50%}
.container-inner li {display:inline;line-height:normal; }
.container-inner li div {display: table-row;}
.container-inner a,.container-inner a:visited {color:#525252;text-decoration:none}
.container-inner a:hover {text-decoration:underline}
.container-inner li:last-child {border-right:none}
.FarbeNT {background: rgba(255,128,0,0.5)}
.FarbeAT {background: rgba(0,255,0,0.5)}
</style>
</head>
<body>
<div class="container">
<div class="container-inner">
<ul>
<li>
<div class="FarbeAT">
<div style="background-color: rgba(0,0,0, 0.15);">
<a href="http://0_AudioBibel_NT_zip.zip">Das Neue Testament</a>
<a href="http://0_AudioBibel_NT_zip.zip"><img alt="0_AudioBibel_NT_zip.zip" src="audiobibelneu/assets/zip.png"/></a>
</div>
<div style="">
<p><a href="?Buch=evangelien_apostel">Evangelien &amp; Apostel</a></p>
<p><a href="?Buch=briefe">Briefe</a></p>
<p><a href="?Buch=offenbarung">Offenbarung</a></p>
</div>
</div>
</li>
<li style="display: inline">
<div class="FarbeNT">
<div style="background-color: rgba(0,0,0, 0.15)">
<a href="http://0_AudioBibel_AT_zip.zip" title="Das alte Testament komplett als ZIP-Datei.">Das Alte Testament</a>
<a href="http://0_AudioBibel_AT_zip.zip" title="Das alte Testament komplett als ZIP-Datei."><img alt="0_AudioBibel_AT_zip.zip" src="audiobibelneu/assets/zip.png"/></a>
</div>
<div style="">
<p><a href="?Buch=geschichte">Ge&shy;schichts&shy;büc&shy;her</a></p>
<p><a href="?Buch=poesie">Poetische Bücher</a></p>
<p><a href="?Buch=prophetie">Prophetische Bücher</a></p>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>




Answer

I removed this line

.container-inner li div {display: table-row;}

and updated this one:

.container-inner li {display:inline-block;line-height:normal;float:left; }

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            
            .container {margin:auto;}
            .container-inner {position:relative;left:-50%;float:right}
            .container-inner ul {position:relative;left:50%}
            .container-inner li {display:inline-block;line-height:normal;float:left; }
            .container-inner a,.container-inner a:visited {color:#525252;text-decoration:none}
            .container-inner a:hover {text-decoration:underline}
            .container-inner li:last-child {border-right:none}          
            .FarbeNT {background: rgba(255,128,0,0.5)}
            .FarbeAT {background: rgba(0,255,0,0.5)}
        </style>
    </head>
    <body>
      <div class="container">
	<div class="container-inner">
		<ul>
			<li>
                <div class="FarbeAT">
                    <div style="background-color: rgba(0,0,0, 0.15);">
                        <a href="http://0_AudioBibel_NT_zip.zip">Das Neue Testament</a>
                        <a href="http://0_AudioBibel_NT_zip.zip"><img alt="0_AudioBibel_NT_zip.zip" src="assets/zip.png"/></a>
                    </div>
                    <div style="">
                        <p><a href="?Buch=evangelien_apostel">Evangelien &amp; Apostel</a></p>
                        <p><a href="?Buch=briefe">Briefe</a></p>
                        <p><a href="?Buch=offenbarung">Offenbarung</a></p>
                    </div>
                </div>
            </li>
			<li style="display: inline">
                <div class="FarbeNT">
                    <div style="background-color: rgba(0,0,0, 0.15)">
                        <a href="http://0_AudioBibel_AT_zip.zip" title="Das alte Testament komplett als ZIP-Datei.">Das Alte Testament</a>
                        <a href="http://0_AudioBibel_AT_zip.zip" title="Das alte Testament komplett als ZIP-Datei."><img alt="0_AudioBibel_AT_zip.zip" src="assets/zip.png"/></a>
                    </div>
                    <div style="">
                        <p><a href="?Buch=geschichte">Ge&shy;schichts&shy;büc&shy;her</a></p>
                        <p><a href="?Buch=poesie">Poetische Bücher</a></p>
                        <p><a href="?Buch=prophetie">Prophetische Bücher</a></p>
                    </div>
                </div>
            </li>
		</ul>
	</div>
</div>  
    </body>
</html>

Comments