Strange floating behavior

I have a floating point issue on my website.

I have 6 Divs, 3 for each line and everything is left to the left. This is how it should be:

0-0-0

0-0-0

but instead:

0-0-0

0 ----

0-0

Here is the communication problem:

Web site

    #container {
    	float: left;
    	margin: 0 -240px 0 0;
    	width: 100%;
    }

    #primary,
    #secondary {
    	float: right;
    	overflow: hidden;
    	width: 220px;
    }
    #secondary {
    	clear: right;
    }
    #footer {
    	clear: both;
    	width: 100%;
    }



    /* =Structure
    -------------------------------------------------------------- */

    /* The main theme structure */
    #access .menu-header,
    div.menu,
    #colophon,
    #branding,
    #main,
    #wrapper {
    	margin: 0 auto;
    	width: 1000px;
    }
    #wrapper {
    	margin-top: 20px;
    	padding: 0 20px 20px 20px;
    }

    /* Structure the footer area */
    #footer-widget-area {
    	overflow: hidden;
    }
    #footer-widget-area .widget-area {
    	float: left;
    	margin-right: 20px;
    	width: 220px;
    }
    #footer-widget-area #fourth {
    	margin-right: 0;
    }
    #site-info {
    	float: left;
    	font-size: 14px;
    	font-weight: bold;
    	width: 700px;
    }
    #site-generator {
    	float: right;
    	width: 220px;
    }



    /* Infobox */


    .infotext {
    	width:600px;
    	margin: 80px 0 0 500px;
    	
    	box-sizing: border-box;
    }


    /* Overview */

    .child-thumb {
    	width: 282px;
    	float:left;
    	margin: 15px;
      	background: #CCC;
    }

    .child-thumb p a {
    	display: none;
    }

    .wp-post-image {
    	margin-bottom: 20px;
    }

    .bilderrahmen-wrapper {
    	z-index: 1;
    	height: 220px;
    	width: 290px;
    	overflow: hidden;
    	-webkit-animation: childthumb 5s ease-in-out infinite;
    	animation: childthumb 5s ease-in-out infinite;
    	transform-origin: 50% -30%;
    	transform: translateZ(0);
    	
    }

    .bilderrahmen {
    	z-index: 1;
    	height: 175px;
    	width: 290px;
    	background: url(image/overview.png);
    	overflow: hidden;
    	background-repeat: no-repeat;
    }

    .plakette_wrapper {
    	text-align: center;
    }

    .plakette {
    	display: inline-block;
    	vertical-align: middle;
    	height: 53px;
    	margin: -20px 0 0 0;
    }

    .plakette span {
    	background: url(image/plakette/middle.png);
    	height: 53px;
    	float: left !important;
    	line-height: 49px;
    	color: #272727;
    	margin-left: -1px;
    }

    .plakette .left {
    	float: left;
    	background: url(image/plakette/left.png);
    	height: 53px;
    	width: 31px;
    }
    .plakette .right {
    	float: left;
    	background: url(image/plakette/right.png);
    	height: 53px;
    	width: 34px;
    	margin-left: -1px;
    }







    .bilderrahmen-wrapper .thumb {
    	z-index: -1;
    	height: 135px;
    	width: 265px;
    	overflow: hidden;
    	position: absolute;
    	margin: -166px 0 0 9px;
    }

    .thumb-image {
    	margin-bottom: 20px;
    }

    .child-thumb a {
    	text-decoration: none !important;
    }



    .child-thumb p {
    	margin: 0px 0 0 0;
    }


    /* This is the custom header image */
    #branding img {
    	border-top: 4px solid #000;
    	border-bottom: 1px solid #000;
    	display: block;
    	float: left;
    }

    .logo {
    	height:154px;
    	width:146px;
    	background:url(images/logo.png);
    	display:block;
    	float:left;
    	margin: 10px 0 0 10px;
    	position: absolute;
    	z-index: 2;
    }


    /* =Menu
    -------------------------------------------------------------- */

    #access {
    	display: block;
    	float: right;
    	margin: 85px 20px 0 0;
    	width: 775px;
    	
    }
    #access .menu-header,
    div.menu {
    	font-size: 18px;
    	margin-left: 12px;
    	width: 928px;
    }
    #access .menu-header ul,
    div.menu ul {
    	list-style: none;
    	margin: 0;
    }
    #access .menu-header li,
    div.menu li {
    	float: left;
    	padding: 0 10px 0 10px;
    	position: relative;
    }
    #access a {
    	color: #191919;
    	display: block;
    	line-height: 38px;
    	padding: 0 10px;
    	text-decoration: none;
    	text-transform:uppercase;
    	font-weight:100;
    	font-family: 'Delius Unicase', cursive !important;
    }
    #access ul ul {
    	position:absolute;
        top:-99999px;
        left:0;
        opacity: 0; /* Hide sub level */
        -webkit-transition: opacity .5s ease-in-out;
        -moz-transition: opacity .5s ease-in-out;
        -o-transition: opacity .5s ease-in-out;
        z-index:497;
    }
    #access ul ul li {
    	min-width: 180px;
    }
    #access ul ul ul {
    	left: 100%;
    	top: 0;
    }
    #access ul ul a {
    	background: rgba(255, 255, 255, 0.8);
    	line-height: 1em;
    	padding: 10px;
    	width: 220px;
    	height: auto;
    	
    }
    #access li:hover > a,
    #access ul ul :hover > a {
    	color: #ea4f23 !important;
    	-webkit-transition: all 0.1s ease-in-out !important;
        -o-transition: all 0.1s ease-in-out !important;
        -moz-transition: all 0.1s ease-in-out !important;
        -ms-transition: all 0.1s ease-in-out !important;
        transition: all 0.1s ease-in-out !important;
    }

    #access a {
    	-webkit-transition: all 0.2s ease-in-out !important;
        -o-transition: all 0.2s ease-in-out !important;
        -moz-transition: all 0.2s ease-in-out !important;
        -ms-transition: all 0.2s ease-in-out !important;
        -kthtml-transition: all 0.2s ease-in-out !important;
        transition: all 0.2s ease-in-out !important;
    	}
    	
    #access ul li:hover > ul {
    	opacity: 1; position:absolute; top:99%; left:0; z-index: 1000;
    	
    }
    #access ul li.current_page_item > a,
    #access ul li.current_page_ancestor > a,
    #access ul li.current-menu-ancestor > a,
    #access ul li.current-menu-item > a,
    #access ul li.current-menu-parent > a {
    	color: #454545;
    }
    * html #access ul li.current_page_item a,
    * html #access ul li.current_page_ancestor a,
    * html #access ul li.current-menu-ancestor a,
    * html #access ul li.current-menu-item a,
    * html #access ul li.current-menu-parent a,
    * html #access ul li a:hover {
    	color: #454545;
    }


    /* =Content
    -------------------------------------------------------------- */

    #home-container {
    	height:200px;
    	width: 1200px;
    	margin:680px 0 0 0;
    }

    #main {
    	clear: both;
    	overflow: hidden;
    	padding: 32px 30px 30px 30px;
    	background:rgba(255, 255, 255, 0.95);;
    	position: relative;
    	min-height: 700px;
    	background: url(images/bg-content.png)
    }

    .main-top {
    	background: url(images/bg-content-top.png);
    	height: 13px;
    	width: 1000px;
    	margin: -45px 0 0 0;
    }

    .main-bottom {
    	background: url(images/bg-content-bottom.png);
    	height: 13px;
    	width: 1000px;
    	margin-top: -10px;
    }

    #content {
    	margin: 0px 0 36px 0;
    }

    .entry-content {
    	-webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
        margin-bottom: 20px;
        widows:5;
    }



    #content,
    #content input,
    #content textarea {
    	color: #333;
    	font-size: 15px;
    	line-height: 24px;
    }
    #content p,
    #content ul,
    #content ol,
    #content dd,
    #content pre,
    #content hr {
    	margin-bottom: 24px;
    }
    #content ul ul,
    #content ol ol,
    #content ul ol,
    #content ol ul {
    	margin-bottom: 0;
    }
    #content pre,
    #content kbd,
    #content tt,
    #content var {
    	font-size: 15px;
    	line-height: 21px;
    }
    #content code {
    	font-size: 13px;
    }
    #content dt,
    #content th {
    	color: #000;
    }
    #content h1,
    #content h2,
    #content h3,
    #content h4,
    #content h5,
    #content h6 {
    	color: #000;
    	line-height: 1.5em;
    	margin: 0 0 20px 0;
    }
    #content table {
    	border: 1px solid #e7e7e7;
    	margin: 0 -1px 24px 0;
    	text-align: left;
    	width: 100%;
    }
    #content tr th,
    #content thead th {
    	color: #777;
    	font-size: 12px;
    	font-weight: bold;
    	line-height: 18px;
    	padding: 9px 24px;
    }
    #content tr td {
    	border-top: 1px solid #e7e7e7;
    	padding: 6px 24px;
    }
    #content tr.odd td {
    	background: #f2f7fc;
    }
    .hentry {
    	margin: 0 0 48px 0;
    }
    .home .sticky {
    	background: #f2f7fc;
    	border-top: 4px solid #000;
    	margin-left: -20px;
    	margin-right: -20px;
    	padding: 18px 20px;
    }
    .single .hentry {
    	margin: 0 0 36px 0;
    }
    .page-title {
    	color: #000;
    	font-size: 14px;
    	font-weight: bold;
    	margin: 0 0 36px 0;
    }
    .page-title span {
    	color: #333;
    	font-size: 16px;
    	font-style: italic;
    	font-weight: normal;
    }
    .page-title a:link,
    .page-title a:visited {
    	color: #777;
    	text-decoration: none;
    }
    .page-title a:active,
    .page-title a:hover {
    	color: #ff4b33;
    }
    #content .entry-title {
    	color: #000;
    	font-size: 21px;
    	font-weight: bold;
    	line-height: 1.3em;
    	margin-bottom: 20px;
    }
    .entry-title a:link,
    .entry-title a:visited {
    	color: #000;
    	text-decoration: none;
    }
    .entry-title a:active,
    .entry-title a:hover {
    	color: #ff4b33;
    }
    .entry-meta {
    	color: #777;
    	font-size: 12px;
    }
    .entry-meta abbr,
    .entry-utility abbr {
    	border: none;
    }
    .entry-meta abbr:hover,
    .entry-utility abbr:hover {
    	border-bottom: 1px dotted #666;
    }
    .entry-content,
    .entry-summary {
    	clear: both;
    }
    #content .entry-summary p:last-child {
    	margin-bottom: 12px;
    }
    .entry-content fieldset {
    	border: 1px solid #e7e7e7;
    	margin: 0 0 24px 0;
    	padding: 24px;
    }
    .entry-content fieldset legend {
    	background: #fff;
    	color: #000;
    	font-weight: bold;
    	padding: 0 24px;
    }
    .entry-content input {
    	margin: 0 0 24px 0;
    }
    .entry-content input.file,
    .entry-content input.button {
    	margin-right: 24px;
    }
    .entry-content label {
    	color: #777;
    	font-size: 12px;
    }
    .entry-content select {
    	margin: 0 0 24px 0;
    }
    .entry-content sup,
    .entry-content sub {
    	font-size: 10px;
    }
    .entry-content blockquote.left {
    	float: left;
    	margin-left: 0;
    	margin-right: 24px;
    	text-align: right;
    	width: 33%;
    }
    .entry-content blockquote.right {
    	float: right;
    	margin-left: 24px;
    	margin-right: 0;
    	text-align: left;
    	width: 33%;
    }
    .page-link {
    	clear: both;
    	color: #000;
    	font-weight: bold;
    	line-height: 48px;
    	word-spacing: 0.5em;
    }
    .page-link a:link,
    .page-link a:visited {
    	background: #f1f1f1;
    	color: #333;
    	font-weight: normal;
    	padding: 0.5em 0.75em;
    	text-decoration: none;
    }
    .home .sticky .page-link a {
    	background: #d9e8f7;
    }
    .page-link a:active,
    .page-link a:hover {
    	color: #ff4b33;
    }
    body.page .edit-link {
    	clear: both;
    	display: block;
    }
    #entry-author-info {
    	background: #f2f7fc;
    	border-top: 4px solid #000;
    	clear: both;
    	font-size: 14px;
    	line-height: 20px;
    	margin: 24px 0;
    	overflow: hidden;
    	padding: 18px 20px;
    }
    #entry-author-info #author-avatar {
    	background: #fff;
    	border: 1px solid #e7e7e7;
    	float: left;
    	height: 60px;
    	margin: 0 -104px 0 0;
    	padding: 11px;
    }
    #entry-author-info #author-description {
    	float: left;
    	margin: 0 0 0 104px;
    }
    #entry-author-info h2 {
    	color: #000;
    	font-size: 100%;
    	font-weight: bold;
    	margin-bottom: 0;
    }
    .entry-utility {
    	clear: both;
    	color: #777;
    	font-size: 12px;
    	line-height: 18px;
    }
    .entry-meta a,
    .entry-utility a {
    	color: #777;
    }
    .entry-meta a:hover,
    .entry-utility a:hover {
    	color: #ff4b33;
    }
    #content .video-player {
    	padding: 0;
    }


    /* =Asides
    -------------------------------------------------------------- */

    .home #content .format-aside p,
    .home #content .category-asides p {
    	font-size: 14px;
    	line-height: 20px;
    	margin-bottom: 10px;
    	margin-top: 0;
    }
    .home .hentry.format-aside,
    .home .hentry.category-asides {
    	padding: 0;
    }
    .home #content .format-aside .entry-content,
    .home #content .category-asides .entry-content {
    	padding-top: 0;
    }


    /* =Gallery listing
    -------------------------------------------------------------- */

    .format-gallery .size-thumbnail img,
    .category-gallery .size-thumbnail img {
    	border: 10px solid #f1f1f1;
    	margin-bottom: 0;
    }
    .format-gallery .gallery-thumb,
    .category-gallery .gallery-thumb {
    	float: left;
    	margin-right: 20px;
    	margin-top: -4px;
    }
    .home #content .format-gallery .entry-utility,
    .home #content .category-gallery .entry-utility {
    	padding-top: 4px;
    }


    /* =Attachment pages
    -------------------------------------------------------------- */

    .attachment .entry-content .entry-caption {
    	font-size: 140%;
    	margin-top: 24px;
    }
    .attachment .entry-content .nav-previous a:before {
    	content: '\2190\00a0';
    }
    .attachment .entry-content .nav-next a:after {
    	content: '\00a0\2192';
    }


    /* =Images
    -------------------------------------------------------------- */

    /*
    Resize images to fit the main content area.
    - Applies only to images uploaded via WordPress by targeting size-* classes.
    - Other images will be left alone. Use "size-auto" class to apply to other images.
    */
    img.size-auto,
    img.size-full,
    img.size-large,
    img.size-medium,
    .attachment img,
    .widget-container img {
    	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
    	height: auto; /* Override height to match resized width for correct aspect ratio. */
    }
    .alignleft,
    img.alignleft {
    	display: inline;
    	float: left;
    	margin-right: 24px;
    	margin-top: 4px;
    }
    .alignright,
    img.alignright {
    	display: inline;
    	float: right;
    	margin-left: 24px;
    	margin-top: 4px;
    }
    .aligncenter,
    img.aligncenter {
    	clear: both;
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    img.alignleft,
    img.alignright,
    img.aligncenter {
    	margin-bottom: 12px;
    }
    .wp-caption {
    	background: #f1f1f1;
    	line-height: 18px;
    	margin-bottom: 20px;
    	max-width: 632px !important; /* prevent too-wide images from breaking layout */
    	padding: 4px;
    	text-align: center;
    }
    .wp-caption img {
    	margin: 5px 5px 0;
    	max-width: 622px; /* caption width - 10px */
    }
    .wp-caption p.wp-caption-text {
    	color: #777;
    	font-size: 12px;
    	margin: 5px;
    }
    .wp-smiley {
    	margin: 0;
    }
    .gallery {
    	margin: 0 auto 18px;
    }
    .gallery .gallery-item {
    	float: left;
    	margin-top: 0;
    	text-align: center;
    	width: 33%;
    }
    .gallery-columns-2 .gallery-item {
    	width: 50%;
    }
    .gallery-columns-4 .gallery-item {
    	width: 25%;
    }
    .gallery img {
    	border: 2px solid #cfcfcf;
    }
    .gallery-columns-2 .attachment-medium {
    	max-width: 92%;
    	height: auto;
    }
    .gallery-columns-4 .attachment-thumbnail {
    	max-width: 84%;
    	height: auto;
    }
    .gallery .gallery-caption {
    	color: #777;
    	font-size: 12px;
    	margin: 0 0 12px;
    }
    .gallery dl {
    	margin: 0;
    }
    .gallery img {
    	border: 10px solid #f1f1f1;
    }
    .gallery br+br {
    	display: none;
    }
    #content .attachment img {/* single attachment images should be centered */
    	display: block;
    	margin: 0 auto;
    }


    /* =Navigation
    -------------------------------------------------------------- */

    .navigation {
    	color: #777;
    	font-size: 12px;
    	line-height: 18px;
    	overflow: hidden;
    }
    .navigation a:link,
    .navigation a:visited {
    	color: #777;
    	text-decoration: none;
    }
    .navigation a:active,
    .navigation a:hover {
    	color: #ff4b33;
    }
    .nav-previous {
    	float: left;
    	width: 50%;
    }
    .nav-next {
    	float: right;
    	text-align: right;
    	width: 50%;
    }
    #nav-above {
    	margin: 0 0 18px 0;
    }
    #nav-above {
    	display: none;
    }
    .paged #nav-above,
    .single #nav-above {
    	display: block;
    }
    #nav-below {
    	margin: -18px 0 0 0;
    }


    .clear {
    	clear: all;
    }
      

    <div id="wrapper" class="hfeed">

        
        

    	
    <div class="main-top"></div>
    <div id="main">
    		<div id="container" class="one-column">
    			<div id="content" role="main">
    			
    			<div id="content-text">
    							

    				<div id="post-101" class="post-101 page type-page status-publish hentry">
    											<h1 class="entry-title">Peeronauten</h1>
    					
    					<div class="entry-content">
    						<p>Text fehlt.</p>
    																	</div><!-- .entry-content -->
    				</div><!-- #post-## -->

    				

    			</div>
    			
    			
    						    <div class="child-thumb">
    			    	<div class="bilderrahmen-wrapper">
    				    	<div class="bilderrahmen"></div>
    					    <div class="thumb">
    						    <a href="http://philippdaub.de/peer23/?page_id=103"><img width="280" height="133" src="http://philippdaub.de/peer23/wp-content/uploads/2014/02/huber-300x143.jpg" class="thumb-image wp-post-image" alt="huber"></a>
    						</div>
    						
    						
    						<div class="plakette_wrapper">
    						<a class="plakette" href="http://philippdaub.de/peer23/?page_id=103">
    								<div class="left"></div>
    								<span>Andreas Huber</span>
    								<div class="right"></div>
    						</a>					
    						</div>
    						
    						
    					</div>
    			    	    
    			    
    			        
    			        
    			         <p>Text fehlt. <a href="http://philippdaub.de/peer23/?page_id=103">Weiterlesen <span class="meta-nav">β†’</span></a></p>
     
    			        
    			    </div>
    			    			    <div class="child-thumb">
    			    	<div class="bilderrahmen-wrapper">
    				    	<div class="bilderrahmen"></div>
    					    <div class="thumb">
    						    <a href="http://philippdaub.de/peer23/?page_id=105"></a>
    						</div>
    						
    						
    						<div class="plakette_wrapper">
    						<a class="plakette" href="http://philippdaub.de/peer23/?page_id=105">
    								<div class="left"></div>
    								<span>DMA</span>
    								<div class="right"></div>
    						</a>					
    						</div>
    						
    						
    					</div>
    			    	    
    			    
    			        
    			        
    			         <p>Die Veranstaltungstechniker eures Vertrauens und das Event eures Lebens! <a href="http://philippdaub.de/peer23/?page_id=105">Weiterlesen <span class="meta-nav">β†’</span></a></p>
     
    			        
    			    </div>
    			    			    <div class="child-thumb">
    			    	<div class="bilderrahmen-wrapper">
    				    	<div class="bilderrahmen"></div>
    					    <div class="thumb">
    						    <a href="http://philippdaub.de/peer23/?page_id=107"></a>
    						</div>
    						
    						
    						<div class="plakette_wrapper">
    						<a class="plakette" href="http://philippdaub.de/peer23/?page_id=107">
    								<div class="left"></div>
    								<span>NΓ€hatelier</span>
    								<div class="right"></div>
    						</a>					
    						</div>
    						
    						
    					</div>
    			    	    
    			    
    			        
    			        
    			         <p>Text fehlt. <a href="http://philippdaub.de/peer23/?page_id=107">Weiterlesen <span class="meta-nav">β†’</span></a></p>
     
    			        
    			    </div>
    			    			    <div class="child-thumb">
    			    	<div class="bilderrahmen-wrapper">
    				    	<div class="bilderrahmen"></div>
    					    <div class="thumb">
    						    <a href="http://philippdaub.de/peer23/?page_id=109"></a>
    						</div>
    						
    						
    						<div class="plakette_wrapper">
    						<a class="plakette" href="http://philippdaub.de/peer23/?page_id=109">
    								<div class="left"></div>
    								<span>Studio23</span>
    								<div class="right"></div>
    						</a>					
    						</div>
    						
    						
    					</div>
    			    	    
    			    
    			        
    			        
    			         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in neque ante.</p>
    <p> <a href="http://philippdaub.de/peer23/?page_id=109">Weiterlesen <span class="meta-nav">β†’</span></a></p>
     
    			        
    			    </div>
    			    			    <div class="child-thumb">
    			    	<div class="bilderrahmen-wrapper">
    				    	<div class="bilderrahmen"></div>
    					    <div class="thumb">
    						    <a href="http://philippdaub.de/peer23/?page_id=140"><img width="280" height="185" src="http://philippdaub.de/peer23/wp-content/uploads/2014/07/fechthut-300x199.jpg" class="thumb-image wp-post-image" alt="fechthut"></a>
    						</div>
    						
    						
    						<div class="plakette_wrapper">
    						<a class="plakette" href="http://philippdaub.de/peer23/?page_id=140">
    								<div class="left"></div>
    								<span>Fecht-Hut</span>
    								<div class="right"></div>
    						</a>					
    						</div>
    						
    						
    					</div>
    			    	    
    			    
    			        
    			        
    			         <p>Westliche Kampfkunst lernen und erleben mit fast allen Waffen, die Klingen haben und mehr… denn der Westen hat einiges zu bieten.</p>
    <p> <a href="http://philippdaub.de/peer23/?page_id=140">Weiterlesen <span class="meta-nav">β†’</span></a></p>
     
    			        
    			    </div>
    			    			    <div class="child-thumb">
    			    	<div class="bilderrahmen-wrapper">
    				    	<div class="bilderrahmen"></div>
    					    <div class="thumb">
    						    <a href="http://philippdaub.de/peer23/?page_id=161"></a>
    						</div>
    						
    						
    						<div class="plakette_wrapper">
    						<a class="plakette" href="http://philippdaub.de/peer23/?page_id=161">
    								<div class="left"></div>
    								<span>Marky’s Schweisspalast</span>
    								<div class="right"></div>
    						</a>					
    						</div>
    						
    						
    					</div>
    			    	    
    			    
    			        
    			        
    			         <p>Text fehlt. <a href="http://philippdaub.de/peer23/?page_id=161">Weiterlesen <span class="meta-nav">β†’</span></a></p>
     
    			        
    			    </div>
    			    			
    			<div class="clear"></div>
    			</div><!-- #content -->
    		</div><!-- #container -->
    </div>
    <div class="main-bottom"></div>
    	</div><!-- #main -->
      

