float:center problami con firefox

**pegaso22** · 28-10-2014, 19:22

Ciao a tutti,
float: center non va in firefox, giusto?

Come posso risolvere il problema?

Fatemi sapere.

Grazie mille.

**Prill** · 28-10-2014, 19:31

i css non prevedono un float:center e perciò l'istruzione non funziona con firefox né con tutti gli altri browser. Puoi far flottare a sinistra anche l'elemento centrale; oppure fai flottare a sinistra il primo box, a destra il terzo e non inserisci alcun float per il secondo che avrà un margine sinistro pari alla larghezza del primo e un margine destro pari alla larghezza del terzo e tenderà a risalire da sé

**pegaso22** · 28-10-2014, 19:42

Grazie per la risposta.
Non avendo misure fisse ma in percentuale per l'elemento centrale, come posso impostare il tutto?

**Prill** · 28-10-2014, 20:08

esempio minimo:

codice:

<style type="text/css">
#columns {
     width:auto;
}
#left {
    float: left;
    width:15%;
    height:100px; background-color:#00CC00
}
#right {
    float:right;
    width:15%;
    height:100px; background-color: #FF99CC
}

#center {
    width:auto;
    margin: 0 15%;
    height:100px; background-color: #FF3333
}
</style>
</head>

<body>
<div id="columns">
     <div id="left">sinistro</div>
     <div id="right">destro</div>
     <div id="center">centro</div>
</div>

ma con le dimensioni in percentuale occorre sempre particolare attenzione, e sarà necessario anche impostare delle larghezze minime (sulle colonne e sul contenitore) in base ai contenuti (se una colonna ad esempio ospita un'immagine di dimensioni fisse è evidente che la colonna non potrà restringersi al di sotto di quella dimensione e in assenza di un min-width si genererà un accapo del box

**pegaso22** · 28-10-2014, 20:05

Ho questo codice ma non riesco proprio a fare ciò che voglio:

codice:

#page-wrap { width: 100%; position: relative; }


#searchfieldsinistra {
	float: left;
	width: 20%;
	background-color: #ff0000;
	margin: 0px;
	padding: 0px;
}


#searchfielddestra {
	float: right;
	width: 20%;
	background-color: #000000;
	margin: 0px;
	padding: 0px;
}
		
#searchfield {
	width: 60%;
	margin: 20px 0px 0px 0px;
	padding: 0px;
	background-color: #ffdd22;
}


#searchfield form .biginput {
  position: absolute;
  height: 30px;
  width: 60%;
  padding: 0px;
  margin: 0px;
  border: 1px solid #c8c8c8;
  color: #5E5E5E;
  font-weight:normal;
  font-size: 13px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

page-wrap = div principale
searchfieldsinistra = parte di sinistra
searchfielddestra = parte di destra
searchfield = parte che dovrebbe stare al centro
searchfield form .biginput = un campo input che sta dentro la parte centrale

**Prill** · 28-10-2014, 20:10

mentre scrivevo la mia risposta avevi inserito altro post.

Attenzione che margini e padding e bordi vanno conteggiati nella larghezza (meglio impostarli dunque negli elementi interni ai div flottanti)

**pegaso22** · 28-10-2014, 20:35

scusami ma non capisco:

codice:

margin:0 15%;

**pegaso22** · 28-10-2014, 20:30

Perfetto, ho visto il tuo esempio, ci lavoro un po su per adattarlo e soprattutto per capire il funzionamento.

Grazie mille, gentilissimo!!

**pegaso22** · 28-10-2014, 20:44

Ti posto il mio codice modificato, seguendo ciò che mi hai indicato.
Praticamente il campo input dentro il form non occupa il 100% e viene spostato decisamente sulla destra.

codice:

#columns {
     width:auto;
}


#left {
    float: left;
    width:15%;
}
#right {
    float:right;
    width:15%;
}


#center {
    width:auto;
    margin: 20px 15% 0px 15%;
	text-align: center;
}


#center form .biginput {
  position: absolute;
  height: 30px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  border: 1px solid #c8c8c8;
  color: #5E5E5E;
  font-weight:normal;
  font-size: 13px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

codice:

	<div id="columns">
		<div id="left">sinistra</div>
		<div id="right">destra</div>
		<div id="center">
			<form><input type="text" placeholder="Dove vuoi andare?" name="currency" class="biginput" id="tags"></form>
		</div>
	</div>

Cosa sbaglio?
Scusami, sono agli inizi con impaginazioni CSS quindi sicuramente posto problemi abbastanza banali.

**Prill** · 28-10-2014, 21:09

modifica il css aggiungendo un position:relative per il form e un display:block per l'input:

codice:

#center form  {
  position: relative; 
}

#center form .biginput {
  display:block;

Discussione: float:center problami con firefox

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

float:center problami con firefox

Permessi di invio