CODEWITHSUNDEEP
htmlcss
Clinton Pierce
Clinton Pierce

Reputation: 13209

CSS need inline element to appear next to { display: block; } element

I'm trying to introduce a checkbox next to another element. The problem is that the a element has been made a "block" by the CSS so that it appears at the correct height and width. Being a block, I can't simply put another element next to it and hope it shows up there -- it shows up just below it.

A self-contained sample is shown below.

<html>
<head>
<style type='text/css'>
/* I don't have control over this */
a.btn {
        background-color: #B35905;
        color: #E6D389;
        text-decoration: none;
        font-weight: bold;
        text-align: center;
        display: block;
        border: none;
        cursor: pointer;
}
.normal{
    line-height: 20px;
    font-size: 12px;
    height: 20px;
    width: 125px;
    padding: 0px;
    margin: 0px;
}
</style>
</head>
<body>

<!-- I have some control over this -->
<a class="btn normal">Push Me</a><input type="checkbox">
<br>
<a class="btn normal">Push Me Too</a>
</body>
</html>

So what I'm looking for is the checkbox to appear immediately to the right of the element, but without having to completely muck up the styling of the button. Absolute positioning of the checkbox using the (known) size of the button seems wrong and dirty.

Suggestions?

Upvotes: 1

Views: 2859

Answers (6)

BitDrink
BitDrink

Reputation: 1193

Just apply a float: left to the first a tag.

Upvotes: 0

Evan Kroske
Evan Kroske

Reputation: 4554

The easiest possible way to get the checkbox beside the button while preserving the button's block styling would be to set the button's display property to inline-block. Surprisingly, using display: inline-block in this scenario will work in all modern browsers and IE 6 and above. inline-block is a little-known but highly useful property.

Upvotes: -1

Aaron
Aaron

Reputation: 812

<a class="btn normal" style="float: left;">Push Me</a><input type="checkbox">
<br style="clear: both;">
<a class="btn normal">Push Me Too</a>

Upvotes: 2

Zoidberg
Zoidberg

Reputation: 10333

Add in two more css classes

.floatingButton{
    float:left;
}
.aCheckbox {
    xclear:left;
}

Then

<a class="btn normal floatingButton">Push Me</a><input class="aCheckbox" type="checkbox">
        <br>
        <a class="btn normal">Push Me Too</a>

Should do the trick

Upvotes: 1

Chris
Chris

Reputation: 6325

Can you do something like this with the access that you do have?

<div style="width: 150px;">
  <input type="checkbox" style="float: right;"> 
  <a class="btn normal">Push Me</a>
</div>

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129832

If you must keep the anchor a block element, set float: left to it. Don't forget to add 

<div style="clear: both;"></div>

after the checkbox.

Upvotes: 1

Related Questions