Streaming live at 10am (PST)

Creating a document-looking website, border issues


#1

Hey All,

I'm working on a site where I'm trying to get the feel of an official looking type of document. I have it almost great for standard desktops. The mobile views are far from nice, so will have to make completely separate design for that format.

I have noted that I have one middle border issue. The problem is that the border doens't actually go the whole height of the column.

Currently I have the 'middle' border set to the 'right' side of the first column. I suppose I could set it to the 'left side of the second' column but it does seem strange that it's not going full height despite another column making the whole row taller.

I could try to play with padding, remove it from the column, add it to the text element.

Here is the current live view: http://05file.webflow.io/


Here is my public share link: LINK


#2

Hi @DragonDon, would it be possible to share a screenshot of how the border looks improperly, and the column where the border is used?

Thanks in advance!


#3

Hi @cyberdave

Sure, I'll even leave it 'broken' for you to check out in the public shared link above. (I've created a class to add spacing, which mitigates this issue, so I can just add it back at any point).

You can see in the 'Complaint for Violation" section. This also happens in the "The 05 File v Terrorism" but I've added space there.


#4

It's because the left column has content that doesn't have the same padding added. On the right column, your text block has 25px padding on the top and bottom. If you add that to the text block on the left, it fixes it.
I made a video for you: http://quick.as/wpzqtnzP4


#5

That means columns will always be different heights based on contents within columns? I would not expect a column 'border' to be only the height of the content within it but the same height as the whole row.

Now, that particular row is where I added padding to make it bigger. I then removed the class(which added the padding) to show what I mean. So it seems my example only showed you what I already 'fixed'. Let me go back to the original section that gave me the initial problem.

This one is out of whack because the content in the second column is more than the first column. It would seem to be a rather large shortcoming in HTML/Webflow if a border doesn't go full-height of a row just because of the content. (I've not published this content, so this will only show in the editor)


#6

This is a shortcoming of html/css pertaining to rows, not Webflow. Flexbox can do exactly this, changing div heights based on the height of the tallest. I am still learning flexbox but I suggest you check out the guide https://help.webflow.com/article/the-flexbox-guide

Particularly this section:
Aligning multiple rows inside a flex container

Here are your options for aligning multiple rows of content within a flex container:

Start: rows are set toward the top of the container
Center: rows are vertically centered inside the container
End: rows are set toward the bottom of the container
Stretch: rows stretch to fill empty vertical space

Can anyone more familiar with flexbox chime in? @sabanna @samliew @vincent


#7

@dragondon kudos for the in-field label form, I love those, I made one available for anyone to grab: https://webflow.com/website/Infield-Label-Form-Template

I'm on the move at the moment so I can't have a close look at your issue, but I'm sure there are many ways to achieve it.

You should keep in mind that HTML isn't magic, it can only expand elements with a 100% dimension value if they know the dimension of their parents... So at a moment something has to have a defined dimension, for HTML to have a reference. And the "everything be as tall as the tallest sibling" is always problematic, if the parents are in fact dimensioned by said tallest sibling. As weird as it is, float properties sometimes solve this equation.

That's why we were all waiting for Flexbox! Because with Flexbox all of those difficult layouts, alignments and distributions issues are going to be non existent.

So the easiest and most powerful way to achieve what you need would be using Flexbox as @DFink wisely suggested. I bilieve that if you take the time to beat the FLEXBOX GAME then you'll be in good position to make your form work with Flexbox.

https://webflow.com/website/Infield-Label-Form-Template


#8

Thanks @vincentand @DFink. You guys are awesome.

I've been playing around with FlexBox and have been able to replicate the basic page (located here http://05file.webflow.io/home-copy). So now I'll have to figure out how to adjust it properly for different sizes.

I have another q but that will be for another thread :slightly_smiling:


#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.