Centered horizontally are images that have been floated

Question

Centered horizontally are images that have been floated

How can I align images with different widths when they are all floated right? I want them to be aligned vertically below each other.

For the best display, please view in fullscreen on your computer as the example window is small.

.compressor{
height: 150px;
float: right;
}

<div>

<a href="../photos/ESM250.gif" rel=lightbox[compressor1] data-title="Gardner Denver ESM250 compressor"><img src="http://matmasar.wz.cz/fotky/ESM250.gif" title="Gardner Denver ESM250 compressor" alt="Gardner Denver ESM250 compressor" class="compressor"></a>
-Screw compressors system load - unload, type <b>ESM 2-500</b>
<ul>
<li>Constant motor speed</li>
<li>Delivery volume: 0.24 - 73.60 m<sup>3</sup> /min</li>
<li>Output pressure: 5 - 13 bar</li>
<li>Power up to 500kW</li>
</ul>
</div>


<div>
-Screw compressors with frequency converter, type <b>VS7 - VS290</b>
<a href="../photos/GD_VS7.gif" rel=lightbox[compressor2] data-title="Gardner Denver VS7 compressor"><img src="http://matmasar.wz.cz/photos/GD_VS7.gif" title="Gardner Denver VS7 compressor" alt="Gardner Denver VS7 compressor" class="compressor"></a>
<ul>
<li>Variable motor speed = higher operational efficiency</li>
<li>Delivery volume: 0.41 - 42.30 m<sup>3</sup> /min</li>
<li>Output pressure: 5 - 13 bar</li>
<li>Power up to 290kW</li>
</ul>
</div>


<div>
-Oil-free screw compressors series <b>Ultima U75 - 160 PureAir</b>
<a href="../photos/UltimaU75-160_PureAir.gif" rel=lightbox[compressor3] data-title="Gardner Denver Ultima U75-U160 compressor"><img src="http://matmasar.wz.cz/photos/UltimaU75-160_PureAir.gif" title="Gardner Denver Ultima U75-U160 compressor" alt="Gardner Denver Ultima U75-U160 compressor" class="compressor"></a>
<ul>
<li>Unique design - high efficiency, low noise</li>
<li>Variable motor speed</li>
<li>100% oil-free air, ISO 8573-1 Class Zero (2010) compliant</li>
<li>Power up to 160kW</li>
</ul>
</div>

html css css-float

Answer 1

Answer №1

When utilizing the float property, the floating element does not affect the height of its parent element. The following <div> cannot utilize the full width because it is not completely positioned below the floated image from the previous <div>. In order to ensure that it starts fully below all float elements, you must apply clear: both;. I have made adjustments to your example code to illustrate this:

.kompresor{
height: 150px;
float: right;
}
.clear-both {
  clear: both;
}

<div>

<a href="../fotky/ESM250.gif" rel=lightbox[kompresor1] data-title="kompresor Gardner Denver ESM250"><img src="http://matmasar.wz.cz/fotky/ESM250.gif" title="kompresor Gardner Denver ESM250" alt="kompresor Gardner Denver ESM250" class="kompresor"></a>
-Mazné šroubové kompresory systém zatíženo – odlehčeno, typ <b>ESM 2 -500</b>
<ul>
<li>Stálá rychlost motoru</li>
<li>Dodávaný objem: 0,24 – 73,60 m<sup>3</sup> /min</li>
<li>Výstupní tlak: 5 - 13 bar</li>
<li>Výkon až 500kW</li>
</ul>
</div>


<div class="clear-both">
-Mazné šroubové kompresory s frekvenčním měničem, typ <b>VS7 – VS290</b>
<a href="../fotky/GD_VS7.gif" rel=lightbox[kompresor2] data-title="kompresor Gardner Denver VS7"><img src="http://matmasar.wz.cz/fotky/GD_VS7.gif" title="kompresor Gardner Denver VS7" alt="kompresor Gardner Denver VS7" class="kompresor"></a>
<ul>
<li>Proměná rychlost motoru = vyšší efektivita provozu</li>
<li>Dodávaný objem: 0,41 – 42,30 m<sup>3</sup> /min</li>
<li>Výstupní tlak: 5 - 13 bar</li>
<li>Výkon až 290kW</li>
</ul>
</div>


<div class="clear-both">
-Bezmazné šroubové kompresory řady <b>Ultima U75 – 160 PureAir</b>
<a href="../fotky/Ultima U75-160_PureAir.gif" rel=lightbox[kompresor3] data-title="kompresor Gardner Denver Ultima U75-U160"><img src="http://matmasar.wz.cz/fotky/Ultima U75-160_PureAir.gif" title="kompresor Gardner Denver Ultima U75-U160" alt="kompresor Gardner Denver Ultima U75-U160" class="kompresor"></a>
<ul>
<li>Jedinečný design – vysoká efektivita, nízký hluk</li>
<li>Proměná rychlost motoru</li>
<li>100% čistý vzduch bez oleje, splňuje ISO 8573-1 Class Zero (2010)</li>
<li>Výkon až 160kW</li>
</ul>
</div>

Answer 2

When utilizing the float property, the floating element does not affect the height of its parent element. The following <div> cannot utilize the full width because it is not completely positioned below the floated image from the previous <div>. In order to ensure that it starts fully below all float elements, you must apply clear: both;. I have made adjustments to your example code to illustrate this:

.kompresor{
height: 150px;
float: right;
}
.clear-both {
  clear: both;
}

<div>

