css web page styling

**misheck** · 10-20-2009, 10:08 PM

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?

**airforce1** · 10-21-2009, 02:04 AM

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.

**Alfredwinston** · 10-22-2009, 06:37 AM

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

**Phunk Rabbit** · 05-18-2010, 10:12 AM

Originally Posted by misheck

I need to to format or d...

...eference them after body tag?

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.

HTML Code:

<body>
     <div id="wrapper">
          <div id="largecolumn">
               <h2>Title</h2>
               <p>The small red fox jumped over the lazy brown dog.</p>
          </div>
          <div id="smallcolumn">
               <h2>Title</h2>
               <p>The small red fox jumped over the lazy brown  dog.</p>
          </div>
          <div id="mediumcolumn">
               <h2>Title</h2>
               <p>The small red fox jumped over the lazy brown  dog.</p>
          </div>
          <p class="clear"></p>
     </div>
</body>

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:

Code:

/* 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.

**craftygeek** · 06-08-2010, 01:25 PM

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.

Webmaster SEO Tools, Resources, Web Hosting, Discussion Forums

Thread: css web page styling

LinkBack

Thread Tools

Display

css web page styling

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions