Step 4: webpage layout and div floating

1. Float. First, let the border float to the right of the main content. Use css to control float:

The code is as follows:	Copy code
# Sidebar-{ Float: right; Width: 280px; Background: darkgreen; }

The performance is as follows:

2. Write some text into the box of the main content. Write in html file:

The code is as follows:

Copy code

<Div id = "content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus Euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, Purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst. </Div>

But you can see that the box of the main content occupies the width of the entire page-container. We need to set the right boundary of # content to 280px. So that it does not conflict with the border.