The gutters for some of the containers within the same row are larger than others. I determined that it was the length of the text exceeding the length of sibling containers, thus giving the container a larger gutter. I tried breaking up the text, by either separating it to a second line, and adding the div class=“staff-info” container around the paragraph tags. Neither worked. I tried tweaking the margin and padding for .staff-image, I went from using ems to pixels, and that helped normalized the gutters some, but there are still problems.
I’ll provide a screenshot of what it looks like on my screen.
Is there something incorrect in my code that would be causing the uneven gutters? Is there something I should be adding to my code so that the containers are uniform? I’ve been wracking my brain trying to figure out what it could be that I’m missing, cause I’ve had this problem before, but I think when I encountered it last, it turned out to be a margin or padding issue that I resolved pretty easily.
Hi @Tiffany_Taylor. It looks like the first part of your posted code is not formatted properly so it is not showing up. Could you please add three backticks (`) on the line before your code, and three backticks on the line after the code? Or hightlight the code and select the </> icon from above the text area? Thanks.
I ended up posting it to jsfiddle. I was trying to put four spaces before each line. I didn’t know I could copy the section of code and press the button and it’d do it for me.
What kind of framework or grid system are you using, please? The grid appears to be set up incorrectly in HTML but without knowing what it is, I/we can’t help.
The first row should have three columns, the second “row,” I say this with quotations because it’s basically a section of pictures for six people, and I want it to go to overflow to another row. Technically, there are six columns for that section. The fourth row should have three columns.
I didn’t get a full screenshot because the first row is where the problem appears prominently for me, but I can get one to show the whole grid, if that would help.
So there should br 18 squares visible but your demo only shows 12?
I’m a bit confused because it sounds like you expect the middle row with 6 columns to wrap independently of the top and bottom rows somehow. To do that, it would have to be outside of the grid. I must be misunderstanding. Perhaps a couple or three drawings would help because these boxes of text in the middle row are guaranteed to overflow their containers.
I found another instance where the gutter for one column was different than the others, simply because the text within the container was larger, and it’s a much smaller example.
I’m working on a different page and it’s similar to the IT page where there’s several employee “cards” that ought be in there own section, separate from others.
I used u-size1of12 for these, and I noticed that the gutters stayed even, regardless of the length of text. So, @ronpat said, it looks like the problem might be because I’m writing the HTML for the grid incorrectly. I think I need to play with it some more.
If you have unbroken text then it is likely that your percentage colums will at some point be too small to hold the content that you have inside them.
You either need to hide the overflow or make sure the words break (word-wrap:break-word) so that they don’t spill into another column. This of course won’t affect the way the columns work but it may account for why you think the spacing is different.
I’m not a fan of floated grid layouts as they are fragile at best of times.
I know word-wrap: break-word was something I tried and if I remember correctly, it didn’t work.
When I was staring at the page, I noticed little quirks about the layout with the employee cards, and tried a few things but nothing really seemed to make a difference. I showed the page to my superior and she said to just leave it. It’s more work to try and fix the problem than it’s really worth.
I don’t have a lot of experience implementing a grid layout, but I’ve read probably more than I should about how to implement them. I’m working in an internal site that’s built with vendor software. I can add CSS to pages, but it’s pretty awkward, and the HTML are only snippets (no head, body, etc.). I didn’t like the vendor’s implementation of a grid layout because the naming conventions they used for their CSS would get confusing very fast. I like the “sizeXofY” convention because it’s very specific and leaves less room for confusion when writing the HTML.
But I agree, float-based grid layouts are finicky. I had to add more <div class="u-clearBoth"></div> than I would’ve liked to make the layout flow better. I may look at something different when this project is finished…
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.col33{
width:33%;
background:red;
word-wrap:break-word;
}
</style>
</head>
<body>
<div class="col33">
<p>A sentence that may contain an unbroken word such as a <a href="#">longemailaddresswithmyname@btinternet.com</a> that may poke out if not broken.</p>
</div>
</body>
</html>
There are issues in some browsers in table-cells but for general use it should work ok.
If you can put up another demo of the grid you are having trouble with it will help us to troubleshoot more easily as your earlier snippets above don’t seem to exhibit the problems you mention.
My apologies for the late response, the project I was working on that the problem I was encountering went live last week. My superior determined to not waste the time trying to fix it, since I had about a half dozen other things I had to complete to be ready for the project’s launch. (On a good note, it went smoothly, that’s a rarity. )
There’s a possibility that the vendor’s code that surrounds my code may be interfering, and I was not including it in my examples because it’s messy. I’ll make a reminder to get a code example of one of the problematic pages with the vendor’s HTML surrounding my code and post it in this thread.
