How to vertical-align:bottom 2 floated divs with text


Tags: css,position,vertical-alignment

Problem :

I have issue with css. I've created this jsfiddle to show it - https://jsfiddle.net/5k92h026/19/

My code is:

.left {float:left}
.wrapper{width:690px;}
.first-div {background-color:red;width:334px;height:84px;}
.second-div {
    background-color:blue;
    width:300px;
    height:84px;
    padding:33px 20px 35px 23px;
}
#first-link {
    padding-right:10px;
    display:block;
    float:left;
    vertical-align:bottom;
}
#second-link {
    padding-left:10px;
    display:block;
    float:left;
    border-left: 1px solid black;
    width:50%;
}
<div class="wrapper">
    <div class="left first-div">some info</div>
    <div class="left second-div" style=" display:inline-block;">
            <div class="search-info"></div>
            <a id="first-link" href="">some text here</a>
            <a id="second-link" href="" class="">some text that goes in 2 rows here</a>
    </div>
</div>

I want in blue div first link which text is "some text here" to be vertical-align:bottom, so that it will be positioned as second link. There is no problem when two links are in one line but when second text is longer, it goes on new line and they are not positioned good. How to do that? Thanks.



Solution :

You can use display:inline-block; instead of float:left; and the give vertical-align: bottom; to #second-link and #first-link. Don't forget to remove the extra spaces which is occurred by display:inline-block;

Jsfiddle


    CSS Howto..

    CSS - How to center nested divs?

    How to make cut off in CSS as shown in the attached image?

    how to add a different text box in input text type

    how to change to color of pseudo-elements in css through jquery

    How can I get this style effectv with css or jquery?

    PhoneGap: How to get iPad specific CSS to work?

    How to align item to the very bottom within flexible box layout column?

    How to display code blocks with word wrap and line number with jekyll markdown on github-pages

    making div inside div and put it right-bottom corner how?

    How can I prevent this plugin from popping up from behind the content area?

    How to stop user agent stylesheets from overriding my css

    In CSS, how to make the window non-scrollable when an element overflows?

    How to adjust nav menu based nav item name character length?

    How to combine wildcard and not selectors in CSS

    How to scale html font size in Bootstrap 4 without breaking responsive navbar

    how to gap a list in half

    How to vertically align both image and text in a DIV using CSS?

    How To Display only First Word of H2 Heading With JavaScript or CSS

    CSS: How to change colour of active navigation page menu

    How to create a template for randomising pictures and quotes without correspondence?

    How can I create a full height responsive horizontal scrolling list of images with CSS

    How to split page in half using CSS?

    Text is too close to scroller. How to create a little bit space between scroller and text?

    jquery how to regex css style positive to negative, negative to positive?

    How to only underline text element inside an element in CSS?

    How do I create an animation of scrolling text with just HTML and CSS (or java i guess) like apple used to have on their livepage?

    How to calculate total size of all css,js and html pages separately uing shell script?

    How to create cube with only HTML and CSS?

    How do I stop Bootstrap Input Boxes and Buttons from overlapping the header and footer of a page when scrolling?

    How to apply CSS styles only to the text-content of a block-level element?