0

I have two divs side by side inside a wrapper div. In the left column, there is an image with a title above. In the right column, there is a number of links. The links div has some top padding to align text of first link with image in left column. But when screen size changes, the image title over the image inside left column breaks into two lines. When this happens the text on right div is not aligned with the image anymore. I'm lost here as I'm trying to solve this with css. Any ideas?

What I want is to align text in right div with image in left div no matter how many lines it takes to print the tile.

.wrapper 
{
width: 90%;
margin: auto;
background: #fff;
display:flex;
}
.col1 
{
width: 48%;
background: #ccc;
float: left;
overflow: hidden;
}
img.col1 {
 width: 100%;
 height: auto;
}
.col2 
{
width: 49%;
margin-left: 1em;
background: #000;
float: right;
color:white;
}
.text 
{
 padding-top: 59px;
}
.yellow {
 color: #ccc;
 font-weight: 600;
 clear:both;
 font-family: arial;
 
}
<div class="main">
<div class="wrapper">
<div class="col1"><h4>Lorem ipsum dolor sit amet consect</h4><a href="/index.php/cine/item/100007-manual-para-criticos-intensos-de-cine-sobre-holy-motors"><img src="https://www.elnuevocojo.com/modules/mod_news_pro_gk4/cache/k2.items.cache.633464537f5b069fc4760ed3327b136c_Lnewspro1.jpg"></a>
</div>
<div class="col2">
<div class="text">
<span class="yellow">This text is aligned with image, but when viewport gets smaller and image title takes two lines, text is not aligned anymore.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
LizardKG
  • 421
  • 1
  • 4
  • 10
  • This is not currently possible in CSS without experimental properties. There is NO CSS mechanism to equalise elements that do not share a parent element. - See https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks – Paulie_D Sep 03 '19 at 14:24

1 Answers1

1

Well if you cannot change the HTML structure one solution would be: Add a <h4> with the same content to the col2 with the same content as the one from col1. I don;t know if that is feasible for you. Let me know and i can find another solution ( hopefully )

Also, do not use float just take advantage of flexbox

See below

.wrapper {
  width: 90%;
  margin: auto;
  background: #fff;
  display: flex;
}

.col1 {
  background: #ccc;
  overflow: hidden;
}

img.col1 {
  width: 100%;
  height: auto;
}

.col {
  flex: 0 0 calc(50% - 0.5em);
}

.col2 {
  background: #000;
  color: white;
  margin-left: 1em;
}
.col2 h4 {
  visibility:hidden;
}
.text {
  
}

.yellow {
  color: #ccc;
  font-weight: 600;
  clear: both;
  font-family: arial;

}
<div class="main">
  <div class="wrapper">
    <div class="col1 col">
      <h4>Lorem ipsum dolor sit amet consect</h4><a href="/index.php/cine/item/100007-manual-para-criticos-intensos-de-cine-sobre-holy-motors"><img src="https://www.elnuevocojo.com/modules/mod_news_pro_gk4/cache/k2.items.cache.633464537f5b069fc4760ed3327b136c_Lnewspro1.jpg"></a>
    </div>
    <div class="col2 col">
      <div class="text">
       <h4>Lorem ipsum dolor sit amet consect</h4>
        <span class="yellow">This text is aligned with image, but when viewport gets smaller and image title takes two lines, text is not aligned anymore.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</div>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • This answered my question perfectly, @mihai-t. It keeps links in column2 aligned with the image in column1. Two more issues became evident from fixing this, though. First is that I assumed that changing the screen size was the problem, in reality is the title lenght. Whenever the title takes two lines the links misalign again. The other problem, and this might be for another question, is the image. As the screen size diminishes, the links column grows longer than the image column. Can flex be used to make the image grow with the container as the links increase the height? – LizardKG Sep 04 '19 at 04:25
  • 1
    @LizardKG Yes. I guess it can be done. If this question answered your question, please rate it as accepted and post another question. Also, after you post another question write there the link to it so i will try to answer it. – Mihai T Sep 04 '19 at 07:34