O logotipo CSS muda de posição quando o comprimento do texto aumenta
Pergunta
Este é meu código que está funcionando bem, mas quando mudo meu headline2text para "Preço de venda $ 25.Este é um texto de exemplo.US$ 244", então a imagem do logotipo automático muda de posição.Não quero que o logotipo mude de posição, mas deve permanecer no seu lugar e não deve ser afetado pelo título2Txt.Como consertar este problema?
<div id="wrapper">
<div id="mainContainer">
<p class="copyrights" id="copyrights"></p>
<div>
<img id="Image_Car" src="http://i.share.pho.to/25a090ef_c.png" />
</div>
<div id="headlineText">
<p id="headline1Txt" >Sample bag1</p>
<p id="headline2Txt" >Sale Price $25 </p>
</div>
<div id="disclaimer" >
Details*
</div>
<div id="Image_logo">
<img id="Imglogo" src="http://i.share.pho.to/93578bd4_o.png" />
</div>
<div >
<button class="btn btn-primary" type="button" id="ctaBtn"><div id="fadeIn" > Learn More Now </div></button>
</div>
</div>
#Image_logo img
{
position:relative;
width:140px;
height:30px;
top:-3px;
left:390px;
}
</div>
Solução
Você tem position: relative;
sobre #Image_logotipo img ainda assim você tenta posicioná-lo da "maneira absoluta".Tente alterar seu CSS assim:
#Image_logo img {
position:absolute;
width:140px;
height:30px;
top:40px;
left:390px;
}
Outras dicas
Posso não entender o que você está perguntando, mas acho que a falta de uma bóia está atrapalhando você.Adicionando algum css como este ..
<style>
#Image_logo img {
width:140px;
height:30px;
}
#wrapper {
float:left;
}
</style>
...Deveria trabalhar.Deve estar em um arquivo .css separado, é claro.
Tente fornecer sua posição img #Image_logo:absoluto em vez de relativo e, em seguida, modifique o topo, a esquerda etc.Então deveria estar sempre no mesmo lugar;