Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 1097 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

2 column css within a div..

Thread title: 2 column css within a div..
Closed Thread    
    Thread tools Search this thread Display Modes  
12-08-2005, 10:55 PM
#1
Andy is offline Andy
Andy's Avatar
Status: Senior Member
Join date: Dec 2005
Location: Essex, UK
Expertise:
Software:
 
Posts: 870
iTrader: 0 / 0%
 

Andy is on a distinguished road

Send a message via MSN to Andy

  Old  2 column css within a div..

Is there anyway to have a 2 collumn (no table) layout all within a div (lets call this 'container').

I need this as the container has a background pattern which I want to keep with all the content, depending on whether collumn 1 or 2 is longer.

I tried floats but they just overrun the container and absolute position would do the same..

Can anyone help me?

12-09-2005, 02:50 AM
#2
jono1 is offline jono1
jono1's Avatar
Status: Non-conformist
Join date: Jul 2005
Location: Canberra, Australia.
Expertise:
Software:
 
Posts: 1,172
iTrader: 0 / 0%
 

jono1 is on a distinguished road

  Old

have a look through www.alistapart.com, I'm sure they explain it somewhere.

12-09-2005, 03:15 AM
#3
Dray is offline Dray
Dray's Avatar
Status: Request a custom title
Join date: Sep 2005
Location: Texas
Expertise:
Software:
 
Posts: 1,139
iTrader: 0 / 0%
 

Dray is on a distinguished road

  Old

<style>
#left { float:left; width:40%; }
#right { float:right; width:60%; }
</style>

<div id="Body">
<div id="left">Content</div>
<div id="right">Content</div>
</div>


Not sure if this is what you need but thats a two column layout

12-09-2005, 04:45 AM
#4
seen.to is offline seen.to
seen.to's Avatar
Status: unusual suspect ™
Join date: Feb 2005
Location: Lancaster, PA from London UK
Expertise:
Software:
 
Posts: 1,814
iTrader: 0 / 0%
 

seen.to is on a distinguished road

  Old

Totally possible and pretty easy... Sorry I don't have time to explain further atm.

12-09-2005, 05:09 PM
#5
Andy is offline Andy
Andy's Avatar
Status: Senior Member
Join date: Dec 2005
Location: Essex, UK
Expertise:
Software:
 
Posts: 870
iTrader: 0 / 0%
 

Andy is on a distinguished road

Send a message via MSN to Andy

  Old

Originally Posted by Dray
<style>
#left { float:left; width:40%; }
#right { float:right; width:60%; }
</style>

<div id="Body">
<div id="left">Content</div>
<div id="right">Content</div>
</div>
Not sure if this is what you need but thats a two column layout
"I tried floats.." They just overrun my current DIV. Im sure there is an extra style I can apply so that the floating will nto do it though.

And Im trying that link.

Thanks, will edit if I get it working

12-09-2005, 05:15 PM
#6
Salathe is offline Salathe
Salathe's Avatar
Status: Community Archaeologist
Join date: Jul 2004
Location: Scotland
Expertise: Software Development
Software: vim, PHP
 
Posts: 3,820
iTrader: 25 / 100%
 

Salathe will become famous soon enough

Send a message via MSN to Salathe

  Old

There's a keyword that you might have missed because you need to clear your float. *cough*

12-09-2005, 05:31 PM
#7
Andy is offline Andy
Andy's Avatar
Status: Senior Member
Join date: Dec 2005
Location: Essex, UK
Expertise:
Software:
 
Posts: 870
iTrader: 0 / 0%
 

Andy is on a distinguished road

Send a message via MSN to Andy

  Old

Actually I just tried position: relative; and it works a utter treat.

I will bare clearing a float for the future, thanks for your help

Oh btw that link wasn't within a DIV, it was just 2 column and a footer.

Closed Thread    


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

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed