Integrated CA - Layout

Layout

For my PSD design I used the 960 grid system, even though there is a 960 CSS I wanted to attempt the layout myself.

To centre align my site I created a div class "wrapper". To align it to the centre of the page I set the margin left and right to auto. I also gave the wrapper a width of 980px. I had designed it for 960px but felt the design was cramped at either side. I gave it an extra 10 px margin on both sides.

Margin is used to space out elements of a web page. For example if I give a div a margin-left:20px it will push it to the right 20px.

Another handy bit of CSS is padding. Padding is like margin except it effects the elements within the div. One thing I noticed with padding is that it adds on width/ height on a div. for example if I set the width of a div to 900px and then add padding-left: 50px the div will appear as 950px. There is a hack to get around this but I was afraid it would not work in IE. so I used some maths and took the amount of padding from the width/height of the div to get the size I wanted.

A web page is displayed following the structure of the HTML to disrupt this we use floats to allow elements to sit side by side. When a float is used it breaks the normal flow of the page. Any elements below will appear out of place. To fix this we must clear the float using clear: both; , I use this
quite a bit on the site and set up a div. <div class ="clear"></div>

Below in fig 1 we see an example of where I use float.


.aboutText {
float: left;                       //positions the text on the left
margin-left: 20px;         // pushes the div 20px to the right
min-height: 400px;       //sets a min and max height the div can go.
max-height: 400px;
width: 500px;
}


.aboutContent img {
float: right;                    //positions the img on the right
margin-left: 20px;         // pushes the div 20px to the left
margin-right: 20px;
}

fig 1