Changing "float" onclick?

I’m trying to make a script which in realtime changes a DIV to float either left or right but somehow I’m doing something wrong?

Here is what I got…

function logoplace(that){

<style type="text/css">
div#logoholder {
	border:1px solid #666666;

<input type="radio" name="logoplacement" value="left" onclick="logoplace(this)" />
<input type="radio" name="logoplacement" value="right" onclick="logoplace(this)" />
<div id="logoholder">This is a test</div>

Any ideas? Thanks in advance :wink:


I feel that it’s redundant referencing the this object when you can easily just as well use a ternary operator to check the current float value.

function logoplace() {
    var ele = document.getElementById('logoholder'); = ( === 'left' ? 'right' : 'left');

Make sure the element you are floating is smaller than the available width-
and ‘float’ cannot be a property identifier in javascript (style.float)- use styleFloat and cssFloat,
or set the css string ‘float:left’ or ‘float:right’.

<!doctype html>
	float: left;
	border: 1px solid #666666;
function logoplace(e){
	e= e || window.event;
	var which= || e.srcElement;
	if(which && which.value){
		document.getElementById('logoholder').style.cssText= 'float:'+which.value;
window.onload= function(){
	document.getElementById('choosefloat').onclick= logoplace;
<fieldset id="choosefloat">
<legend>Float the test div</legend>
<label><input type= "radio" name= "logoplacement" value= "left" checked>Left</label>
<label><input type= "radio" name= "logoplacement" value= "right" >Right</label>
<div id= "logoholder"> This is a test</div>