Alinhamento UL LI

[h4v3st 1]

Boa tarde, estou apanhando aqui para alinhar 3 listas da seguinte forma.

 

LISTA-ESQUERDA IMAGEM-NO-CENTRO LISTA-DIREITA

LISTA-EMBAIXO-DA-IMG

 

Meu html está assim:

 

<div id="localizacao">
					<div class="titulo_pagina">Onde estamos ?</div>
					<ul class="local_esq">
						<li>
							<p class="borda_localizacao">Distribuidora Rio Branco</p>
							<p>Av. Rio Grande, 5000</p>
							<p>Distrito Industrial III</p>
							<p>Uberaba-MG</p>
							<p>+ 34 3336-5394</p>
						</li>	
						<li>
							<p class="borda_localizacao">Escritório Administrativo</p>
							<p>R. Dr. José Ferreira, 197</p>
							<p>Jd. Alexandre Campos</p>
							<p>Uberaba-MG</p>
							<p>+ 34 3322-2836</p>
						</li>
						<li>
							<p class="borda_localizacao">Escritório Araxá</p>
							<p>Av. Senador Montandon, 999</p>
							<p>Centro</p>
							<p>Araxá-MG</p>
							<p>+ 34 3661-8077</p>
						</li>	
					</ul>
					<ul class="local_dir">
						<li>
							<p class="borda_localizacao">Filial Uberlândia</p>
							<p>Rua do Prata, 1443</p>
							<p>Chácaras Bonanza</p>
							<p>Uberlândia-MG</p>
							<p>+ 34 3225-0149</p>
						</li>	
						<li>
							<p class="borda_localizacao">Filial Senador Canedo</p>
							<p>Rua Niteroí com Copacabana, S/N</p>
							<p>Condomínio Pool Petroball</p>
							<p>Senador Canedo - GO</p>
							<p>+ 34 3512-2363</p>
						</li>
						<li>
							<p class="borda_localizacao">Filial Betim</p>
							<p>Av. Senador Montandon, 999</p>
							<p>Centro</p>
							<p>Araxá-MG</p>
							<p>+ 34 3661-8077</p>
						</li>	
					</ul>
					<img src="img/MAPA.png" class="mapa_localizacao" alt="Área de atuação." />
					<ul class="local_bottom">
						<li>
							<p class="borda_localizacao">Rio Branco Logística</p>
							<p>Rua Cézar Boareto, 343</p>
							<p>Bairro Pq. das Gameleiras</p>
							<p>Uberaba - MG</p>
							<p>+ 34 3336-4397</p>
						</li>	
						<li>
							<p class="borda_localizacao">Rio Branco Derivados</p>
							<p>Rio Grande, 5000</p>
							<p>Distrito Industrial III</p>
							<p>Uberaba - MG</p>
							<p>+ 34 3336-5394</p>
						</li>
						<li>
							<p class="borda_localizacao">Rio Branco Derivados</p>
							<p>Rua Antônio Joaquim de Miranda, 43</p>
							<p>Planalto</p>
							<p>Patos de Minas - MG</p>
							<p>+ 34 3814-2882</p>
						</li>
						<li>
							<p class="borda_localizacao">Filial Paulínia</p>
							<p>Rua Hum, 125  Sala 04</p>
							<p>Bairro Cascata</p>
							<p>Paulínia - SP</p>
							<p>+ 34 3933-2868</p>
						</li>	
					</ul>
					
				</div>

Utilizo float pra esquerda e direita nas listas laterais, mas a lista pra ficar embaixo da imagem, ela nao fica. E ainda deve estar oo display: inline para mostrá-la na horizontal.

 

Obrigado desde já!

[William Bruno 1501]

Como está o CSS?

você definiu width para as listas ?

[h4v3st 1]

William, defini apelas float e o display inline,

 

.local_esq {
	float:left;
}
.local_dir {
	float:right;
}
.local_bottom {
	display:inline;
	list-style-type:none;
	clear:both;
}

[William Bruno 1501]

Precisa definir tb, como eu disse, uma largura fixa em px (width)

você pode jogar a terceira lista para baixo da imagem, usando margin-left, da mesma grandeza da primeira lista da esquerda.

 

o display: inline; é desnecessário ai, pelo teu 'desenho'..

Se tiver um link, ficaria mais fácil, pois até agora só tô imaginando como você queria, e como ficou.

[Henrique Barcelos 290]

Também é bom usar o CSS Reset:

* {
	margin: 0;
	padding: 0;
}