Forums

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

Home Forums Design Same line different styles left & right align above another element ?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #248773
    vinzbomb
    Participant

    Hi first time i ask some help here,
    Its been two days i try to create different text styles in html and css on the same line
    with left and right align above another element (ie picture)
    I tried a lot of different codes but the result is not what i need.

    here is an example picture of what i need to achieve:

    #248776
    Beverleyh
    Participant

    We can’t see your HTML or CSS from an image.

    Show us what you have so far in a codepen.io demo and we can offer suggestions.

    #248777
    vinzbomb
    Participant

    See the Pen

    [Mod Edit] Forked Codepen (after some corrections in basic CSS)

    http://codepen.io/Paulie-D/pen/PbaKgQ

    #248778
    Paulie_D
    Member

    I probably would avoid floats but a basic breakdown is to use a wrapper on the right side items and float that.

    http://codepen.io/Paulie-D/pen/pNKrMB

    #248779
    vinzbomb
    Participant

    Nice for the help however now on my website the text “Standard Double Room” is aligned to the top of the box, and the rest is aligned to the bottom of the box.
    also i added the exact width of the picture in
    #containerslide {
    margin: auto;
    width:728px;
    border:1px solid grey;
    overflow: hidden; /* quick clearfix */
    }
    how to align the box to the left ?
    do i have to ad something or remove margin auto ?

    here is the result:
    [IMG]http://i64.tinypic.com/2v1sroz.jpg[/IMG]
    thanks its almost what i need to achieve !

    #248780
    vinzbomb
    Participant

    Ok i added float:left; to the #containerslide div that worked but don’t know if its the correct way.
    However for some reason the title Standard Room is aligned o the Top of the box.
    Is the box needed ?
    Is this responsive code ?

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