Tuto WEBDEV 25

Part 8: Responsive Web Design 317 Positioning anchors The position anchor proposes the following choices: • An anchor to left. • A centered anchor. • An anchor to right. ▶ Let’s study these different possibilities: • The centered anchor must be selected in order for the control to remain centered when resizing the browser. • The anchor to left is used to specify that the size between the control and the left page border will always be the same proportionally to the page size. The section found on the right of control can be truncated if the browser reduction is too important. • 1000px page 200px 20% 300px 30% 500px 50% BUTTON (Anchored to left, fixed width) 500px page 100px 20% 300px 60% BUTTON (Anchored to left, fixed width) 100px 20% The anchor to right performs the same action as the anchor to left, but on the right. ▶ In our example, the search button found in the top right corner of page is anchored to right. Meaning that the spacing between the right border of control and the right page border will always be the same proportionally to the page width.