The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design [HELP] 4 items align in a row without any gap

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #262769

    I’m stuck of what selectors i need to add/edit to align all these ‘4 col-x items’ in a line so that they wont stack with each other or have any gaps.

    This is what im trying to make :

    But now currently my webpage view as this :

    This is my current codes :

    Some solutions including explanation why all those items not align neatly would be a great help.


    Firstly, I’d suggest you reduce the demo to just the relevant HTML & CSS.

    No-one likes to have to wade through dozens of lines of irrelevant code to narrow down your issue.

    Also, what gaps? It looks to me as though you images aren’t large enough to fill their divs….not that there are gaps between the divs.

    A minimal demo is needed here.


    Sorry about that. Here the minimal one.

    So, if i want to make my images take 100% of the container, i need to set my img style to width = 100; and height=100; ?


    Just `width:100% will do it…but you have columns of different widths so you may not get the effect you are looking for…


    Thanx, there is no more width gap but the height are differents and if i resize the windows, the right img will stack on the form.

    Hmmm, do i plan it wrong? Is assigned each column some width percentage a bad idea? (i do it for responsive purpose)
    Or do i need to alter more on sumthing?

    p/s : those 3 images are in same height.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design’ is closed to new topics and replies.