Is this happing with every content area and block? Because this seems like the UI issue, your floats are not clear.

See this document, if it helps let me know

https://www.w3schools.com/howto/howto_css_clearfix.asp

Or you can take help of any UI developer.

Hi Robert,

Can you please mention the Episerver version here?

Version is 11.12.0.0.
Also i'd like to add that my properties are rendering like they should with the border around them (using propertyfor), all of them. It's only an issue with content areas

EDIT: More pictures 

Using @Html.PropertyFor() - Working perfectly

Blocks inside a content area

Do a inspect eliment and see the css for the elements for the blue border. It may be like any custom css overwriting the default or the floating issue.

The problem occurs when i add any column classes (materialize classes). If i remove the classes from the following code it works:

@model TextBlock

@Html.PropertyFor(m => m.Text, new { CssClass = "col m4 s12" })

Same with this one:

@model ImageBlock

<div class="col m8 s12" @Html.EditAttributes(m => m.Image)>
    <img src="@Url.ContentUrl(Model.Image)" style="width:100%;" />
</div>

I'm using materialize to structure my HTML. It's a school assignment and i don't want to spend my time writing custom CSS. What do i do?

So the col class adds the float and you need to clear the float or try adding row class on the parent div.

Example:

@Html.PropertyFor(m => m.ContentArea, new { Tag = "some-tag", HasContainer = true, CustomTag = "ul", CssClass = "this-is-a-list-class", ChildrenCustomTagName = "li", ChildrenCssClass = "this-is-list-item-class" })

Reference:

https://blog.tech-fellow.net/2015/06/11/content-area-under-the-hood-part-3/

So, as it's a css issue. You can ask the frontend developer for help.

I'm rendering my contentarea with the following code:

@Html.PropertyFor(m => m.CurrentPage.MainContentArea, new { CssClass="row" })

Which outputs this:

The narrow image block (just an example) looks like this:

<div class="col m4 s12" @Html.EditAttributes(m => m.Image)>
    <img src="@Url.ContentUrl(Model.Image)" style="width:100%;" />
</div>

So my display options work, they change which partial/block is rendered. But they render inside empty divs (because of PropertyFor()). 

Can someone ELI5 how i should solve this? 

See this thread

https://world.episerver.com/forum/developer-forum/-Episerver-75-CMS/Thread-Container/2019/7/removing-extra-divs-from-episerver-content-areas/

You just need to render the property like this

@Html.PropertyFor(m => m.ContentArea, new { HasContainer = false})

Article reference

https://www.dcaric.com/blog/removing-extra-divs-from-episerver-content-areas

Hell yes, i managed to solve the issue by installing the EPiBootstrapArea nuget package! Because we're using Materialize and not Bootstrap, i had to add some custom CSS to be able to use the nuget package.

Some sample code:

public class DisplayModeFallbackCustomProvider : DisplayModeFallbackDefaultProvider
    {
        public override List<DisplayModeFallback> GetAll()
        {
            var displayOptionsList = new List<DisplayModeFallback>();

            displayOptionsList.Add(new DisplayModeFallback
            {
                Name = SiteTags.Full,
                Tag = SiteTags.Full,
                LargeScreenWidth = 12,
                LargeScreenCssClassPattern = "col l{0}",
                MediumScreenWidth = 12,
                MediumScreenCssClassPattern = "col m{0}",
                SmallScreenWidth = 12,
                SmallScreenCssClassPattern = "col s{0}"
            });

            displayOptionsList.Add(new DisplayModeFallback
            {
                Name = SiteTags.TwoThirds,
                Tag = SiteTags.TwoThirds,
                LargeScreenWidth = 8,
                LargeScreenCssClassPattern = "col l{0}",
                MediumScreenWidth = 6,
                MediumScreenCssClassPattern = "col m{0}",
                SmallScreenWidth = 12,
                SmallScreenCssClassPattern = "col s{0}"
            });

            displayOptionsList.Add(new DisplayModeFallback
            {
                Name = SiteTags.OneThird,
                Tag = SiteTags.OneThird,
                LargeScreenWidth = 4,
                LargeScreenCssClassPattern = "col l{0}",
                MediumScreenWidth = 6,
                MediumScreenCssClassPattern = "col m{0}",
                SmallScreenWidth = 12,
                SmallScreenCssClassPattern = "col s{0}"
            });

            displayOptionsList.Add(new DisplayModeFallback
            {
                Name = SiteTags.HalfWidth,
                Tag = SiteTags.HalfWidth,
                LargeScreenWidth = 6,
                LargeScreenCssClassPattern = "col l{0}",
                MediumScreenWidth = 6,
                MediumScreenCssClassPattern = "col m{0}",
                SmallScreenWidth = 12,
                SmallScreenCssClassPattern = "col s{0}"
            });

            displayOptionsList.Add(new DisplayModeFallback
            {
                Name = SiteTags.OneQuarter,
                Tag = SiteTags.OneQuarter,
                LargeScreenWidth = 3,
                LargeScreenCssClassPattern = "col l{0}",
                MediumScreenWidth = 6,
                MediumScreenCssClassPattern = "col m{0}",
                SmallScreenWidth = 12,
                SmallScreenCssClassPattern = "col s{0}"
            });

            displayOptionsList.Add(new DisplayModeFallback
            {
                Name = SiteTags.ThreeQuarters,
                Tag = SiteTags.ThreeQuarters,
                LargeScreenWidth = 9,
                LargeScreenCssClassPattern = "col l{0}",
                MediumScreenWidth = 6,
                MediumScreenCssClassPattern = "col m{0}",
                SmallScreenWidth = 12,
                SmallScreenCssClassPattern = "col s{0}"
            });

            return displayOptionsList;
        }
    }

Thanks for the replies, appreciate it!