Why won't my divs float side by side? - css

Question

I have two divs nested inside another and no matter what I have tried I can't get the second nested div (bookmarklet-wrapper) to float beside the first(form-wrapper)? I thought maybe it was something to do with the widths but this didn't help and also tried using a "clearfix" but this still didn't help.
My HTML is as follows:
<div id="prof-wrapper">
<div id="editprofile-form-wrapper">
<div id="title">
<h1>Edit Profile</h1>
<p>This information appears on your personal user page</p>
</div><!--End of title-->
<div class="form-horizontal">
<?php if(isset($image)){echo $image;}?>
<div id="thumbs" style="width:300px"></div>
<form id="cropimage" method="post" enctype="multipart/form-data">
<fieldset class="control-group">
<label class="control-label" for="firstname">Firstname</label>
<div class="controls">
<input id="firstname" type="text" name="fname">
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="lastname">Surname</label>
<div class="controls">
<input id="lastname" type="text" name="secound">
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input id="email" type="text" name="email">
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="user_location">Location</label>
<div class="controls">
<input id="user_location" type="text" value="" name="user[location]">
<p>Where art thou?</p>
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="bio">Bio</label>
<div id="user_description_box" class="controls">
<textarea id="bio" class="input-xlarge" name="bio" style="width: 243px; height: 122px;"></textarea>
<p class="bio-label">About yourself in<strong>160</strong>characters or less.</p>
</div>
</fieldset>
<div class="form-actions">
<button id="submitButton" class="btn primary-btn" type="submit" name="submit">Save changes</button>
</div>
</form>
<form id="cropimage" method="post" enctype="multipart/form-data">
<fieldset class="control-group">
<label class="control-label" for="photoimg">Profile photo upload</label>
<div id="user_description_box" class="controls">
<input id="photoimg" type="file" value="" name="photoimg">
<input type="hidden" name="image_name" id="image_name" value="<?php echo($actual_image_name)?>" />
<!--<p class="bio-label">About yourself in <strong>160</strong> characters or less.</p>-->
</div>
</fieldset>
<div class="form-actions">
<input type="submit" class="btn primary-btn" id="photoSubmit" name="submit" value="Photo Submit" />
</div>
</form>
</div><!--End of horizontal form-->
</div><!--End of form wrapper-->
<div class="clearfix"></div>
<!-----------------------------------------Start of bookmarklet-------------------------------------------------->
<div id="bookmarklet-wrapper">
<h1 id="welcometext">Welcome to <img src="images/logo_text.png" alt="NetSushi Logo" title="Net Sushi" id="instrustionlogo" width="100px"/></h1>
<h2 id="bminstructions">The Bookmarklet below should be dragged to your bookmarks bar so that you can share content with your friends on <!--<img src="images/logo_text.png" alt="NetSushi Logo" title="Net Sushi" id="instrustionlogo" width="100px"/>
<a style="text-decoration:none;
background:#25A6E1;
background:-moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
background:-webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:-o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:-ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:linear-gradient(top,#25A6E1 0%,#188BC0 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
padding:8px 13px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #1A87B9;
position: relative;
top: 20px;"
href="javascript:
(function () {
function loadjscssfile(filename, filetype){
if (filetype=='js'){
var fileref=document.createElement('script');
fileref.setAttribute('type','text/javascript');
fileref.setAttribute('id','jsDoc');
fileref.setAttribute('src', filename);
}else if (filetype=='css'){
var fileref=document.createElement('link');
fileref.setAttribute('rel', 'stylesheet');
fileref.setAttribute('id', 'cssDoc');
fileref.setAttribute('type', 'text/css');
fileref.setAttribute('href', filename);
}
if (typeof fileref!='undefined')
document.getElementsByTagName('head')[0].appendChild(fileref);
}
var cssDoc = document.getElementById('cssDoc');
if (cssDoc == null){
loadjscssfile('http://www.netsushi.net/css/css/bookmarklet.css', 'css');
}
var jsDoc = document.getElementById('jsDoc');
if (jsDoc == null){
loadjscssfile('http://www.netsushi.net/js/bookmarklet.js', 'js');
}else{
if ($('#feeder_bm_main').is(':visible')){
$('#feeder_bm_main').hide();
}else{
$('#feeder_bm_main').show();
}
}
void(0)
}())
;"-->
>NetSushi</a>
</div><!--End of bookmarklet wrapper-->
</div><!--end of edit-page-content-->​
I'm still unsure how to correctly format my CSS to post it but you can see exactly what is going on in this fiddle if you have a moment to help me out?
http://jsfiddle.net/DannyW86/3gMuP/

Answer 1

If you simply add float: left to your form-wrapper, it should work : http://jsfiddle.net/3gMuP/1/

Answer 2

You can also use display:inline-block; in the 2 divs you want to have next to each other.

Answer 3

This works for me:
#editprofile-form-wrapper {
width: 50%;
float: left;
}
I don't have any other CSS what-so-ever ... and the 2 columns now sit next to each other.