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

Home Forums CSS Display two things in the same line

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

    Hello, i got the following elements:
    i want to change the “ay” div on the right, so the image and the text would be inline.
    if i set both divs to float:left; the text goes messy and it pretty much breaks all the aspect


    edit: also, how can i make the text be inline after the icons?

    it currently is something like:


    There isn’t much for us to work with – the image bears no resemblance to the CodePen demo. You need to make it easier for us to help you.

    Try putting in some HTML markup to illustrate the outlined box on the left and list of icons/text on the right.

    Also include enough CSS to recreate/mockup the image layout.

    The JS isn’t doing anything here so try extracting the outputted markup and put it into the appropriate place in the HTML pane instead.

    if i set both divs to float:left;

    Both divs? There’s only one in your CodePen.

    the text goes messy and it pretty much breaks all the aspect

    You should recreate this problem for us in the demo, otherwise we can’t help (we cant guess at what “goes messy” or “breaks all the aspect” means )


    regarding the text issue:

    Edited by Admin – Please use codepen for code :)

    Icons have different width and the text dont start at the same point


    Put a min-width on the icons?

    If you need further help, please put the pertinent markup and CSS into your CodePen


    Yeah it seems like you’re getting that because the icons are all different sizes.

    So if that is the case, you can either give them a min-width like Beverley suggested, or just give them a set width.

    It’s kind of hard to give more detailed advise than that without seeing a demo… I realize that you may be working with a CMS and the PHP scripts won’t execute in codepen. However, you can just create a static version for us to look at. It doesn’t sound like your problem is with PHP anyway.

    Alex Zaworski

    You could also stick them all in a container that has a fixed width, with the icons centered in the container (if you don’t want to change the icon sizes at all).

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