Here is the code snippet:
<div id="root">
<div id="child1">xxxx</div>
<div id="child2">yyyy</div>
</div>
CSS :
#root{
width: 86%;
margin: 0 auto;
}
#root div {
width: 50%;
float: left;
border: 1px solid red;
}
This code centers the "root" div to the page, but there are alignment issues on certain resolutions.
To address this without using media queries due to compatibility with IE8, below is some JavaScript/jQuery code:
<script type"text/javascript">
if (window.screen.availWidth >= 1200 && window.screen.availWidth <= 1390) {
$("#root").css("width", "92%");
} else {
$("#root").css("width", "86%");
}
</script>
However, the div content misaligns when the browser window is resized. The challenge is how to keep the div centered for all resolutions and window sizes.
If you're unsure about setting the width percentage dynamically for each window resize, a solution could involve calculating the center based on the viewport size changes. This approach can help maintain alignment regardless of the screen resolution or resizing.
Feel free to experiment with responsive design techniques or seek further guidance on resolving this issue effectively.
Best regards,