How to inline 2 blocks?

HTML & CSS
1

I would like to know how to make block for “Human Capital Connection” inline with “Ad Placed By:”. Can’t figure why like that:

<div class="speczcenter">
<p><span class="detn">Ad Placed By:</span><span class="det"> 					                                          						<a href="http://thejobs.com.my/company/347/Human-Capital-Connection">Human Capital Connection</a><br/>
                                          					 </span></p>
</div>

.speczleft, .speczcenter {
	width: 200px;
	float: left
}
.speczleft p span.det, .speczcenter p span.det, .speczright p span.det {
/*	height: 13px;*/
	width: 115px;
	padding: 3px 0 2px;
	display: block;
	float: right;
	margin: 0 2px 2px 0;
	background: #e3e3e3;
	border: 1px solid #bbb;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: inset 0 0 2px 1px white;
	-moz-box-shadow: inset 0 0 2px 1px white;
	box-shadow: inset 0 0 2px 1px white;
	color: #333;
	font-size:11px;
	font-weight:600;
	line-height: 1;
	text-align: center;
	text-shadow: 0 -1px 1px white;
}
.speczleft p span.detn, .speczcenter p span.detn, .speczright p span.detnwide {
	padding: 3px 0 2px;
	float: left;
	display: block;
	width: 85px;
	height: 13px;
	margin: 0 2px 2px 0;
	color: #fff;
	font-size:11px;
	font-weight:600;
/*	text-transform: uppercase;*/
	line-height: 1;
	text-align: center;
	text-shadow: 0 -1px 0 #333;
	background-color: #759ae9;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #77b400), color-stop(25%, #5d8d00), color-stop(75%, #476c00), color-stop(100%, #507800));
	background-image: -webkit-linear-gradient(top, #77b400 0%, #5d8d00 25%, #476c00 75%, #507800 100%);
	background-image: -moz-linear-gradient(top, #77b400 0%, #5d8d00 25%, #476c00 75%, #507800 100%);
	background-image: -ms-linear-gradient(top, #77b400 0%, #5d8d00 25%, #476c00 75%, #507800 100%);
	background-image: -o-linear-gradient(top, #77b400 0%, #5d8d00 25%, #476c00 75%, #507800 100%);
	background-image: linear-gradient(top, #77b400 0%, #5d8d00 25%, #476c00 75%, #507800 100%);
	border: 1px solid #4b6619;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 0 2px 0 #b4ff0d;
	-moz-box-shadow: inset 0 0 2px 0 #b4ff0d;
	box-shadow: inset 0 0 2px 0 #b4ff0d;
}
2

It looks to me like there’s not enough horizontal space, so the link is getting pushed to the next line.

You have the speczcenter set at 200, then the two spans set to 115 and 85, plus right margin of 2px and another right margin of 2px. That’s 4px too many!

Hope this helps.

3

Sorry, forgot to say i was talking about width when i said 200. 200px width with two spans of 115px width and 85px width, plus two margins of 2px each.

4

You forgot the borders :slight_smile:

It’s 8px too many:)

The wrapper needs to be 208px to fit them both.


.speczcenter {
	width: 208px;
	float: left
}
5

Thank you. It works. :slight_smile:

6

I did, I did. Good call!