Quantcast

How do you handle situations like this?

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

How do you handle situations like this?

Tom Livingston
Listers,

I have a content module. A div containing text above a flexible-width
video (could easily be an image too).

I have 2 of these on a web page. They stack on narrow widths, and go
side-by-side at wide enough widths. They have different amounts of
text in each. I will inevitably be asked to make the videos line up
with each other when these modules appear side-by side. I started down
the path of a min-width on the parent and positioned the videos
absolute bottom:0; This presents it's own issues and is finicky.

Any other ideas? I think I am in a 'forest for the trees' situation
here and can't see another easy solution.

TIA


--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How do you handle situations like this?

Tom Livingston
Correction:

Sorry, that should have said I started down the path of *min-height*
not min-width.





On Thu, May 18, 2017 at 3:49 PM, Tom Livingston <[hidden email]> wrote:

> Listers,
>
> I have a content module. A div containing text above a flexible-width
> video (could easily be an image too).
>
> I have 2 of these on a web page. They stack on narrow widths, and go
> side-by-side at wide enough widths. They have different amounts of
> text in each. I will inevitably be asked to make the videos line up
> with each other when these modules appear side-by side. I started down
> the path of a min-width on the parent and positioned the videos
> absolute bottom:0; This presents it's own issues and is finicky.
>
> Any other ideas? I think I am in a 'forest for the trees' situation
> here and can't see another easy solution.
>
> TIA


--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How do you handle situations like this?

Tom Livingston
In reply to this post by Tom Livingston
I'll have to whip up a test page. Can't share the real page.

On Thu, May 18, 2017 at 4:46 PM, Karl DeSaulniers <[hidden email]> wrote:
> Not without a link.
>
> Best,
> Karl
>
> Sent from losPhone
>



--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How do you handle situations like this?

Philippe Wittenbergh
In reply to this post by Tom Livingston

> On May 19, 2017, at 4:49 AM, Tom Livingston <[hidden email]> wrote:
>
> I have a content module. A div containing text above a flexible-width
> video (could easily be an image too).
>
> I have 2 of these on a web page. They stack on narrow widths, and go
> side-by-side at wide enough widths. They have different amounts of
> text in each. I will inevitably be asked to make the videos line up
> with each other when these modules appear side-by side. I started down
> the path of a min-width on the parent and positioned the videos
> absolute bottom:0; This presents it's own issues and is finicky.
>
> Any other ideas? I think I am in a 'forest for the trees' situation
> here and can't see another easy solution.


Flexbox?

<div class=wrapper style=display:flex>
  <div class=module style=flex-basis:50%; display:flex; flex-flow: column>
    <div> text text text</div>
    <div> video </div>
  </div>
  <div class=module style=flex-basis:50%>
    <div> text text text</div>
    <div> video </div>
  </div>
</div>

The trick then to align the videos at the bottom: .module > div + div { margin-top: auto}

It is a situation where display: grid **with display: subgrid ** support would be nice. Unfortunately, that is a no-go for the next 2 years.

Assuming I understand it all correctly…

PS - Something similar, images of various sizes, caption, to give you some idea.
https://emps.l-c-n.com/category/image/sand-reflections/

Philippe
--
Philippe Wittenbergh
https://l-c-n.com/






______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Loading...