My tab structure consists of the following elements:
<ul>
<li id="first">First header</li>
<li id="second">Second header</li>
<li id="third">Third header</li>
<li id="fourth">Fourth header</li>
</ul>
<div id="first_div">First content (corresponding to first li)</div>
<div id="second_div">Second content (related to second li)</div>
<div id="third_div">Third content (associated with third li)</div>
<div id="fourth_div">Fourth content (linked to fourth li)</div>
While it displays correctly on the web view thanks to a simple script that shows/hides divs based on the selected list item, the print view requires a different layout:
First header
First content
Second header
Second content
Adding display: block to the entire structure causes the list items to be displayed before the corresponding divs.
Can this required layout be achieved using only CSS?