CODEWITHSUNDEEP
htmlcss
BrianLender
BrianLender

Reputation: 531

How to align <p> and <a> tags side-by-side?

I have a <p> tag and an <a> tag that I'd like to have vertically aligned and side-by-side. To give you an idea of what I have so far, this is my code:

HTML:

<p class="c2a-content">This is just a test. Hopefully it will line up properly!</p>
<a href="#" class="button">My Button</a>

CSS:

.c2a-content{
    float:left;
    text-align:left;
}

.button{
    background:#008ed7;
    color:#fff;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    font-weight:700;
    font-size:16px;
    padding:25px 35px;
    float:left;
}

.button:hover{
    /*background:#007DBD;*/
    background:#0087CC;
    color:#ffffff;
}

The way things are now, the paragraph is the full width of my container and the button sits below that. How can I get the paragraph to fill up 2/3 of the container and have the button fill up the other 1/3?

Upvotes: 1

Views: 3000

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99474

The point: The floated element should be placed before everything in the container.

When you put the paragraph at first, it takes up all the width of its parent. And the floated element will be rendered after the paragraph.

HTML:

<div class="container">
  <a href="#" class="button">My Button</a>
  <p class="c2a-content">This is just a test. Hopefully it will line up properly!</p>
</div>

CSS:

.container {
  overflow: hidden; /* clear fix hack */
}

.c2a-content {
  text-align:left;
  background-color: gold; /* Just for demo */
  margin: 0;              /* Override user agent stylesheet to align vertically */
}

.button {
  /* Other CSS declarations */
  float: right;       /* float the button to the right */
  margin-left: 10px;  /* make a space between button and the paragraph */
}

Here is the JSBin Demo.

Note: If you need to pull out the paragraph from behind of the floated button, you could set overflow-x: hidden; on the paragraph or simply set a margin-left property.

Here is the JSBin Demo #2.

Upvotes: 3

Related Questions