7/24/2019 Css Layout 01

1/12

SS Layout

http://www.yourhtmlsour

ce.com/stylesheets/cssla

yout.htmlby Ross Shannon

One of the major benets of using CSS is that youre no longer

forced to lay your sites out intables. The layout possibilities of CSS

give you complete control over the positions and dimensions of all

page elements.

If youve tried laying out a page with tables you have probably been

irritated in the past by the inability of your browser to render your

page e!actly as you had wanted. Table structures arent the most"e!ible of page layout devices as they werent really designed for

this purpose. #ow however with some reliable browser supportin

the current generation of browsers you have a new and much

improved option.

Working with divs

The element is well$suited to ta%e over from tables as

a layout tool. It is a block-levelelement that is used to divide the

page into logical sections and can hold whatever you need inside it.

&ou can have blocksof te!t in divs and then put them together in

a layout. &ou have immense freedom with the ability to add these

bloc%s or 'layers( on top of each other. Chec% out this example.

The divtag has few attributes of its own )save for align="left |

right | center"* with all of its formatting applied throughstylesheets. To set up a simple navigation bloc% we would use

http://www.yourhtmlsource.com/stylesheets/csslayout.htmlhttp://www.yourhtmlsource.com/stylesheets/csslayout.htmlhttp://www.yourhtmlsource.com/stylesheets/csslayout.htmlhttp://www.yourhtmlsource.com/about/http://www.yourhtmlsource.com/tables/http://www.yourhtmlsource.com/accessibility/browsersupport.htmlhttp://www.yourhtmlsource.com/accessibility/logicalstyle.htmlhttp://www.yourhtmlsource.com/examples/positioning2.htmlhttp://www.yourhtmlsource.com/stylesheets/csslayout.htmlhttp://www.yourhtmlsource.com/stylesheets/csslayout.htmlhttp://www.yourhtmlsource.com/stylesheets/csslayout.htmlhttp://www.yourhtmlsource.com/about/http://www.yourhtmlsource.com/tables/http://www.yourhtmlsource.com/accessibility/browsersupport.htmlhttp://www.yourhtmlsource.com/accessibility/logicalstyle.htmlhttp://www.yourhtmlsource.com/examples/positioning2.html

7/24/2019 Css Layout 01

2/12

code li%e this )with the CSS being in an external .css leor style

bloc%*+

divnavigation,width+ -p!/ bac%ground+ gray/ padding+

0p!/ 1

...navigation links...

This e!ample code uses some very simple CSS code. 2ll bloc%$level

elements can have a widthproperty specied in units or as a

percentage and then I just added a background colourand

some paddingspace around the divcontent.

Floating Elements

Since divisions are bloc%$level )i.e. they default to 03 of the

available screen width and add line brea%s between each other*

they will all just stac% up underneath one another unless you

position them in some way. The simplest way to do this is to use the

CSS !oatproperty the bac%bone of most CSS layouts. &ou

can "oatany element leftor right and it will align itself over to the

side of whatever element it is contained within.

column",!oat: left#width+ -p!/ padding+ 0p!/ 1

column$,!oat: left#width+ -p!/ padding+ -p!/ 1

To create columnedlayouts% you simply"oatall of the column

divisions to the same sideand they will line up beside each other

as long as they t. 4aying out content in this way has immediate

benets such as progressive downloading )as the te!t is loaded it is

displayed onto the page immediately so your visitor can read as the

page is forming around the te!t*. &ou can also give each column

specic margins and padding giving you greater freedom to

space your content out. 5elow is an e!ample of code li%e the CSS

above with both divelements given the"oat+ left/property+

Column 0

Column -

http://www.yourhtmlsource.com/stylesheets/introduction.html#implementationhttp://www.yourhtmlsource.com/stylesheets/cssbackgrounds.htmlhttp://www.yourhtmlsource.com/stylesheets/cssspacing.htmlhttp://www.yourhtmlsource.com/stylesheets/cssspacing.htmlhttp://www.yourhtmlsource.com/stylesheets/introduction.html#implementationhttp://www.yourhtmlsource.com/stylesheets/cssbackgrounds.htmlhttp://www.yourhtmlsource.com/stylesheets/cssspacing.htmlhttp://www.yourhtmlsource.com/stylesheets/cssspacing.html

