Tabless Design

dc1pop · 06-19-2006, 09:38 AM

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>
????: NamePros.com http://www.namepros.com/web-design-discussion/208766-tabless-design.html

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

Thanks,
Darren

Mateja · 06-19-2006, 10:04 AM

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

do you have the css to paste here?

LeetPCUser · 06-19-2006, 10:13 AM

Code:

css file

#container
{
 width:300px;
}

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

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

here

Code:

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

hope this helps!

Hobnob · 06-19-2006, 10:33 AM

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 · 06-19-2006, 11:26 AM

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

dc1pop · 06-19-2006, 12:19 PM

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 · 06-19-2006, 12:41 PM

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 · 06-19-2006, 12:44 PM

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.

06-19-2006, 09:38 AM	THREAD STARTER #1 (permalink)
dc1pop Senior Member Join Date: Dec 2004 Location: UK Posts: 1,893	Tabless Design 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> ????: NamePros.com http://www.namepros.com/web-design-discussion/208766-tabless-design.html 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 Thanks, Darren

06-19-2006, 10:04 AM	#2 (permalink)
Mateja NamePros Member Join Date: Aug 2003 Location: England Posts: 124	Ok my reply was tosh, let me have another look. do you have the css to paste here? Last edited by Mateja; 06-19-2006 at 10:10 AM.

	NamePros Design Contests	Forum Sponsorship
	Join in on the FUN! You can start an affordable design contest and pick from entries talented members submit or you can enter a design contest for a chance to win CASH PRIZES! What are you waiting for? Get started in the fun TODAY! - Banners, Logos, Mascots, and MORE! (Please READ the design Contest section rules Prior to starting or entering a contest)

06-19-2006, 10:33 AM	#4 (permalink)
Hobnob NamePros Member Join Date: Mar 2006 Location: (US) Missouri Posts: 70	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).

06-19-2006, 11:26 AM	#5 (permalink)
LeetPCUser Account Closed Join Date: May 2005 Location: Whitewater, WI Posts: 3,710	ehhh floats work well never had a problem. Inline is confusing.

06-19-2006, 12:19 PM	THREAD STARTER #6 (permalink)
dc1pop Senior Member Join Date: Dec 2004 Location: UK Posts: 1,893	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.

06-19-2006, 12:41 PM	#7 (permalink)
LeetPCUser Account Closed Join Date: May 2005 Location: Whitewater, WI Posts: 3,710	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.

06-19-2006, 12:44 PM	#8 (permalink)
Dan Buy my domains. Join Date: Feb 2006 Posts: 2,792	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.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)