Page 1 of 1

Creating layout within ordered list

Posted: Mon Dec 17, 2012 11:35 am
by nigma
I'm trying to use ordered lists to display a list of reservations made for various shared research instruments and I'm having trouble formatting the list so that it displays as I want. My markup looks like:

Code: Select all

<h4>Instrument Title</h4>
<ol>
<li>Reservation 1 details</li>
<li>Reservation 2 details</li>
<li>Reservation 3 details</li>
</ol>
I'd like to use CSS to place the heading to the left of the reservation times such that it is horizontally and vertically centered. The main issue I'm having is with the vertical and horizontal centering, as I am able to place the heading to the left with the float property. I've attached a small image of the desired effect. I would greatly appreciate any advice on how to accomplish this.

Re: Creating layout within ordered list

Posted: Tue Dec 18, 2012 6:47 am
by social_experiment
Got something similar with the css below; the width value determines how close the list is to the heading; Tested it in FF something, IE and Chrome

Code: Select all

h4 {
	float: left;
	width: 20%;			
}
ol {			
	position: relative;
	top: 0;		
	list-style: none;
}