M-S M-S - 3 months ago 33
CSS Question

Anchor tag not aligning properly css

I have an div and anchor tag in my html, i have given float left to align them inline to each other. but anchor tag is coming in a new line when the text of the div is in two lines without modifying the html given.

This is what have tried.

CSS:

.relative{
border: 1px solid #000;
position: relative;
margin: 0 auto 20px;
max-width: 940px;
}
.absolute{
position: absolute;
width: 100%;
z-index: 5;
border: 1px solid red;
}
.content {
margin-bottom: 12px;
font-size: 14px;
line-height: 21px;
color: #333333;
}
.content p {
float: left;
}
.content a, .content div {
float: left;
line-height: 21px;
}
.content div, .content a {
padding-right: 10px;
}


HTML:

<div class="relative">
<div class="absolute">
<div class="content">
<p><span></span></p>
<div>Sample Text ##TOTAL_ACTIVITY_INCLUDE_RECENT_VIEW## Sample Text ##TOTAL_ACTIVITY_INCLUDE_RECENT_VIEW## Sample Text ##TOTAL_ACTIVITY_INCLUDE_RECENT_VIEW## Sample Text ##TOTAL_ACTIVITY_INCLUDE_RECENT_VIEW## Sample Text ##TOTAL_ACTIVITY_INCLUDE_RECENT_VIEW##</div>
<p></p>
<a href="#" class="">myLink</a>
</div>
</div>
</div>


Fiddle

Answer

Add display: inline; to .content a and drop float: left;

So you have now:

.content a, .content div {
    display: inline;
}

Expected output:

enter image description here

Check it out.

Comments