3 replies [Last post]
tristanisginger
tristanisginger's picture
Offline
newbie
Last seen: 2 years 45 weeks ago
Joined: 2006-11-28
Posts: 4
Points: 7

Hi there,

I am having trouble positioning a keypoints box and have text wrapping around it.

I want have a keypoints box in the on the right hand side but half way down a block of text.

I cannot put the keypoints div within the text as the text is pulled from a database so must go before or after.

Help please.

<div id="leftCol" class="blurb">
	<a href="#"><img src="images/maps/map-spain-top.jpg" /></a>
	<div id="keypoints">
		<h1>Keypoints</h1>                            
		<ul>
                	<li class="key odd">point 1</li>
			<li class="key even">point 2</li>
			<li class="key odd">point 3</li>
			<li class="even">point 4</li>
			<li class="odd">Spoint 5</li>
		</ul>         
	</div>
<h1>Spain</h1>            
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus, lectus at ullamcorper viverra, diam diam imperdiet turpis, vel cursus quam ipsum ut eros. Suspendisse turpis ligula, sagittis pretium pharetra id, dapibus eget lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla rhoncus lorem et mi molestie sit amet mollis dolor dapibus. Nullam nisi metus, convallis id blandit nec, volutpat posuere velit. Suspendisse lacinia odio id neque accumsan euismod. Nulla auctor quam quis metus ullamcorper ultrices. Curabitur molestie, urna vitae placerat tincidunt, velit massa egestas erat, ut hendrerit magna nibh pretium elit. Suspendisse potenti. Pellentesque eget lacus eu quam semper lacinia at at ipsum. Pellentesque non felis id felis scelerisque tincidunt. Nullam condimentum massa ac augue viverra laoreet. Phasellus sapien diam, hendrerit nec elementum quis, laoreet vel sapien. Proin vel nisl velit, in commodo mauris. Nam tristique nibh vitae mi dapibus ut egestas ante tempus. Fusce in ante nec neque consectetur viverra id et mauris.</p
 
<p>Praesent et ante at arcu tristique convallis cursus eu arcu. Nullam tortor eros, accumsan ac aliquam quis, eleifend ut nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ornare urna, non venenatis nisi venenatis eget. Donec feugiat vehicula leo, a pellentesque nibh ultricies at. Aliquam erat volutpat. Duis placerat condimentum turpis id ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin ut lectus eget felis molestie imperdiet vitae sit amet nunc. Integer eget magna a diam molestie aliquam sed eget erat. Curabitur vulputate mauris ut nulla dictum non euismod magna vehicula. Praesent in volutpat enim. Cras aliquam, odio id convallis feugiat, neque leo vestibulum sem, egestas fringilla mi urna ac orci.</p>
</div>

#leftCol{
	width:675px;
	float:left;
	margin: 0px 12px;
}
 
#keypoints{
	float: right;
	width:204px;
	margin:12px 0px 6px 10px;
}

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

If the text is pulled from a

If the text is pulled from a database then you are using some form of server side scripting so why not put the key points in the text of the content of the data field or use the server side scripting to either split the text and put the parts around the key points or insert the key points at the half way mark.

tristanisginger
tristanisginger's picture
Offline
newbie
Last seen: 2 years 45 weeks ago
Joined: 2006-11-28
Posts: 4
Points: 7

the keypoints are also pulled

the keypoints are also pulled from a database and cannot be added into the text.

It is possible to use server side scripting to achieve what i want but was hoping for a css solution.

any ideas how this can be solved with css?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2259

tristanisginger wrote: the

tristanisginger wrote:

the keypoints are also pulled from a database and cannot be added into the text. ...

May I ask why not?