I am new to css and html so please bare with me. I have a 4 column layout with a standard header and footer. Its something like this \[code\]<div id="header"></div><div id="leftnav"></div><div id="maincontent"></div><div id="nextcontent"></div><div id="addtionalinfo"></div><div id="footer"></div>\[/code\]
The image above shows my layout but i have two more columns apart from content and right menu. The header and footer are at the top and bottom and within that i would like to have the other divs as 4 columns within the header and footer. There might be times when additionalinfo div or nextcontent div might have any content to be presented. In such scenarios i want the maincontent div to span across the divs with no content. I understand that this can be achieved through css. But i am not sure how.