Float – keeping simple

Keeping simple

2 columns layout

HTML<div id="layout"> <div id="header">Top Header</div> <div id="navbar"> <h2>Navigation</h2> <ul> <li>Nav 1</li> ... <li>Nav 10</li> </ul> </div> <div id="content"> <h2>Content here</h2> <div>Lorem ipsum... </div> </div> <div id="footer">Bottom Footer</div>

</div>

CSS

Only #header and #footer have height; Only #navbar has width

Adding float

When #content is smaller than #navbar add min-height

Add margin-left (= width of #navbar)

Responsive: example 1 = remove float

Responsive: example 2 – display none

Using float left & float right

Float:left and Float:right

Add width to #content

#content + #navbar < 100% (when using border or margins)

100%

#content + #navbar = 100% (when not using border or margins)

Check on small screens

Responsive example