7/24/2019 Css Layout 01

3/12

6ith these "oating elements you can mimic a table structure and

have your page in a traditionallayout without all the drawbac%s of

tables. 7loating elements ta%es a little bit of practice )especially if

the columns are not the same height* but can result in many

traditional and non$traditional layouts. 5ut CSS wasnt content tomerely emulate the layout mechanisms of the past 8 now you can

control the position of elements on the page down to the pi!el.

SS Positioning

There are two other types of positioning beyond

"oating+ absoluteand relative. The codes youll be using are

tag,position+ choice/ top+ p!/ bottom+ p!/ left+ p!/ right+

p!/ 1

Browser Compatibility Note:

2bsolute and relative positioning is a feature of the CSS-

specication and so is supported by & 'nternet (xplorer

)* & +o,illa & irefox & peraand & Safari. 7or best

results use the newest browsers available as they will have

improved and more accurate rendering capabilities. 9o not

use these if your users may be using older browsers.

Absolute Positioning

If you position an element )an image a table or whatever*

absolutely on your page it will appear at the e!act pi!el you specify.

Say I wanted a graphic to appear :; pi!els from the top of the page

and

7/24/2019 Css Layout 01

4/12

for layout elements that will appear on every page but put the code

inline for once$o= things.

The image would appear like so. 2s you can see it is possible to

have things overlappingwith absolute positioning.

Positioning Layers

To create what we call layerswith the divtag use code li%e this+

layer stuff

7irst you specify the positionof the layer thenits dimensions)which is optional the layer will resi>e itself*. If you

want to give colour to the layers bac%ground add the bac%ground$

color+ red/attribute in with the rest of your CSS code. 2s usual you

can use websafe colours or named colours.

2nything that could go on a normal page can be positioned

with divs. They load far fasterthan say a table layout. Tables do

not display on$screen until they have been downloaded in their

entirety. 6ith layers all the information a browser needs is

contained in the style attributes youve added. Therefore it will

display as soon as any part of it is downloaded.

To get layers overlappingeach other you need to use the ,-

indexcommand. 2dd >$inde!+ 0in with the positioning code and this

element will appear above everything without this command. If you

want something else to go over this layer too add >$inde!+ -and so

on. The higher the inde! the closer the divwill appear to the front

of the page.

?ut the layer that holds your pages content at the topof your

code. This is what readers want to see immediately. &our navigation

and other presentational components can then load aroundthis

allowing your reader to begin reading as soon as possible and

ma%ing your navigation available when it is most li%ely to be used+

after the page has been read.

To see some e!amples of designs laid out with

both "oatand absolutepositioning have a loo%$see at

my redesignssection.

http://www.yourhtmlsource.com/examples/positioning1.htmlhttp://www.yourhtmlsource.com/accessibility/nonditheringcolours.htmlhttp://www.yourhtmlsource.com/stylesheets/namedcolours.htmlhttp://www.yourhtmlsource.com/redesigns/http://www.yourhtmlsource.com/examples/positioning1.htmlhttp://www.yourhtmlsource.com/accessibility/nonditheringcolours.htmlhttp://www.yourhtmlsource.com/stylesheets/namedcolours.htmlhttp://www.yourhtmlsource.com/redesigns/

7/24/2019 Css Layout 01

5/12

Relative Positioning

6hen you position something relatively you are modifying its

position from where it would have been if you hadnt changed

anything. I nd that to be the easiest way of thin%ing about it. 7orinstance in the ne!t sentence Ill o=set some words 0-p! down and

--p! right relative to their start position.

6ell here are some words)some words*

The words in parentheses are the words in their original positions

and the bold ones are the moved words. The CSS code to move

them was

