CSS: How to put a div on the right of a span and not below ?

697 Posts

Jul Reply #1, 17 years, 10 months ago

Hi,

I cannot figure out how to put a <div>, just after a <span> and prevent it to go below the span.
Both are in a <li> element.

This is for a Wayfinder parameter:

$hereTpl = '@CODE:<li id="docAffiche"><span></span><div class="chapeau lettrine rouge">[+wf.linktext+]</div></li>';

The purpose of the <span> is to print a red arrow on the left of the text which is in the <div>.

My CSS is as follows :

#docAffiche div {white-space:nowrap;}

#docAffiche span {
	display:block;
	left:0px;
	top:0;
	height:0px;
	border-left:8px solid #ff0000;
	border-top:8px solid #fff;
	border-bottom:8px solid #fff;
	font-size:1px; 
	line-height:0;
	margin:0;
	margin-top:6px;
	margin-right:10px;
}

I observed that putting the display property of the span to "run-in" instead of "block" solves the problem but creates another one : the span becomes bigger. huh

With two <div> I would use twice style="float:left", but with a span this does not work.

Any idea ?

171 Posts

etal Reply #2, 17 years, 10 months ago

When using Display: block on a span you should be able to float it.
Display: run-in is not properly supported in most browsers so avoid it, you can try display: inline-block but IE support for it is not perfect either.

Normally to achive the same thing I would use a background image of a red arrow and not try and draw it using element borders (or maybe I’m misunderstanding what you are trying to do).
Something like this:

#docAffiche div {
       margin-left: 12px;
}

#docAffiche span {
	display:block;
	height:8px;
        width: 10px;
        background: url(/image/of/red/arrow.gif);
	margin:0;
        float: left;
}

697 Posts

Jul Reply #3, 17 years, 10 months ago

I could find a solution by replacing the <span> element by a <div> and a float:left property for the 2 <div>.

However, I was obliged to use put a relative vertical offset of -1em for the second <div>, i.e. the one on the right of the red arrow. As using float:left, I cannot understand why this was necessary. Any idea?
Here the code.

$hereTpl = '@CODE:<li id="docAffiche"><div class="fleche"></div><div class="chapeau lettrine rouge">[+wf.linktext+]</div></li>';

#docAffiche div {
	white-space:nowrap;
	float:left;
	position:relative;
	left:16px;
	top:-1em;
	}

#docAffiche div.fleche {
	display:block;
	top:0;
	left:0;
	height:0px;
	width:8px;
	border-left:8px solid #ff0000;
	border-top:8px solid #fff;
	border-bottom:8px solid #fff;
	font-size:1px; 
	line-height:0;
	margin:0;
	margin-top:6px;
	margin-right:10px;
	float:left;
}

1,572 Posts

Paulp Reply #4, 17 years, 10 months ago

If I understand this corectly you want a small image to the left of a li huh

??

If so you can do this without using any divs as I really can’t understand why you would want a div in a li.

so:

$hereTpl = '@CODE:<li class="docAffiche">[+wf.linktext+]</li>';

Then all you do is target the LI class with the info you want.

so add the background to li and float it ect, then for more specific stuff tardet the a for the li class. IE .docAffiche a, .docAffiche a:link.

heres an example of how to add the image to the link.

.docAffiche a, .docAffiche a:link {
background: url(../images/imagename.gif);
background-repeat: no-repeat;
background-position: 10% 50%;
}