Forums

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
    Posts
  • #234739
    mikelf
    Participant

    Hello, i got the following elements: http://i.imgur.com/IFBIFeL.png
    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

    http://codepen.io/anon/pen/GpYVyp

    #234740
    mikelf
    Participant

    edit: also, how can i make the text be inline after the icons?
    eg:
    http://i.imgur.com/kDQd09X.png

    it currently is something like:
    http://i.imgur.com/3cmQ5VJ.png

    #234741
    Beverleyh
    Participant

    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 )

    #234776
    mikelf
    Participant

    regarding the text issue:
    http://i.imgur.com/HU6plvu.png

    Edited by Admin – Please use codepen for code :)
    http://codepen.io/anon/pen/jbQYZw

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

    #234777
    Beverleyh
    Participant

    Put a min-width on the icons?

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

    #234779
    bearhead
    Participant

    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.

    #234780
    Alex Zaworski
    Participant

    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.