Exercise 5.1

CSS Layout exercises

Exercise 5.1.1

What will the browser display given the following HTML body.

<div>one</div>
<div>two</div>
<div>three</div>

Exercise 5.1.2

What will the browser display given this HTML where the “block red” class is set to 100x100 pixels, float right?

<div class="block red">Header</div>
<div class="blue">
    Sed ut perspiciatis, unde omnis iste natus error
    sit voluptatem accusantium doloremque laudantium,
    …lots-more-text…
</div>
<div class="green">
    At vero eos et accusamus et iusto odio dignissimos
    ducimus, qui blanditiis praesentium voluptatum
    …lots-more-text…
</div>

Exercise 5.1.3

What will the browser display given this HTML where the color classes are all set to position relative, the “blue” class is set to right:100 and the “gold” class is set to left:100?

<div class="block red"></div>
<div class="block blue"></div>
<div class="block green"></div>
<div class="block gold"></div>

Exercise 5.1.4

Can you modify the positioning to place the blocks in the four corners of the viewport?

<div class="block red"></div>
<div class="block blue"></div>
<div class="block green"></div>
<div class="block gold"></div>

Exercise 5.1.5

Can you modify the positioning of a text to be in the upper left of an image (or other block)?

Exercise 5.2

Formatting is commonly done with Tables. Is this a good idea?

Exercise 5.3

Can you name a website that has implemented a progressive design.

Exercise 5.4

Explain the value of the features provided by the CSS preprocessor used in lab exercise 5.2.