Apologies for my limited knowledge of CSS and HTML; I am relatively new to this.
I have gone through various questions and tutorials on how to align two divs side by side, but I seem to be facing difficulties in controlling the width of the divs in my code.
Here is the URL of the test site for reference.
Below is the HTML code:
/* HTML code goes here */
And here is the corresponding CSS:
/* CSS code goes here */
The two divs that I am trying to align are named highlights and ads. They are enclosed within a wrapper div called maincontent, located below another div named menu_area. Within the maincontent div, there is also a div for social buttons on the right, labeled socialgels.
In the demo page, highlights and ads are aligned well after adjusting their widths. However, for consistency purposes, I need the site to maintain a fixed width of 983px. Despite setting the widths of highlights to 662px and ads to 321px, with highlights floating left and ads floating right, they do not align correctly as expected. Sometimes, the ads div positions itself below the highlights div or shifts to the far right unexpectedly.
View the page with specified widths for both divs here.
In summary, I urgently need to set these specific widths to ensure the layout remains intact when additional content is added below them. Your assistance is greatly appreciated. Thank you.