CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

Columns help

Discuss Columns help in the CSS Help forum on Dev Shed.
Columns help Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old June 8th, 2004, 10:41 AM
dante2010 dante2010 is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Feb 2002
Posts: 599 dante2010 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 Days 3 h 46 m 49 sec
Reputation Power: 7
Columns help
Hi,

I am trying to setup 2 columns in XHTML, and am wondering how I would get the right column to automatically begin after the left column.

PHP Code:
<div id="container">
    <div id="leftcolumn">
        <div id="leftcolumntop">
            aaaa

    
        </div>
        <div id="leftcolumnbottom">
            bbb

    
        </div>
    </div>
    
    <div id="rightcolumn">
        <div id="rightcolumntop">
            ccc

    
        </div>
        <div id="rightcolumnbottom">
            ddd

        
        </div>
    </div>
</div> 


So basically what I'm looking to do is position "rightcolumn" so it begins right after "leftcolumn". I'm not sure how to tho. Right now I'm using absolute positioning, but I'd rather have it all line up automatically rather then having to play with #'s to get it to line up every time.
Reply With Quote
  #2  
Old June 8th, 2004, 10:49 AM
1beb's Avatar
1beb 1beb is offline
This tagline is not long enoug
Dev Shed Novice (500 - 999 posts)
  
Join Date: Aug 2003
Location: Toronto, ON Canada! I AM CANADIAN
Posts: 861 1beb User rank is Corporal (100 - 500 Reputation Level)1beb User rank is Corporal (100 - 500 Reputation Level)1beb User rank is Corporal (100 - 500 Reputation Level)1beb User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 2 h 32 m 12 sec
Reputation Power: 10
Send a message via ICQ to 1beb Send a message via AIM to 1beb Send a message via MSN to 1beb Send a message via Yahoo to 1beb
I'm assuming you mean in a horizontal direction? If so, you can change the following,

Code:
#rightcolumn{float:right;}


A better explanation of the box model and it's uses are available here
http://www.w3.org/TR/2002/WD-css3-box-20021024/ <--- your new bible for the day

Also, it would be suggestible to define a size for both right and left div elements.
Reply With Quote
  #3  
Old June 8th, 2004, 11:02 AM
dante2010 dante2010 is offline
Contributing User
Dev Shed Novice (500 - 999 posts)
  
Join Date: Feb 2002
Posts: 599 dante2010 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 Days 3 h 46 m 49 sec
Reputation Power: 7
Thanks for the link mate. I'm reading thru it now.

One thing I noticed is when I placed a float:right on my #rightcolumn it stayed underneath the leftcolumn. Ideally I'd like for them to both line up horizontally, which I'm sure is possible.

My CSS so far:

PHP Code:
#container { 
    margin: 20px;
    width: 100%;
    }

#leftcolumn { 
    width: 50%;
    }

#leftcolumntop {
    height: 250px; 
    background: #9BB4D1;
    }
    
#leftcolumnbottom { 
    height: 100px;
    background: #D1C19B;
    }
        
#rightcolumn { 
    float: right;
    width: 50%;
    }
        
#rightcolumntop { 
    height: 350px;
    background: #B7D5F7;
    }
    
#rightcolumnbottom {
    height: 100px; 
    background: #D1C19B;
    } 
Reply With Quote
  #4  
Old June 8th, 2004, 06:57 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,659 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 3 Days 11 h 53 m 47 sec
Reputation Power: 687
There are multiple ways to layout a two column page. The most popular use floats or absolute positioning. Very stripped down, they are;
Code:
AP method:

<div id="left" style=
   "position: absolute;
    width: 50%;">
  <p>left hand content</p>
</div>
<div id="right" style=
    margin-left: 50%;">
  <p>right hand content</p>
</div>

float method:

<div id="left" style=
   "float: left;
    width: 50%;">
  <p>left hand content</p>
</div>
<div id="right">
  <p>right hand content</p>
</div>

More on layouts can be found at Glish and /*PIE*/.

cheers,

gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.
Reply With Quote
  #5  
Old June 8th, 2004, 06:59 PM
1beb's Avatar
1beb 1beb is offline
This tagline is not long enoug
Dev Shed Novice (500 - 999 posts)
  
Join Date: Aug 2003
Location: Toronto, ON Canada! I AM CANADIAN
Posts: 861 1beb User rank is Corporal (100 - 500 Reputation Level)1beb User rank is Corporal (100 - 500 Reputation Level)1beb User rank is Corporal (100 - 500 Reputation Level)1beb User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 2 h 32 m 12 sec
Reputation Power: 10
Send a message via ICQ to 1beb Send a message via AIM to 1beb Send a message via MSN to 1beb Send a message via Yahoo to 1beb
PIE = http://www.positioniseverything.net Gary, are you getting soft in your old age?

edit: I powned myself .net NOT .com...
Last edited by 1beb : June 8th, 2004 at 07:02 PM.
Reply With Quote
  #6  
Old June 8th, 2004, 07:00 PM
1beb's Avatar
1beb 1beb is offline
This tagline is not long enoug
Dev Shed Novice (500 - 999 posts)
  
Join Date: Aug 2003
Location: Toronto, ON Canada! I AM CANADIAN
Posts: 861 1beb User rank is Corporal (100 - 500 Reputation Level)1beb User rank is Corporal (100 - 500 Reputation Level)1beb User rank is Corporal (100 - 500 Reputation Level)1beb User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 2 h 32 m 12 sec
Reputation Power: 10
Send a message via ICQ to 1beb Send a message via AIM to 1beb Send a message via MSN to 1beb Send a message via Yahoo to 1beb
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > Columns help

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 3 hosted by Hostway. 
Stay green...Green IT