SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb How to inline 2 blocks?

    I would like to know how to make block for "Human Capital Connection" inline with "Ad Placed By:". Can't figure why like that:
    css.jpg

    HTML Code:
    <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>
    Code:
    .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. #2
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Check Out Syntaxxx.com - HTML5, CSS3, PHP, jQuery & More

  3. #3
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Check Out Syntaxxx.com - HTML5, CSS3, PHP, jQuery & More

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by threehundred View Post
    That's 4px too many!
    You forgot the borders

    It's 8px too many

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

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

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by threehundred View Post
    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.
    Quote Originally Posted by Paul O'B View Post
    You forgot the borders

    It's 8px too many

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

    Code:
    .speczcenter {
    	width: 208px;
    	float: left
    }
    Thank you. It works.

  6. #6
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You forgot the borders

    It's 8px too many
    I did, I did. Good call!
    Check Out Syntaxxx.com - HTML5, CSS3, PHP, jQuery & More


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •