Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 11, 2016 at 9:42 am #630542
    themeforesttony

    I have a section on a homepage for a client site where I have a Text box sitting inside a color section.
    I am trying to keep a top and bottom border to the text box with part of the text floated left and part floated right.
    I have added a custom class to the text box with the following CSS:
    .border-top-bottom {
    border-top: 1px solid #000000!important;
    border-bottom: 1px solid #000000!important;
    }
    I then created two CSS divs to float the text as follows:
    .right{
    float:right;
    }

    .left{
    float:left;
    }

    I added the following to the text editor:
    <h4><span class=”left”>UPCOMING EVENTS</span></h4>
    <span class=”right”>ALL EVENTS</span>
    I am having the following issue with the CSS:
    The text “Upcoming” and “ALL EVENTS” are not vertically aligning to the baseline.
    The borders are not positioned above and below the text properly
    On an mobile device the section is not resizing properly but instead is wrapping to two different lines.
    Can you help get this sorted out?

    May 12, 2016 at 12:06 pm #631287
    Josue

    Hey,

    Try adding overflow: hidden to your border code:

    .border-top-bottom {
    border-top: 1px solid #000000!important;
    border-bottom: 1px solid #000000!important;
    overflow: hidden;
}

    Best regards,
    Josue

    May 12, 2016 at 7:42 pm #631554
    themeforesttony

    Thanks Josue.
    That seemed to solve everything but the text alignment.THe element floated left is aligned to top and the element floated right is aligned to bottom

    May 16, 2016 at 4:05 am #632647
    Ismael

    Hi,

    Add this css code:

    .border-top-bottom {
    position: relative;
}

.border-top-bottom .right {
    position: absolute;
    right: 0;
    bottom: 0;
}

    Best regards,
    Ismael

    May 16, 2016 at 7:46 pm #633227
    themeforesttony

    That’ll do. Thank you so much sir.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Create responsive border with text floated left and right’ is closed to new replies.