Padding or borders on nested elements causes breakage

[EnMod]

After trying multiple times to pad/border elements that have been nested, the layout always ends up breaking. Is the solution to add .wraps or similar to wrap everything I want to pad/border?

[dmitrykiselyov]

@EnMod can you show your code?

[EnMod]

@dmitrykiselyov Sure, will do so in about an hour once I am back at a computer. I'll edit this comment with the code.

EDIT: Here's the problematic part of my Jade template when it wasn't working:

nav
  #content

article
  #content

And the offending Stylus:

nav
  lost-column 1/4
  padding 4rem

article
  lost-column 3/4
  padding 4rem

<nav> appears vertically above <article> in this setup. However, by including .wraps in the right places and applying padding to the wraps instead, like so:

nav
  .wrap
    #content

article
  .wrap
    #content

nav
  lost-column 1/4
  .wrap 
    padding 4rem

article
  lost-column 3/4
  .wrap
    padding 4rem

...this fixes the problem, and <article> then appears to the right of <nav> as expected. in the case of my issue, padding is interchangeable with borders of any kind.

[subpixelch]

Do you use lost in flex-mode? If so have a look at this: #119

[EnMod]

@subpixelch No flex here, but thanks for the heads up.

[dmitrykiselyov]

They (nav and article) must have a parent (to know who is the last child and remove margin-right) and the parent must have the clearfix (because of float). Id must have a unique name!

Jade

.content
  nav 
    #content1

  article
    #content2

Stylus

.content
  lost-utility clearfix

nav
  lost-column 1/4
  padding 4rem

article
  lost-column 3/4
  padding 4rem

[abass]

Yep, and you don't have to do lost-utility clearfix if you don't want:

.content
   lost-center: 1140px

Will add in the clearfix and display: flex and everything for you. Sometimes just using the utility clearfix is good, but most of the time I find myself just using the lost-center.

[AleksejDix]

why aren't you using the gutter variable.

.foo
  lost-center 1140px 4rem 

and then give margin to the children elements

http://corysimmons.github.io/lost/

[EnMod]

@dmitrykiselyov Apologies...I should mention that nav and article are children of a section within my Jade.

@AleksejDix I wasn't using the gutter variable like that because I didn't grasp exactly how it works just yet, and didn't think to use lost-center with 100% (since I wanted full-width) instead of just throwing in lost-columns like I did. @dmitrykiselyov 's Jade markup with the following stylus gives the expected results:

padstuff = 4rem

section
  lost-center 100% padstuff

nav
  lost-column 1/4
  margin-top padstuff

article
  lost-column 3/4
  margin-top padstuff

Thanks so much for your help, everyone. I've still got much to learn it seems :)

[corysimmons]

Sorry I was out of town all this past week.

* { box-sizing: border-box; } should fix this.

• http://www.paulirish.com/2012/box-sizing-border-box-ftw/
• https://github.com/corysimmons/boy

[mindreframer]

@corysimmons thank you so much! Could we put this information into Readme? (@peterramsing) I have spent around 5 hours trying to understand/fix this issue... This could be easily mitigated by having an FAQ / Gotchas section in Readme.

Thx for the grid system, btw!

[corysimmons]

A gotcha's section in the README or Wiki might be a good idea.

[peterramsing]

@mindreframer Sorry to hear about the 5 hours on this. I'm working on getting some new documentation for Lost ASAP. I think with this and other things I've heard, it's time to spend some serious time on it and sooner than later. See #224

[mindreframer]

@peterramsing thanks! yeah, a real documentation is great, altough it might take couple weeks (months?) until it is decided and implemented. maybe just make a quick change in the readme for now and dont think about it anymore? your call. ;)

there is no harm in doing so.
Cheers!

[peterramsing]

@mindreframer I don't disagree. Will have something updated soon.