<a href="../fotky/ESM250.gif" rel=lightbox[kompresor1] data-title="kompresor Gardner Denver ESM250"><img src="http://matmasar.wz.cz/fotky/ESM250.gif" title="kompresor Gardner Denver ESM250" alt="kompresor Gardner Denver ESM250" class="kompresor"></a>
-Mazné šroubové kompresory systém zatíženo – odlehčeno, typ <b>ESM 2 -500</b>
<ul>
<li>Stálá rychlost motoru</li>
<li>Dodávaný objem: 0,24 – 73,60 m<sup>3</sup> /min</li>
<li>Výstupní tlak: 5 - 13 bar</li>
<li>Výkon až 500kW</li>
</ul>
</div>


<div class="clear-both">
-Mazné šroubové kompresory s frekvenčním měničem, typ <b>VS7 – VS290</b>
<a href="../fotky/GD_VS7.gif" rel=lightbox[kompresor2] data-title="kompresor Gardner Denver VS7"><img src="http://matmasar.wz.cz/fotky/GD_VS7.gif" title="kompresor Gardner Denver VS7" alt="kompresor Gardner Denver VS7" class="kompresor"></a>
<ul>
<li>Proměná rychlost motoru = vyšší efektivita provozu</li>
<li>Dodávaný objem: 0,41 – 42,30 m<sup>3</sup> /min</li>
<li>Výstupní tlak: 5 - 13 bar</li>
<li>Výkon až 290kW</li>
</ul>
</div>


<div class="clear-both">
-Bezmazné šroubové kompresory řady <b>Ultima U75 – 160 PureAir</b>
<a href="../fotky/Ultima U75-160_PureAir.gif" rel=lightbox[kompresor3] data-title="kompresor Gardner Denver Ultima U75-U160"><img src="http://matmasar.wz.cz/fotky/Ultima U75-160_PureAir.gif" title="kompresor Gardner Denver Ultima U75-U160" alt="kompresor Gardner Denver Ultima U75-U160" class="kompresor"></a>
<ul>
<li>Jedinečný design – vysoká efektivita, nízký hluk</li>
<li>Proměná rychlost motoru</li>
<li>100% čistý vzduch bez oleje, splňuje ISO 8573-1 Class Zero (2010)</li>
<li>Výkon až 160kW</li>
</ul>
</div>

Answer 3

Answer №2

To achieve a centered column layout with images on the right side of text, you can implement the following HTML markup and CSS styling.

(1) Start by adding a wrapper div.table-wrap element with a property of display: table.

(2) Set display: table-row for the child div elements inside the wrapper.

(3) Place the top line of text (title) as the first item (li) in a ul block, give it the class title, and style it accordingly. Position the a element after the ul block.

(4) Apply display: table-cell to both the ul and a elements, using vertical-align: top and text-align: center for the a element.

(5) Fine-tune the margins and padding to optimize white space distribution.

The wrapper styled with display: table facilitates centering the images in a CSS-table column. You can also choose to center the entire table if needed.

This layout offers decent responsiveness and allows control over spacing through margin and padding adjustments.

div.table-wrap {
  display: table;
  width: auto;
  margin: 0 auto; /* Optional: center the table/panels */
}

div.table-wrap div {
  display: table-row;
}

div.table-wrap ul {
  display: table-cell;
  vertical-align: top;
  margin: 0;
  padding: 0;
}

div.table-wrap ul li {
  margin-left: 20px;
}

div.table-wrap ul li.title {
  list-style: none;
  font-size: 1.00em;
  margin: 0 0 10px 0;
}

div.table-wrap a {
  display: table-cell;
  vertical-align: top;
  text-align: center;
}

div.table-wrap a img {
  height: 175px;
  padding-left: 20px;
}

div.table-wrap ul,
div.table-wrap a {
  padding-bottom: 10px; /* Affects row/panel spacing */
}

<div class="table-wrap">
  <div>
    <ul>
      <li class="title">- Lubricated screw compressors, load-unload system, type <b>ESM 2 -500</b></li>
      <li>Constant motor speed</li>
      <li>Discharge volume: 0.24 – 73.60 m<sup>3</sup>/min</li>
      <li>Output pressure: 5 - 13 bar</li>
      <li>Power up to 500kW</li>
    </ul>
    <a href="../photos/ESM250.gif" rel=lightbox[compressor1] data-title="Gardner Denver ESM250 compressor"><img src="http://example.com/photos/ESM250.gif" title="Gardner Denver ESM250 compressor" alt="Gardner Denver ESM250 compressor" class="compressor"></a>
  </div>
  <div>
    <ul>
      <li class="title">- Lubricated screw compressors with frequency converter, type <b>VS7 – VS290</b></li>
      <li>Variable motor speed = increased operational efficiency</li>
      <li>Discharge volume: 0.41 – 42.30 m<sup>3</sup>/min</li>
      <li>Output pressure: 5 - 13 bar</li>
      <li>Power up to 290kW</li>
    </ul>
    <a href="../photos/GD_VS7.gif" rel=lightbox[compressor2] data-title="Gardner Denver VS7 compressor"><img src="http://example.com/photos/GD_VS7.gif" title="Gardner Denver VS7 compressor" alt="Gardner Denver VS7 compressor" class="compressor"></a>
  </div>
  <div>
    <ul>
      <li class="title">- Oil-free screw compressors series <b>Ultima U75 – 160 PureAir</b></li>
      <li>Unique design – high efficiency, low noise</li>
      <li>Variable motor speed</li>
      <li>100% oil-free air, compliant with ISO 8573-1 Class Zero (2010)</li>
      <li>Power up to 160kW</li>
    </ul>
    <a href="../photos/Ultima_U75160_PureAir.gif" rel=lightbox[compressor3] data-title="Gardner Denver Ultima U75-U160 compressor"><img src="http://example.com/photos/Ultima_U75160_PureAir.gif" title="Gardner Denver Ultima U75-U160 compressor" alt="Gardner Denver Ultima U75-U160 compressor" class="compressor"></a>
  </div>
</div>

Answer 4