@span styleABposition+ relative/ top+ 0-p!/ left+ --p!/Bsome

words@Dspan

&ou should notice that if you want to move something left you use

the rightcode and push it away from that side and vice$versa.

To override an inherited positionproperty and ma%e the element

just a normal part of the page again set it to position+ static.

Horizontal entering

Centering a divor any other block-levelelement hori>ontally is a

special case for CSS layout even moreso because there is a bug in

Internet E!plorers implementation of the standard way of doing it.

The standard way is to set the elements hori>ontal marginvalues

to auto li%e so+

wrapper,width+ F;p!/ margin+ auto/ 1

That will wor% in browsersli%e 7irefo! Safari or Opera. Gowever

this will have no e=ect in versions of Internet E!plorer below F.

There is a hac% we can use though so that we get hori>ontal

centering in all browsers. To whit IE incorrectly centers block-

levelelements if the element that theyre contained in has te!t$

align+ centerapplied. So we can apply this property to

the bodyelement and all the elements within it will be centered.

body,te!t$align+ center/ 1

http://www.yourhtmlsource.com/accessibility/logicalstyle.htmlhttp://www.yourhtmlsource.com/starthere/browserreview.htmlhttp://www.yourhtmlsource.com/accessibility/logicalstyle.htmlhttp://www.yourhtmlsource.com/accessibility/logicalstyle.htmlhttp://www.yourhtmlsource.com/accessibility/logicalstyle.htmlhttp://www.yourhtmlsource.com/starthere/browserreview.htmlhttp://www.yourhtmlsource.com/accessibility/logicalstyle.htmlhttp://www.yourhtmlsource.com/accessibility/logicalstyle.html

7/24/2019 Css Layout 01

6/12

One nal step is then necessary. The line above will of course

center all the te!t inside the centered elements as well which is

generally not what we want so we need to align the te!t within

bac% to the left. So heres all the code+

body,te!t$align+ center/ 1

wrapper,width+ F;p!/ margin+ auto/ te!t$align+ left/ 1

Easy when you %now how ehH 5e careful if youre planning on

mi!ing absolute positioning and this centering method in the

same layout. If you want other elements to be absolutely positioned

inside the wrapper ma%e it relatively positioned rst.

wrapper,position+ relative/ width+ F;p!/ margin+ auto/ te!t$

align+ left/ 1

This will ma%e an inner element that you absolutely position at for

e!ample top+ / left+ /appear at the top left corner of the wrapper

and not of the the top left of the entire window.

#e!t stop+ adding bordersto your elements.

esigning 0ithout 1ables: 2sing 3SS

I highly recommend this boo% for those wanting to learn how to write CSS

including using CSS for layout. Site?oint ships anywhere in the world and you

can download the rst ) chapters for free.Read our review.

4 !"

http://www.yourhtmlsource.com/stylesheets/cssborders.htmlhttp://www.yourhtmlsource.com/books/reviews/dwtucss.htmlhttp://www.sitepoint.com/launch/c3ad2e/2/3http://www.yourhtmlsource.com/books/reviews/dwtucss.htmlhttp://www.yourhtmlsource.com/books/reviews/dwtucss.htmlhttp://www.yourhtmlsource.com/stylesheets/cssborders.htmlhttp://www.yourhtmlsource.com/books/reviews/dwtucss.htmlhttp://www.sitepoint.com/launch/c3ad2e/2/3http://www.yourhtmlsource.com/books/reviews/dwtucss.html

7/24/2019 Css Layout 01

7/12

@9OCT&?E html

@html langABenB

@head

@meta http$eJuivABContent$TypeB contentABte!tDhtml/ charsetAKT7$

7/24/2019 Css Layout 01

8/12

Pimport BDbubbleicious.cssB/

@Dstyle

@lin% relABstylesheetB typeABte!tDcssB hrefABDprint.cssB mediaABprintB

@lin% relABshortcut iconB typeABimageDicoB hrefABDfavicon.icoB@lin% relABsearchB typeABapplicationDopensearchdescriptionQ!mlB

