Tabless Design

[dc1pop]

Im trying to get into tableless desgin (by using css)

How can i make 2 css align next to each other instead of going down one line?

Heres the code i have:

<div class="contentboxleft"><div class="contentright">a</div></div>
<div class="contentboxright"><div class="contentleft">a</div></div>

It currently displays as:

-
-

But i want it to display like:

- -

Any one know?

Thanks,
Darren

Ive done this now using the float element. Blonde moment :D

Thanks,
Darren

 

[Mateja]

Ok my reply was tosh, let me have another look. :D

do you have the css to paste here?

 

[LeetPCUser]

css file

#container
{
 width:300px;
}

#contentboxleft
{
 float:left;
 width:150px;
}

#contextboxright
{
 float:right;
 width:150px;
}

here

html file
<div id="container">
  <div id="contentboxleft">
    woot, left
  </div>
  <div id="contentboxright">
    woot, right
  </div>
</div>

hope this helps!

 

[Hobnob]

float is not always the best rout to go, there are allot of problems you might run into later on in your project (but then again you might not, it all depends on what you are trying to achieve in the end). Here is another option you might find useful, if not for this particular task I know it will help you later.

keep the html code you already have and create a new css rule as follows:

div
{
display: inline;
}

and remove the 'float' from the rest of your css rules.

* when working with floats and inline displays you will find this handy too:
clear: both; clear: left; clear: right;

however, you will need to learn why and where that rule will go yourself (if I told you you wouldn't learn any thing).

 

[LeetPCUser]

ehhh floats work well never had a problem. Inline is confusing.

 

[dc1pop]

Thanks guys and PCWEBAdvice i had my style sheet on my computer but didnt feel the need to post it up. I was thinking it was to do with the way the divs are layed out.

 

[LeetPCUser]

Inline can work but is confusing. I've never had a problem with the floats and I use them all the time. Just make sure that the two fill the container in width. If it is even 1px too big it will return.

 

[Dan]

You definately don't want to use inline.. that will make it stay.. in line.. and there would be no point in having it be a div. Span's are better for that.