Head First html and css

table
 
of
 
contents

---

xx
 
11
Arranging Elements
layout and positioning
It’s time to teach your HTML elements new tricks. 
We’re not 
going to let those HTML elements just sit there anymore—it’s about time they get 
up and help us create some pages with real 
layouts
. How? Well, you’ve got a good 
feel for the

and structural elements and you know all about how the 
box model works, right? So, now it’s time to use all that knowledge to craft some real 
designs. No, we’re not just talking about more background and font colors—we’re 
talking about full-blown professional designs using multicolumn layouts. This is the 
chapter where everything you’ve learned comes together.
Did you do the Super Brain Power? 
 
 
 
472
Use 
the 
Flow, 
Luke 
473
What 
about 
inline 
elements? 
475
How it all works together 
 
 
 
 
476
How to float an element 
 
 
 
 
479
The 
new 
Starbuzz 
483
Move the sidebar just below the header
 
 
488
Fixing the two-column problem 
 
 
 
491
Setting the margin on the main section
 
 
492
Solving 
the 
overlap 
problem 
495
Righty 
tighty, 
lefty 
loosey 
498
Liquid 
and 
frozen 
designs 
501
How absolute positioning works 
 
 
 
504
Changing 
the 
Starbuzz 
CSS 
507
How CSS table display works
 
 
 
511
Adding HTML structure for the table display 
 
 
513
What’s the problem with the spacing?
 
 
517
Problems 
with 
the 
header 
524
Fixing the header images with float 
 
 
 
525
Positioning 
the 
award 
528
How does fixed positioning work? 
 
 
 
531
Using a negative left property value 
 
 
 
533
Exercise 
Solutions 
539
p
h2
p
p
img
img
img
img
em
span
em
span
p id=“amazing”
text
text
text
text
h2
h1
text
text
text
text
text
text
text