I currently have a working jquery-ui sortable function that can handle elements of different heights and widths. However, I am facing an issue with its positioning as demonstrated in the following example:
Here is how it should ideally appear:
https://i.sstatic.net/OydUg.jpg
I believe this problem stems from a CSS floating issue, and despite hours of testing and searching, I have not been able to find a suitable solution. Even setting Box 4 to float:right does not resolve the alignment with Box 3.
You can view the HTML / CSS code causing the floating problem below:
<!DOCTYPE html>
<html>
<body>
<style>
.portlet {
float: left;
margin: 5px;
background-color: #b5b5b5;
}
#box1, #box4 {
width: 150px;
height: 220px;
}
#box2, #box3 {
width: 250px;
height: 100px;
}
</style>
<div style="float: left; width: 600px; padding: 10px;">
<div id="box1" class="portlet">
<div class="portlet-header">Box 1</div>
<div class="portlet-content">Box Desc</div>
</div>
<div id="box2" class="portlet">
<div class="portlet-header">Box 2</div>
<div class="portlet-content">Box Desc</div>
</div>
<div id="box3" class="portlet">
<div class="portlet-header">Box 3</div>
<div class="portlet-content">Box Desc</div>
</div>
<div id="box4" class="portlet">
<div class="portlet-header">Box 4</div>
<div class="portlet-content">Box Desc</div>
</div>
</div>
</body>
</html>
Are there any possible solutions or workarounds for this layout challenge?