Creating a div layout

  • bufus

    (@bufus)


    4 years, 7 months ago

    My apologies if this topic doesn’t belong here (or anywhere else on wordpress.org, for that matter), but I’m stumped and need guidance, even if only guidance to the proper place to ask.
    I hate divs’s, could never get along with them, but I must put together an HTML layout, and nowadays it seems I have no choice but to use a div layout for responsiveness and overall flexibility.
    This is what I’m trying to build: https://imgur.com/xhtL60v
    The top left square will be an image, the rest will be essentially text (links, lists, buttons…).
    I started coding it, but too many times it goes out of control… maybe it’s a problem with floats, I don’t know.
    If someone has a layout grid (not a display:grid, because I noticed that’s too rigid) example, or a link to related reading, or any kind of useful pointers, I would appreciate it very much. I’m at it for almost a week and I would really like to finally start creating content at some point…

    • This topic was modified 4 years, 6 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    4 years, 7 months ago

    Look into CSS Grid. https://css-tricks.com/snippets/css/complete-guide-grid/

    You’ll find a bunch of grid generators, too, if you google about a bit.

    Thread Starter bufus

    (@bufus)

    4 years, 7 months ago

    I tried LayoutIt, and the output didn’t look all that bad, but when resizing the window the grid didn’t adapt, so I became reluctant about that kind of grid.
    I’ll go through the information you referenced and see what I come up with. Thanks!

    • This reply was modified 4 years, 7 months ago by bufus.
    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    4 years, 7 months ago

    You’d need to have several CSS @media blocks based on min-width to get your layout to be both responsive and readable.

    Thread Starter bufus

    (@bufus)

    4 years, 7 months ago

    Unfortunately, I must admit I know very little about CSS, I just basically hack through it. I think I’ve seen pre made media blocks somewhere, so I’ll get them.

    I’d still like to take a shot at the standard div structures. I was too close to making one work to give up now 😀 (just have to subdue my left image, as it refuses to center when the browser window is reduced).

    Thanks for the tips!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Creating a div layout’ is closed to new replies.