div layouts

[liamloveslearning]

hey everyone, does anybody have an idea of how to make these 3 tables side by side rather than stacked? ive been on max css design and it mentioned floating them left, however it puts them pixel perfect, id like them side by side but with a 10ml gap between? sorry if this seems bone idle and half hearted question its just winding me up!" thanks, heres my code

 

<div align="center">
<div id="topcontainer" class="topcontainer">{OVERALL_HEADER}</div>
<div id="catcont" class="catcont" style="height:400px; width:232px;">
  <div id="cattitle" class="cattext">Tasks by categories</div>
  <div class="catlist" id="cattext">{LOOP: CATS}
    <td><a href="{SITE_URL}projects.php?cat={CATS.id}">{CATS.title}</a><br /></td>
    IF("{CATS.counter}"%"3"){
    <tr>{:IF}
      {/LOOP: CATS} <br />
      </tr>
  </div>
<br />
</div>
<div class="posttask" id="posttask">BLAHHHH</div>
<div class="posttask" id="posttask" >BLAHHHH</div></div>

[TheFilmGod]

float: left;

margin: 0 0 0 10px;

[liamloveslearning]

thanks for replying, so can i ask whats the float anchored to? my page container? when i minimize my browser my elements move and stay in order, only when i float a div it doesnt move and when the rest do it looks awful 

 

 

[scottybwoy]

float stays in-line with normal flow, but also gets converted to a block element.  Block elements generally don't sit next to each other unless you specify (which float does).  Normal flow means it will remain relative to the object that comes before it in the code (but sometimes that not the case with float:right;)  What I would suggest is for all you width declarations use %'s, even for margins and padding, use em for heights, this way it shouldn't cock up so much when changing screen resolution or text size.  Play around its the best way to learn, don't get too stressed, take a break.  Good luck

[liamloveslearning]

i've been trying to use percentiles but its so bloody hard! i hate it 

[ToonMariner]

Avoid divitis and NEVER USE AN ID MORE THAN ONCE ON A PAGE!!!

 

use SEMANTIC markup

 

keep your presentational code in a style sheet (don't use align="center")

 

you code could be re-written like so

 

<div id="datadisplay">
<h1>{OVERALL_HEADER}</h1>
  <h2>Tasks by categories</h2>
  <div id="cattext">{LOOP: CATS}
    <td><a href="{SITE_URL}projects.php?cat={CATS.id}">{CATS.title}</a></td>
    IF("{CATS.counter}"%"3"){
    <tr>{:IF}
      {/LOOP: CATS}
      </tr>
  </div>
<p>BLAHHHH</p>
<p>BLAHHHH</p>
</div>

 

The one part where I fall over is the table rows and table cells but no table. Is this tabular data or not? if it is use a table - if not get rid of the tr and td.

 

Hopefully though you will see that if you stick to correct mark up and don't go mad with classes and ids, and when you do use them you use a sensible name you can create a well structured document that is both easy to build and easy to maintain.

 

DON'T GET BOGGED DOWN WITH CRAP - KISS (Keep It Simple Stupid - not calling anyone stupid its just what the thing stands for!).

[liamloveslearning]

ahh okay, ive scrapped my page so ill start from fresh using your suggested markup; thanks everyone!

[Wolphie]

You should be able to add the display: inline; CSS property to each of the tables.

[liamloveslearning]

Sorry can i just ask, you say use semantic markup so by this do you mean i shouldnt be styling my content using a styleheet? i should use html tags such as <H1> <p> and what not? also you say "(don't use align="center")" to avoid using this would i place my positional code within my stylesheet rather than in the tag? if that makes sense? thanks again 

[haku]

Semantic code is the practice of having the contents of a tag match the tag. For example, headings should go in h1, h2 or h3 tags etc, and shouldn't go in <p> tags. Tables should only be used for data that is tabular in nature. Quote tags or blockquotes should be used for quotes. <ul> and <ol> tags should be used for lists etc.

 

As to why you shouldn't use align=center, well there are two reasons. The first is that the align attribute has been deprecated, and may not be supported in future browsers (and appears to not be supported in FF3). The other reason is that all positioning and anything that creates the image of the site should be done with CSS, and kept different from the markup (contents) of the site, and as such should be done with CSS.

[liamloveslearning]

ahh brilliant!  but can I just ask, or so ive been told but nobody uses header tags anymore do they?  ??? sorry to sound really naive and new to this im just curious, thanks again!

[haku]

Not only do people use them, they should be used! Because they generally contain keywords, they tell the search engines clues as to what the content that follows is about. Header tags are some of the most important to use.