CSS CSS Layout - For designing

Ok ive decided to hop and learn some more.

I've got some good skills with CSS Navs, styling and such.

I'm having basic problems when CSS Comes into action with putting the content in places that are strange and becomes confusing at times. Im ok with a simple a side bar and a main content area, but when putting a content (divs) inside the content area its all over the place.

Heres something ive mapped up in tables to see the layout and try work out how to set all the CSS and divs for this.

RevLimit Magazine - The Uk's No.1 Free Online Magazine

^ Websites mainly my project.

 

The easier thing to do is to replace the table and td elements of your current page with divs. When you have a problem with a section of the layout (header, foolter etc) just move it to a separate file and work the details there.

So if you have a table for the header to include a banner and a search box with tables:

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="70%">Banner</td>
    <td width="30%">Search box</td>
  </tr>
</table>

With divs

Code:

<div style="width: 100%;">
  <div style="width: 70%; float: left;">Banner</div>
  <div style="width: 30%; float: left;">Search Box</div>
</div>

So it's like having a table and you can use the space/indents as a guide for the html tree of elements. The floats make the divs placed inline if there is enough space to accommodate them.



You will face difficulties as some properties of the tables cannot easily be accommodated by the divs and the workarounds maybe complex. But in general for basic layouts is straight-forward.

One other thing to do is to preset the basic elements like divs with a css reset to get around browser differences.

<style type="text/css">
body {width: 700px; margin:0 auto; padding: 0}
div {position: relative; margin:0; padding: 0}
</style>

so by default divs have the property position setup to relative and no margin or padding.

 

thankyou for submiting your post.

Ive re-developed the hole website with divs in form of CSS layout and sorted everything out, looks like i knew my code back from in the days. works in all browsers so im happy that it taken me 5minutes to refresh my memory. thanks again