Skip to main content
maryanns50585047
Known Participant
Apr 24, 2019 5:47 PM UTC
Answered

Why do my boxes not line up by 3 as anticipated? [un-equal height divs]

Why do my boxes not line up by 3 as anticipated when using <div class="col-sm-4 col-md-4 col-lg-4">???

Also now that I have switched to https, the design side of Dreamweaver page looks all wrong, but uploads correctly...for the most part. Some of the boxes return to next line. How do I fix that?

ALSO- to change or update link?? were did the Image link (that was at the top left of each image div box) go?

Have a look...Here is a link

Jenifer Enterprises for TableAds

This topic is closed to new replies. Start a new post to keep the conversation going.
Nancy OShea
Nancy OSheaCorrect answer
Community Expert
Apr 25, 2019 6:03 PM UTC

This seems to be a bit above my pay grade…

but thanks for your help anyway…

MaryAnn


OK.  As a workaroud, use same sized images.  If all images are the same height, your columns will be too.  

Nancy O'Shea— Product User & Community Expert

6 replies

Nancy OShea
Community Expert
Community Expert
Apr 24, 2019 6:25 PM UTC

Fix your code errors.

You only need to express  columns for one breakpoint, all the rest will be the same.   Keep in mind that 3 columns probably won't fit on small devices.   So in this example there will be 1 column on xs and sm, 3 columns on md, lg, and xlg.

<div class="container">

<div class="row">

<div class="col-md-4">

Something here....

</div>

<div class="col-md-4">

Something here....

</div>

<div class="col-md-4">

Something here....

</div>

</div>

</div>

Translate
Nancy O'Shea— Product User & Community Expert
maryanns50585047
Known Participant
Apr 24, 2019 6:45 PM UTC

that did not help...

Translate
Nancy OShea
Community Expert
Community Expert
Apr 24, 2019 7:01 PM UTC

The problem you're facing can be fixed with equal height columns.

Upgrade to Bootstrap 4 which uses flexbox layouts instead of floats. 

Flexbox supports equal height columns.  See this CodePen for details.

https://codepen.io/ondrejsvestka/pen/gWPpPo

Translate
Nancy O'Shea— Product User & Community Expert