Height on li in CSS

HTML & CSS
#1

Hi

I am really struggling to get my page to display correctly. For some reason my ul list will not display in a straight line but one li tag just skips the line and goes to the next line. I have tried to add the height on the ul#video-archive li in my css and but it does not work. I have added an image below along with the code. Any help would be much appreciated.

Kind regards

Tony Ruttle

		<div id="content">
			<div class="entry-content">
				<ul id="video-archive">
					<li>
						<img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#">
						<div>
							<h1>Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p>
						</div> 
					</li>
					<li>
						<img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#">
						<div>
							<h1>Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p>
						</div> 
					</li>
					<li>
						<img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#">
						<div>
							<h1>Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p>
						</div> 
					</li>
					<li>
						<img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#">
						<div>
							<h1>Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p>
						</div> 
					</li>
					<li>
						<img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#">
						<div>
							<h1>Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p>
						</div> 
					</li>
					<li>
						<img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#">
						<div>
							<h1>Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p>
						</div> 
					</li>
					<li>
						<img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#">
						<div>
							<h1>Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p>
						</div> 
					</li>
					<li>
						<img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#">
						<div>
							<h1>Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p>
						</div> 
					</li>
					<li>
						<img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#">
						<div>
							<h1>Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p>
						</div> 
					</li>
					<li>
						<img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#">
						<div>
							<h1>Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p>
						</div> 
					</li>
					<li>
						<img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#">
						<div>
							<h1>Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p>
						</div> 
					</li>
					<li>
						<img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#">
						<div>
							<h1>Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p>
						</div> 
					</li>
					<li>
						<img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#">
						<div>
							<h1>Lorem ipsum dolor sit amet consectetur adipiscing elit nam nisl magna tristique ut ornare</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere dui et efficitur rhoncus. Donec elementum, lectus at interdum rutrum, enim mi iaculis mi, quis.</p>
						</div> 
					</li>
					<li>
						<img src="http://footage.framepool.com/shotimg/qf/334331654-filament-lights-on-on-electricity-light-bulb.jpg" alt="#">
						<div>
							<h1>Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse vel</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper vehicula erat non sagittis. Duis rhoncus neque diam, tincidunt sodales ante volutpat eu. Praesent nec est accumsan, commodo diam mattis, pretium metus. Phasellus vitae erat.</p>
						</div> 
					</li>
				</ul>
			</div><!--entry-->
		</div><!--content-->

#content {
	margin: 0 1.875em /*34% 0 7.6%*/;
	/*width: 58.4%;*/
	padding-top: 30px;
}
.entry-content {
	padding: 1.625em 0 0;
	font-size: 0.875em;
}
.entry-content h1,
.entry-content h2, {
	color: #000;
	/*font-weight: bold;*/
	margin: 0 0 .8125em;
}
.entry-content img {
	max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
.entry-title {
	font-family: "adelle", serif;
	color: #2f705a;
	font-size: 1.75em; /* 28px / 16px */
	font-weight: 400;
}
ul#video-archive {
	list-style: none;
	margin: 0 0 0 -0.975em;
	padding: 0;
}
ul#video-archive li {
	width: 32.222222222222%;
	max-width: 290px;
	display: inline;
	float: left;
	margin: 0 0 60px 0.975em;
	padding: 0;
}
ul#video-archive li img {
	width: 100%;
	height: auto;
	border: 1px solid #000;
}
ul#video-archive h1 {
	font-family: "adelle", serif;
	font-size: 1.5em; /* 24px / 16px */
	color: #2f705a;
	line-height: 1.33333333333333em; /* 24px / 20px */
	margin: 0.75em 0;
}
ul#video-archive h1 a, ul#video-archive h1 a:hover {
	color: #2f705a;
}
ul#video-archive div {
	margin:10px;
}
ul#video-archive div p {
	/*font-size: 0.875em; /* 14px / 16px */
	margin-bottom: 0;
}

sample
sample606×878 118 KB

#2

What should it look like?

#3

Thank you for the reply. It should look like the image I have attached at the end of my post, i.e. there should be no blank white space. Each image should be next to each other all the way down the page.

But for some reason there seems to be white blocks that appear randomly throughout the page.

#4

Open your browser tools and inspect the elements. There is a css rule that is creating the issue. That is the easiest way to track it down.

#5

You could use an alternative: Gridbox layout.
See what it looks like after changing your version to grid:

CSS layouts is not my thing, so lately I’ve just depended on grid. It’s so easy and saves me hours of work trying to get things into their proper positions!

#6

Thank you astonecipher. I have uploaded the code to my friends domain so you can have a look at it properly. As you can see there seems to be random blank spaces. I have tried to add height to the ul#video-archive li in the css but this does not fix it.

http://www.onlineavenue.com/code

Thank you mslilafowler. I will try to make that work with my code on the page above. My html code is fairly decent but my css skills are very limited so I think I will struggle but I will give it a shot.

#7

There is an error in this,

<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1">

And based on inspecting the elements, you need to do a width on the line items, they are all different and it is likely that is contributing too or causing the problem.

#8

Thank you. I have fixed the meta viewport issue. I am not sure what you mean regarding the width of the line items. They are all 290px on my screen? It’s the height that is different on my side? I thought I could fix it by adding a height to the line items but height 100% does not work.

#9

ul#video-archive li { width: 32.222222222222%; max-width: 290px; display: inline; float: left; margin: 0 0 60px 0.975em; padding: 0; }

This is the code for the line items and it already has a width. All line items are the same width regardless of the screen resolution. It’s the height that causes the issue. If I use 100% nothing happens but if I use something like 500px then height works and they all line up correctly. The problem is having a static pixel height causes issues when the text gets longer or when viewed in tablet/mobiles.

Having a code where the height is just 100% would be great but I can’t get it to work

#10

So here are some examples I am seeing when I inspect,
290x380.547
290x446.547
290x380.547
290x446.547

All of the line items that have 290x446.547 as their size, are the ones that create the white space next to them.

#11

Yes this is the issue. so is the 446.547 the width? I was under the impression the 290 is the width? And the 446 is the height? But you mentioned in your previous post that the width needed editing in the css because they were all different.

The height seems to be different in the line items because obviously the text is different. If I can somehow get the height to match the text just like with the width I think that would work. But height as a percentage is not working like the width.

Sponsor our Newsletter | Privacy Policy | Terms of Service