Dismiss Notice
Welcome to Our Community
Wanting to join the rest of our members? Feel free to sign up today.

css web page styling

Discussion in 'Programming' started by misheck, Oct 20, 2009.

  1. misheck

    misheck New Member Webmaster

    I need to to format or design my webpage using CSS. I want to have a body size of the page just large enough to accomodate all screen sizes. Then inside the body I need to have few boxes/columns inside the webpage there is basically going to be 3 columns 40%, 20% & 30 % and the rest used up by padding etc. All this will be done using css div.largecolumn, div.small column etc.
    What I dont know how to do is to fomat the whole body to a size that I want and then after I aslo need to format the div tags to be able to fit into the new body size. Will I be able to format the div tags in css directly eg. div.largecolumn {width: 40%} also will I be able to use percentage rather than px because I have no clue how to measure a page using pixels or will I need to reference them after body tag?
  2. airforce1

    airforce1 New Member Webmaster

    The name, CSS - cascading style sheet, tells us all about it. :)
    The selectors with higher cascade levels or weight all be applied to the final elements or tags on your pages. Generally practice like this: naming an outer container div to hold all the contents and setting a width as you want via % or px, both would be OK.
  3. Alfredwinston

    Alfredwinston New Member Webmaster

    It will be ok to use any of both . I suggerst you using % for width since using px in width can trouble you in low resolutions
  4. Phunk Rabbit

    Phunk Rabbit New Member Webmaster

    Hi mishec,

    As a quick example (because example is a better tool to learn from than theory, imo) I will show you the structure I would use below:

    The HTML:

    Be sure to add your DOC type etc. I normally use XHTML 1.0 Strict and there maybe issues using my code below in anything other than this.

         <div id="wrapper">
              <div id="largecolumn">
                   <p>The small red fox jumped over the lazy brown dog.</p>
              <div id="smallcolumn">
                   <p>The small red fox jumped over the lazy brown  dog.</p>
              <div id="mediumcolumn">
                   <p>The small red fox jumped over the lazy brown  dog.</p>
              <p class="clear"></p>
    So what we have here is:

    ID: Wrapper, this is used to contain your columns.
    ID's: large, medium, small - The columns.
    Class: Clear, This is used to stop anything below, i.e. footer etc, from bumping up into your columns or floating underneath a short colum when you dont want it to.

    The basic CSS is as follows:

    /* Reset your elements */
    div, h2, p { margin:0; padding:0; }
    /* Classes */
    .clear { clear:both; }
    /* ID's */
    #wrapper, #largecolumn, #mediumcolumn, #smallcolumn { float:left; }
    #wrapper {
         width: 96%;
         padding: 0 2%;
    #largecolumn {
         width: 40%;
         margin: 0 1%;
    #mediumcolumn {
         width: 30%;
         margin: 0 1%;
    #smallcolumn {
         width: 20%;
         margin: 0 1%;
    #wrapper div h2 {
         margin: 5px 5%;
    #wrapper div p {
         margin: 3px 5%;
    This will produce your 3 columns and it gives a small gutter between each one, I have also popped a little spacing around the header and paragraph.

    Most importantly, experiment. Deleting a line or style may mess up the page but you can always change it back, the best way to learn is to experiment and learn from your achivements, mistakes and failures/sucesses.

    I hope this post has given you atleast a little insight.
  5. craftygeek

    craftygeek New Member Webmaster

    One thing to consider when building using fluid widths, is that when viewed on a widescreen monitor, some paragraphs can become very wide & difficult to read as a result.

Featured Resources (View All)

Share This Page