Move bullet points in line with each other

HTML & CSS
1

Hi,

I’m trying to move the bullet point sections in line with each other…

so, you would have

[CENTER]photo

block 1 block 2 block 3 [/CENTER]

I have http://chetcentre.co.uk/

Using the code

ul.classname {float:left; width:30%;}

<ul class="classname">
	<li>Learning Outside the Classroom</li>
	<li>Forest Schools</li>
	<li>Learning away</li>
	<li>Every Child Matters</li>
</ul>
With outdoor activities designed to:
<ul class="classname">
	<li>Engage</li>
	<li>Educate</li>
	<li>Enable</li>
	<li>Inspire</li>
</ul>
Residential courses:
<ul class="classname">
	<li>Enhance community living</li>
	<li>Enable a child’s social and educational      development</li>
	<li>Release energies and gifts not previously developed</li>
</ul>

I can’t get it inline though… Any ideas?

2

You’re welcome (as always ;)).

3

no worries,

Thanks for helping point out the problem :slight_smile:

4

Yes you are understanding the problem. I don’t do wordpress so I can’t help you much there. If you can’t readjust the HTML, then perhaps just give display:none to them?

5

Right, ok…

I looked at my source code and it gave

<p>CHET works to national agendas:</p> 
<ul class="classname"> 
<li>Learning Outside the Classroom</li> 
<li>Forest Schools</li> 
<li>Learning away</li> 
<li>Every Child Matters</li> 
</ul> 
<p>With outdoor activities designed to:</p>
<ul class="classname"> 
<li>Engage</li> 
<li>Educate</li> 
<li>Enable</li> 
<li>Inspire</li> 
</ul> 
<p>Residential courses:</p> 
<ul class="classname"> 
<li>Enhance community living</li> 
<li>Enable a child’s social and educational  development</li> 
<li>Release energies and gifts not previously developed</li> 
</ul>

So, do you mean it’s these ?

<p>Residential courses:</p> 

<p>With outdoor activities designed to:</p> 

<p>CHET works to national agendas:

That are causing them not to line up?

I have gone into wordpress for this page and in the html section I don’t see the <p> for them. They simply are the way I have described them in my first post so I confused as to how to remove them, if that is the problem as i’m understanding it.

Thanks

6

You have this
<ul>
<p>
<ul>
<p>
<ul>

etc. You want all the <ul>'s on the same line. Not possible unless you have all 3 floated elements consecutive in the HTML :slight_smile:

7

They aren’t all on the same line becuase in between the <ul>'s you have unfloated <p>'s and thus they all can’t be on the same line. Switch up the HTML to have the 3 <ul>'s consecutive in the HTML

8

lost me haha

9

I thought they are floated?

10

According to your code in that post you are only floating the <ul.

Edit-Let me take a look at the site

11

Youwould have to float the <li>'s to get the blocks of text next to each other :slight_smile: