FANDOM


  • I'm working on some coding for a home page remodel and I ran into an issue (I believe I stumbled onto this in the past too). I have 12 images, separated into two inline blocks, with a width of 49%. My question is: why can I not set the width to be 50% without the second block moving to the next line? These two blocks need to be center with the image above and a 50% width seems the most logical way to me. The template is linked above with the styling in Wikia.css under the "Main Page Improvements" section.

      Loading editor
    • it counts whitespaces inbetween blocks. add white-space: nowrap to .nav-block.

        Loading editor
    • This doesn't work as setting the width to 50% afterwards breaks the blocks into two lines.

        Loading editor
    • weird. it worked when i tried it. now, it doesn't. try to remove width from .nav-block (or set it to auto). is it fits to you needs?

      oh. u have changed .nav-blockline. that's why white-space had no effect.

        Loading editor
    • I changed .nav-blockline because removing the white-space caused the blocks to overlap (and it should just be a block anyways given there are no blocks within the larger block to be inline).

      Removing width or setting to auto causes everything to align left.

      Edit: And to be 100% clear, if I wasn't, I'm looking for the same visual layout it is now, just with a proper width to be centered with the image above.

        Loading editor
    • put all .nav-block's in the one container (let .c), then set for .c display:flex, also add to .c justify-content with space-between or space-around (which one will looks better).

        Loading editor
    • Creating another class for the two main blocks was my next move though I was curious before I did if it was possible without doing so. Anywho, it works. I increased the width to 50% and things are aligned properly. Thanks for the assistance.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.