Run codeHide result


Do you have any idea what the problem is?

+3


source to share


3 answers


update your CSS as shown below to get a great result. Hope this helps !!!



.child-thumb {
    display: inline-block;
    margin: 15px 10px;
    text-align: left;
    vertical-align: top;
    width: 282px;
}

#content {
    text-align: center;
}

      

+2


source


You can fix the problem by following these steps.

1 . Install font-size: 0;

in#content

2 - install font-size:16px;

, display:inline-block;

and vertical-align:top;

in.child-thumb

3 - Delete float: left;

before.child-thumb



Change the CSS as follows:

#content {
    margin: 0px 0 36px 0;
    font-size: 0; /* font-size: 0; to remove the white-space between inline-block elements */
}
.child-thumb {
    width: 282px;
    /* float: left; */ /* remove the float: left; */
    margin: 15px;
    display: inline-block;
    font-size: 16px; /* font-size: 16px; to reset the font-size to child elements */
    vertical-align: top; /* align inline-block elements to top */
}

      

I tried to solve the problem with help float: left;

, but it didn't work for me.

+2


source


I am using firebug to detect your problem and I found the cause of your question.

Die Veranstaltungstechniker eures Vertrauens und das Event eures Lebens! 

      

This sentence is too long to fit the position.
There are two ways to fix your problem:

  • change the sentence, for example shorten it.
  • make the child of the p

    class child-thumb

    unify the height.
0


source







All Articles