titleABGTR4 SourceB hrefABDhtmlsource$search.!mlB

@script srcABhttp+DDwww.google.comDjsapiB@Dscript

@script

google.load)BjJueryB B0B*/

@Dscript

@script srcABDsourcescripts.jsB typeABte!tDjavascriptB@Dscript

@script typeABte!tDjavascriptB

var gaJ A gaJ LL /

gaJ.push)Uset2ccountU UK2$-:;-F$0U*/

gaJ.push)Utrac%?ageviewU*/

)function)* ,

var ga A document.createElement)UscriptU*/

ga.src A )Uhttps+U AA document.location.protocol H Uhttps+DDsslU +

Uhttp+DDwwwU* Q U.google$analytics.comDga.jsU/ ga.set2ttribute)UasyncU UtrueU*/

document.getElements5yTag#ame)BheadB*.appendChild)ga*/

1*)*/

@Dscript

@style typeABte!tDcssB

@$$

body ,margin+ Vem/ bac%ground$image+ none/ bac%ground$color+ white/

font$si>e+ .

7/24/2019 Css Layout 01

9/12

@div styleABposition+ absolute/ left+ 0-p!/ top+ Xp!/ bac%ground$color+

orange/ width+ ;-p!/ padding+ 0Np!/B2nd this will be the main content

bloc%. I have not used another GTR4 tag beyond the @codediv@Dcode tag

on this page to lay it out. #o @a hrefAB..DtablesDB classABmoreB styleABfont$weight+ boldBtables@Da no transparent images/ just @codediv@Dcodes

and style commands.@br

This layer may loo% li%e a table but you may notice that it is positioned above

the layer to the left.@Ddiv

@div styleAB>$inde!+ -/ position+ absolute/ left+ ;0p!/ top+ 0NNp!/

bac%ground$color+ yellow/ width+ 0p!/ padding+ 0p!/ border+ red -p!

dashed/B2nd yet another layer goes above the main content. @p#otice the

tasteful border.@Dp@Ddiv

@div styleABposition+ absolute/ left+ 0p!/ bottom+ 0p!/ bac%ground$color+

WXXCC/ padding+ Np!/ color+ white/ border+ Np! white groove/ font$si>e+

0Vpt/BI could go on but I thin% you see the brilliance of these things.@Ddiv

@div styleABposition+ absolute/ left+ 0-p!/ bottom+ 0$inde!+ 0/ position+ absolute/ right+ 0p!/ bottom+ 0p!/

bac%ground$color+ WccVV/ width+ -ing this window by pulling the corner. The layers will move

around as the page sides get closer to them because they are positioned on

the page relative to its edges and can react if those edges change.@Ddiv

@p2nd hereUs some words. This te!t comes last in the code but appears top

of the page as thereUs UnothingU above it.@Dp

@Dbody

@$$ Y7inY $$

@Dhtml

! -"

7/24/2019 Css Layout 01

10/12

@9OCT&?E html

@html langABenB

@head

@meta http$eJuivABContent$TypeB contentABte!tDhtml/ charsetAKT7$

7/24/2019 Css Layout 01

11/12

var gaJ A gaJ LL /

gaJ.push)Uset2ccountU UK2$-:;-F$0U*/

gaJ.push)Utrac%?ageviewU*/

)function)* , var ga A document.createElement)UscriptU*/

ga.src A )Uhttps+U AA document.location.protocol H Uhttps+DDsslU +

Uhttp+DDwwwU* Q U.google$analytics.comDga.jsU/

ga.set2ttribute)UasyncU UtrueU*/

document.getElements5yTag#ame)BheadB*.appendChild)ga*/

1*)*/

@Dscript

@style typeABte!tDcssB

@$$

body ,margin+ Vem/ bac%ground$image+ none/ bac%ground$color+ white/

font$si>e+ .

7/24/2019 Css Layout 01

12/12

@$$ Y7inY $$

@Dhtml