When creating HTML elements using an Ajax call from the server-side, it can be challenging to align them properly on a responsive web page. Below is an example of how elements are generated with an Ajax call:
var html = "";
$.ajax({
type: "POST",
url: "MethodName",
data: id,
cache: false,
success: function(data){
$.each(data, function() {
$.each(this, function(k, v) {
html += '<div class="wrapper"><div class="content">Dynamic data here</div></div>';
});
});
$(".divs").append(html);
}
});
In the front-end, there is styling in place:
<style>
.content {
float: right;
}
</style>
<h4 class="content"&llt;Data here</h4>
<div class="container">
<div class="divs"&llt;
</div>
</div>
The heading h4 is aligned top right on the page, but there seems to be an issue with aligning the dynamically generated content within the (.divs) section. One possible reason could be that it's appended within a parent div, causing design disruptions. Is there a way to adjust the alignment of both elements using CSS?
N.B: While I prefer not to use jQuery for design purposes, any suggestions involving it are welcome. It's important to note that each data item is processed individually in the Ajax call loop.