Consider the XHTML code below which sets up a 2-column page layout.
<body>
<div id=”left”>
(Contents of left column)
</div>
<div id=”right”>
(Contents of right column)
</div>
</body>
Suppose the XHTML code above is linked to the following CSS rules which use absolute positioning to lay out the two columns so that both columns flex when the window size is changed. Rewrite these rules so that the page width is divided between the columns in accordance with the Golden Ratio. Leave the padding unchanged and still allow both columns to flex.
#left, #right {
position: absolute;
top: 0;
margin: 0;
}
#left {
width: 25%;
left: 0;
padding: 0 2%;
}
#right {
width: 69%;
left: 29%;
padding: 0 1%;
}
<body>
<div id=”left”>
(Contents of left column)
</div>
<div id=”right”>
(Contents of right column)
</div>
</body>
Suppose the XHTML code above is linked to the following CSS rules which use absolute positioning to lay out the two columns so that both columns flex when the window size is changed. Rewrite these rules so that the page width is divided between the columns in accordance with the Golden Ratio. Leave the padding unchanged and still allow both columns to flex.
#left, #right {
position: absolute;
top: 0;
margin: 0;
}
#left {
width: 25%;
left: 0;
padding: 0 2%;
}
#right {
width: 69%;
left: 29%;
padding: 0 1%;
}