Row has negative margins

In trying out Webflow, one thing I encountered is that the rows have a negative margin beyond the container border. I understand this is likely so that containers with rows can still stretch to the edge, but it has made something simple I want to do confusing.

I need to put 2 columns inside a container and have one column have a background colour. However, when I do this the column juts out of the container, so it does not line up with containers above and below.

How do I get the columns to end in line with the container? I have tried adjusting the margins of the row (it’s not adjustable for the columns) and this has no effect.

Thanks - Julie

2 Likes

Yeah that’s the drawback with the framework that the grid system is built on (based on Bootstrap 3.0). What you can do is drop a Div Block inside the column and style that instead of the column.

Let me know if that works!

I tried that, the problem now is that the div ends higher that the one to the right, so the entire column isn’t filled with colour.

I realize a workaround is to use the display as table option, but this does not seem to be available. Any suggestions you have would be appreciated.

Thanks!

How does the div end up being higher? Is there more content in the left column? Can you share your public link or subdomain so I can see exactly what you’re running into?

i’m not at liberty to share the link, but can explain.

I have a container, which has the grid row with the negative margin and in the righ row I added a div that has the background colour. The row on the left has lots of content, so it expands by about 800 px in height. The div on the right has less content, so naturally extends about 400px, at which point we no longer see the bgcolor.

I know display: table/table-cell can be used as one solution that’s pretty fast / easy to implement.

Are you trying to make the two columns the same heights even though they have different contents inside?

Are you trying to achieve something like this: http://codepen.io/kadelka/pen/hBatA

Yes, that’s exactly what I’m trying to do and we would normally use the table display property for that.

Hi, you can probably do this also with a little simple jquery code in your site:

$(document).ready(function () {
var highestCol = Math.max($('#leftColumn').height(),$('#rightColumn').height());
$('.elements').height(highestCol);});      

And this code above is checking height of tallest column and making all columns you have specified by id into same height columns on document ready. The solution that @thesergie has seems to work also :wink:

Cheers!

We currently don’t have those “table” display settings in Webflow but we hope to add them in the future. For now you’ll have to work around it by creating layouts using margin/padding.

It is very bothersome that we can’t change the margins for the row. At least indicate that in the inspector by having red, disabled margins. I tried changing them for quite some time thinking it was a bug.

Please provide us with more flexible columns on the next big update, and “table” and “table-cell” display properties.

1 Like

Finally figured this out myself too - thought it was a bug. Guess I have to recreate ALL my columns using divs (and much of my site is a column & container grid layout). Joy.