How to align

and tags side-by-side?


Tags:
html,css

Problem :

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?



Solution :

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.


    CSS Howto..

    How to apply css for a class within h2?

    How to indicate that an LI with a link was pressed.

    Show a gif image over a section to take up the space

    Rails: How to control CSS, Javascript files

    How to use modernizr for border-image

    css how to make full height div with scroll support?

    background image of div element can't show in php file

    How read(get) css style value of a server-side div in code behind(not set)?

    How to make image control button for each image inside the div using css and js?

    How to remove hover function from top row in table

    How to know where a CSS error occurred in dynamic content or how to stop the script upon CSS error

    div height is not showing properly

    PrimeFaces: how can I make use of customized icons?

    how to make css animation smoothly for full-screen page?

    How to move the icon / button outside the textbox x-webkit-speech?

    How to use a full width image as border between content and footer

    How to simulate multiple
    tag with CSS

    HTML / CSS - How to remove a gap between the header and a horizontal menu

    How to refer to children elements in CSS

    CSS Column Help: How do I get a column within a column?

    How can I set up a static Webkit Mask

    How to create an div background that is not affected by page zoom with CSS

    How Can I get my DL to style properly?

    How do you make an image or button glow when you mouse over using javascript or jquery?

    How to add a class to a bar using jQuery?

    How can I get this effect (on height) with jquery?

    How to avoid with css when background of the second line covers the letters of the first line?

    How to align HTML elements from bottom to top?

    jQuery - Navbar hover did not show

    How to define CSS anchor text decoration for anchors in a specific container