Problem with clear: left;

Question

Problem with clear: left;

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (1 votes)

1

I'm making a web page but when I generate an HTML from a java class, but it generates the code of the description that is out of order (I get it to the right of the whole and it should come out below the image), why is that?

I leave the link to the web: osmarentcars.esy.es, and this is the format of the html:

*{
  margin-bottom: 4px;
  margin-top: 4px;
}

#todo{
  width: 750px;
  height: 100px;
  font-family: "Times New Roman";
  font-size: 14;
  margin: auto;
  padding-bottom: 2px;
  background: transparent;
}

div{
  background-color: #00FFFF;
}

img{
  float: left;
  width: 96px;
  height: 60px;
}

.columna{
  float: left;
  width: 280px;
  padding-left: 5px;
}

.descripcion{
  clear: left;
}

<html>
  <head>
    <title>index.php</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <link href="estilos.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <h1><center>OSMARENTCARS - 2016 PROBANDO...</center></h1>
    <div id="todo">
      <div>
        <div>
          <img src='VEHICULO5.PNG.jpg' width='96px' height='60px'/>
        </div>
        <div class="columna">
          <b>I10</b><br/>
          <b>Precio: 12589.57</b>
        </div>
        <div class="columna" align="center">
          <u>FICHA TECNICA</u><br/> 
          Potencia: 87&nbsp;&nbsp;&nbsp;&nbsp;Consumo: 7.90l
        </div>
        <div class="descripcion">
          Descripcion: Aqui va la descripcion del coche
        </div>
      </div>
    </div>
  </body>
</html>

html css web

asked by omaza1990 02.12.2016 в 19:54

source

3 answers

2

You have a little mess with the layers. You left some wrong closed. I paste here the body for the first two vehicles, put the rest the same:

*{
    margin-bottom: 4px;
    margin-top: 4px;
}


.todo{
    width: 750px;
    height: 100px;
    font-family: "Times New Roman";
    font-size: 14;
    margin: auto;
    padding-bottom: 2px;
    background: transparent;
}


div{
    background-color: #00FFFF;
}


img{
    float: left;
    width: 96px;
    height: 60px;
}


.columna{
    width: 280px;
    padding-left: 5px;
}


.descripcion{
    clear: left;
}

<body>
           <h1><center>COCHES DISPONIBLES PARA VENTA</center></h1>
<div class="todo">
	<div>
		<div><img src="index_files/I10.png" width="96px" height="60px"></div>
		<div class="columna">
			<b>I10</b><br>
			<b>Precio: 12589.57</b>
		</div>
		<div class="columna" align="center">
			<u>FICHA TECNICA</u><br>
			Potencia: 87&nbsp;&nbsp;&nbsp;&nbsp;Consumo: 7.90l
		</div>
		Descripcion: Edición de HYUNDAI del año 2011 para circular en trayectos largos.
	</div>
</div>
<div class="todo">
	<div>
		<div><img src="index_files/JAZZ.png" width="96px" height="60px"></div>
		<div class="columna">
			<b>JAZZ</b><br>
			<b>Precio: 56999.02</b>
		</div>
		<div class="columna" align="center">
			<u>FICHA TECNICA</u><br>
			Potencia: 93&nbsp;&nbsp;&nbsp;&nbsp;Consumo: 8.80l
		</div>
		Descripcion: Monovolumen pequeño con poco consumo de la marca HONDA. Perfecto para familias numerosas.
	</div>
</div>
</body>

Notice that I have changed the style from id todo to class style todo (change the CSS you all ... all). Since you use it more times it seems more correct to me like that.

answered by 02.12.2016 в 20:15

1

Change in the css #all for a class .all

<div class="todo"><div><img src="IMAGENES\JAZZ.png" width="96px" height="60px"></div>

<div class="columna">
<b>JAZZ</b><br>
<b>Precio: 56999.02</b>
</div>

<div class="columna" align="center">
<u>FICHA TECNICA</u><br> Potencia: 93&nbsp;&nbsp;&nbsp;&nbsp;Consumo: 8.80l</div>Descripcion: Monovolumen pequeño con poco consumo de la marca HONDA. Perfecto para familias numerosas.</div>

answered by 02.12.2016 в 20:12

Load view in a modal with Ajax Problem author name in remote repository

score 2 · Accepted Answer

I was editing the question to make the executable code and that the problem was seen, and I have found that it seems to work without problems. It is the code of the external web page that fails because it is different from the shared and you are not using the class that has the clear:left .

In particular, the problem you have is that the description on your page is not in div with class "description" and that's why it fails:

<div id="todo">
  <div>
    <div><img src="IMAGENES\I10.png" width="96px" height="60px"></div>
    <div class="columna">
      <b>I10</b><br>
      <b>Precio: 12589.57</b>
    </div>
    <div class="columna" align="center">
      <u>FICHA TECNICA</u><br> Potencia: 87&nbsp;&nbsp;&nbsp;&nbsp;Consumo: 7.90l
    </div>
    Descripcion: Edición de HYUNDAI del año 2011 para circular en trayectos largos.
  </div>
</div>

If instead you had something like this (which is what you share in the question), it would work:

<div id="todo">
  <div>
    <div><img src="IMAGENES\I10.png" width="96px" height="60px"></div>
    <div class="columna">
      <b>I10</b><br>
      <b>Precio: 12589.57</b>
    </div>
    <div class="columna" align="center">
      <u>FICHA TECNICA</u><br> Potencia: 87&nbsp;&nbsp;&nbsp;&nbsp;Consumo: 7.90l
    </div>
    <div class="descripcion">Descripcion: Edición de HYUNDAI del año 2011 para circular en trayectos largos.</div>
  </div>
</div>

Apart from that, it seems that you are not closing the div well. As you have it now, the div with id "all" only contains the first element, leaving the others outside. What it all looks bad:

<div id="todo">
   <div> AUTO </div>
</div>
<div> AUTO </div>
<div> AUTO </div>

It should be:

<div id="todo">
   <div> AUTO </div>
   <div> AUTO </div>
   <div> AUTO </div>
</div>