donboe
October 22, 2014, 8:16pm
1
I have a listing of two columns with li’s. unfortunately does not all images have the same height, because of that, the listing is messed up, in other words; If one image in a certain li has a smaller height than the other images, all li’s after that are lined up under the li with the smaller image This is the css I use:
.resultaat_listing {
width: 96%;
margin: 0 2%;
padding: 0;
clear: both;
overflow: hidden;
list-style: none;
}
.resultaat_listing li {
width: 48%;
margin-bottom: 1.5rem;
padding: .5rem 0;
float: left;
box-sizing: border-box;
border: solid #f17000 1px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.resultaat_listing li:nth-child(even) {
float: right;
}
.resultaat_listing li img {
max-width: 100%;
height: auto;
float: left;
margin: 0 1%;
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
}What should I adjust to avoid this
PaulOB
October 22, 2014, 8:23pm
2
Hi,
Instead of float use display:inline-block instead and then the elements won’t snag when they wrap. You will also need to add vertical-align:top (or middle or bottom depending on circumstance). You may also need to tweak margins as inline-block elements come with white space between them (which can be fixed if needed).
Of course without seeing the html the above is a best guess
donboe
October 22, 2014, 8:38pm
3
Hi Paul. Do you mean inline-block both on the li and the image?
Edit. I just added it to the li’s and that works just fine, one last question though. Is there a way to make the li’s the same height, even if a image inside a certain li has a lower height?
You could use display:table-cell instead of display:inline-block (lol) to get the equal heights.
donboe
October 22, 2014, 8:56pm
5
What about the 56% top padding kind of thing. I have used it once but that was another situation, and I have no idea how to implement it in this situation?
Sorry, but what is the 56% top padding yo uare talking about? Why would you want to use that? The goal is…?
donboe
October 22, 2014, 9:07pm
7
I used the following css for a picture gallery once to make the images line up equally
.gallery li {
width: 20% !important;
margin: 0;
margin-top: 15px !important;
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
padding-bottom: 1px;
}
.gallery li a {
display: block;
width: 100%;
overflow: hidden;
outline: none;
}
.gallery li img {
display: block;
max-width: 100%;
max-height: 100%;
margin: auto;
border: solid 1px #C00;
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
}
#aspect a {
position: relative;
height: 0;
padding-top: 56.25%;
}
#aspect img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 1px;
border: solid 1px #C00;
}
Do you have this online? Or HTML to match? I see no reason why you would need the top padding there. If it’s about vertical alignment…the table-cell approach allows vertical-align property to be used.
donboe
October 22, 2014, 9:13pm
9
No it’s not online as yet, but can I add a screenshot here?
So what you say is to give the li’s property display: table-cell; vertical-align: middle;? Next to the picture there will come a h3 and two p’s a well which should be lined up next to the picture., what kind of properties should I give them?
Well those h3s and p will be vertically aligned in hte middle. What special positioning/features do you want the to have? Might not need anything.
Do the changes and then please give us a screenshot. The full code file would be helpful too. The HTML/CSS. Doctype to </html>
donboe
October 22, 2014, 9:30pm
11
Let me start by showing a screenshot of what I need. On the screenshot you see the h3. just under that there need to come two p’s
I just tried the table-cell aproach but then everything is all over the place.
This is the complete HTML:
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/cssReset.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/cssSite.css" media="screen">
</head>
<body id="zoeken">
<div id="wrapper">
<header id="header">
<section class="logo"><a href="index.php"><img src="img/logo.png"></a></section>
<nav class="nav">
<li><a href="index.php" title="Welkom bij Auto Passon" class="home">Home</a></li>
<li><a href="zoeken.php" title="Zoeken" class="zoeken">Zoeken</a></li>
<li><a href="over-ons.php" title="Over Auto passon" class="over">Over Ons</a></li>
<li><a href="service.php" title="Auto Passon Service" class="service">Service</a></li>
<li><a href="contact.php" title="Auto Passon Contact" class="contact">Contact</a></li>
</nav>
</header> <div class="tr">
<main id="main">
<section id="content">
<div class="sidebar">
<h2>Snel zoeken</h2>
<form action="zoeken.php" method="post" name="search_form" class="search_form" id="search_form" dir="ltr" lang="nl">
<div class="form_wrapper">
<fieldset class="fl">
<label class="fl">Merk</label>
<select name="merk" id="merk" class="search_select fl">
<option value="0">Alle merken</option>
<option value="1">BMW</option>
<option value="2">Citroen</option>
<option value="3">Daewoo</option>
<option value="14">Daihatsu</option>
<option value="4">Fiat</option>
<option value="5">Kia</option>
</select>
</fieldset><fieldset class="fr">
<label class="fr">Model</label>
<select name="model" id="model" class="search_select fl">
<option value="">Alle modellen</option>
<option value="4 ">Hatchback</option>
<option value="5 ">Sedan</option>
<option value="6 ">Stationwagon</option>
</select>
</fieldset> </div>
<div class="form_wrapper">
<fieldset class="fl">
<label class="sml fl">Prijs</label> <label class="sml fr">Bouwjaar</label>
<select name="prijs" id="prijs" class="small_select fl">
<option value="">Tot</option>
<option value="500" >500</option>
<option value="1000" >1.000</option>
<option value="1500" >1.500</option>
<option value="2000" >2.000</option>
<option value="2500" >2.500</option>
<option value="3000" >3.000</option>
<option value="3500" >3.500</option>
<option value="4000" >4.000</option>
<option value="5000" >5.000</option>
<option value="7500" >7.500</option>
<option value="10000" >10.000</option>
<option value="12500" >12.500</option>
<option value="15000" >15.000</option>
<option value="17500" >17.500</option>
<option value="20000" >20.000</option>
<option value="22500" >22.500</option>
<option value="25000" >25.000</option>
<option value="30000" >30.000</option>
<option value="32767" >35.000</option>
<option value="32767" >40.000</option>
<option value="32767" >45.000</option>
</select>
<select name="bouwjaar" id="bouwjaar" class="small_select fr">
<option value="">Van</option>
<option value="2014" >2014</option>
<option value="2013" >2013</option>
<option value="2012" >2012</option>
<option value="2011" >2011</option>
<option value="2010" >2010</option>
<option value="2009" >2009</option>
<option value="2008" >2008</option>
<option value="2007" >2007</option>
<option value="2006" >2006</option>
<option value="2005" >2005</option>
<option value="2004" >2004</option>
<option value="2003" >2003</option>
<option value="2002" >2002</option>
<option value="2001" >2001</option>
<option value="2000" >2000</option>
<option value="1999" >1999</option>
<option value="1998" >1998</option>
<option value="1997" >1997</option>
<option value="1996" >1996</option>
<option value="1995" >1995</option>
<option value="1994" >1994</option>
<option value="1993" >1993</option>
<option value="1992" >1992</option>
<option value="1991" >1991</option>
<option value="1990" >1990</option>
<option value="1989" >1989</option>
<option value="1988" >1988</option>
<option value="1987" >1987</option>
<option value="1986" >1986</option>
<option value="1985" >1985</option>
<option value="1984" >1984</option>
</select>
</fieldset><fieldset class="fr">
<label class="sml fl">Transmissie</label> <label class="sml fr">Brandstof</label>
<select name="transmissie" id="transmissie" class="small_select fl">
<option value="">Alle</option>
<option value="2" >Handgeschakeld</option>
</select>
<select name="brandstof" id="brandstof" class="small_select fr">
<option value="">Alle</option>
<option value="1" >Benzine</option>
<option value="3" >LPG</option>
</select>
</fieldset> </div>
<div class="form_wrapper">
<fieldset class="fl">
<label class="sml fl">Kilometers tot</label> <label class="sml fr">Kleur</label>
<select name="kilometers" id="kilometers" class="small_select fl">
<option value="">Alle</option>
<option value="2500">2.500</option>
<option value="5000">5.000</option>
<option value="10000">10.000</option>
</select>
<select name="kleur" id="kleur" class="small_select fr">
<option value="">Alle</option>
<option value="2" >Blauw</option>
<option value="4" >Grijs</option>
</select>
</fieldset> </div>
<input name="search_button" type="submit" class="search-button" value="Zoeken">
</form>
</div>
<div class="content">
<h2>Zoek resultaten</h2>
<ul class="resultaat_listing">
<li>
<a href="#"><img src="occasion_photos/thumbnails/daihatsu6.jpg"></a>
<h3>Daihatsu Move 1.0-12V nieuwe distributie riem!!!</h3>
</li>
<li>
<a href="#"><img src="occasion_photos/thumbnails/fiat1_6.jpg"></a>
<h3>Fiat Brava 1.6-16V 100 SX (AIRCO) NIEUWE A.P.K</h3>
</li>
<li>
<a href="#"><img src="occasion_photos/thumbnails/fiat2_6.jpg"></a>
<h3>Fiat Stilo 1.6-16V Active NIEUWE APK! AIRCO, CRUISE CONTROL</h3>
</li>
<li>
<a href="#"><img src="occasion_photos/thumbnails/kia1_6.jpg"></a>
<h3>Kia Carens 1.8 LS airco!!</h3>
</li>
<li>
<a href="#"><img src="occasion_photos/thumbnails/kia3_6.jpg"></a>
<h3>Kia Rio 1.3 LS NIEUWE A.P.K</h3>
</li>
<li>
<a href="#"><img src="occasion_photos/thumbnails/kia2_6.jpg"></a>
<h3>Kia Carens 1.8-16V LX NIEUWE A.P.K. LPG G3!</h3>
</li>
<li>
<a href="#"><img src="occasion_photos/thumbnails/bmw6.jpg"></a>
<h3>BMW 3-serie Compact 316i (1 EIGENAARS AUTO!) </h3>
</li>
<li>
<a href="#"><img src="occasion_photos/thumbnails/citroen6.jpg"></a>
<h3>Citroen Xsara Picasso 1.8i-16V NIEUWE A.P.K.</h3>
</li>
<li>
<a href="#"><img src="occasion_photos/thumbnails/daewoo1_6.jpg"></a>
<h3>Daewoo Leganza 2.0-16V Europe FULL OPTIONS!</h3>
</li>
<li>
<a href="#"><img src="occasion_photos/thumbnails/daewoo2_6.jpg"></a>
<h3>Daewoo Tacuma 1.8 SE AIRCO! 137000KM</h3>
</li>
</ul>
</div> </section>
</main>
</div>
<footer id="footer">
<nav class="fmenu fl">
<li><a href="disclaimer.php" title="Auto Passon Disclaimer" class="disclaimer">Disclaimer</a></li>
<li><a href="privacy.php" title="Auto Passon Privacy" class="privacy">Privacy</a></li>
<li><a href="contact.php" title="Auto Passon Contact" class="contact">Contact</a></li>
</nav>
<p class="copyright fr">Copyright © 2014 Auto Passon. All rights reserved</p>
</footer>
</div>
<div id="background">
<img src="background_photos/1.jpg" alt="" />
</div> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</body>
</html>Hope this helps
PaulOB
October 23, 2014, 7:57am
12
To have equal heights you would need display table and table-cell as Ryan suggests but you would also have to group the items in pairs otherwise they will all try and squash into one row.
e.g.
.resultaat_listing {
width: 96%;
margin: 0 2%;
padding: 0;
clear: both;
overflow: hidden;
list-style: none;
**display:table;
table-layout:fixed;
border-spacing:10px;**
}
.resultaat_listing li {
width: 48%;
margin-bottom: 1.5rem;
padding: .5rem 0;
**display:table-cell;**
box-sizing: border-box;
border: solid #f17000 1px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
<ul class="resultaat_listing">
<li> <a href="#"><img src="occasion_photos/thumbnails/daihatsu6.jpg"></a>
<h3>Daihatsu Move 1.0-12V nieuwe distributie riem!!!</h3>
</li>
<li> <a href="#"><img src="occasion_photos/thumbnails/fiat1_6.jpg"></a>
<h3>Fiat Brava 1.6-16V 100 SX (AIRCO) NIEUWE A.P.K</h3>
</li>
</ul>
<ul class="resultaat_listing">
<li> <a href="#"><img src="occasion_photos/thumbnails/fiat2_6.jpg"></a>
<h3>Fiat Stilo 1.6-16V Active NIEUWE APK! AIRCO, CRUISE CONTROL</h3>
</li>
<li> <a href="#"><img src="occasion_photos/thumbnails/kia1_6.jpg"></a>
<h3>Kia Carens 1.8 LS airco!!</h3>
</li>
</ul>
That’s the only way you can achieve the border being the same size on each element.
The 56% padding method is designed for keeping videos at the same aspect in relation to the width. It won’t be any use here as you can’t squash or expand text.
donboe
October 23, 2014, 10:13am
13
Hi Paul. I’m gonna give it a try. One question though. How can I group them in pairs, since the content is coming from the database?
PaulOB
October 23, 2014, 10:43am
14
I can’t help you there as you would need to program that aspect so the output is in pairs.
There is no other way to do this unless you want to try flexbox and then you would need to supply fallbacks with modernizr or similar for older browsers and it starts to get complicated.
Alternatively just use inline-block and give them all a min-height that satisfies most of the requirements. Unless you are going to have masses of content in some boxes and not the others.
1 Like
You loop them out using PHP or some other language yes? You could have every 3rd iteration start the loop over.
1 Like
