|
|
|
Forum Member
 
Group: Forum Members
Last Login: 2/8/2007 8:41:42 AM
Posts: 45,
Visits: 35
|
|
| I'm having problems understanding how to use CSS to create a two column layout. I'm trying to move away from using tables and am trying the CSS route. The code below seems to work, but I only got it to work from guess and check. Can someone explain how this works or point to a link with some explanations? <div sty;e="float:left;">Column One</div> <div style="float:left; position:relative;">Column Two</div>
|
|
|
|
|
Forum Newbie
Group: Forum Members
Last Login: 2/5/2007 9:11:53 AM
Posts: 3,
Visits: 5
|
|
I've actaully never used floats in my CSS, however from the script you've provided I'm pretty sure it works like this.
When you use a float it creates a block box, so just like a column. When you put another float next to it, it follows the flow of the page so appears next to it.
The only thing I think you should do to the script is add a width to it, else you're going to get some rather messy columns when you add more text, so just add ; width:xxxpx; into the style line. You can do it in pixels (px) or %
|
|
|
|
|
Forum Newbie
Group: Forum Members
Last Login: 4/17/2007 1:00:46 AM
Posts: 7,
Visits: 3
|
|
| can u show some css code to column layout
|
|
|
|
|
Junior Member
Group: Forum Members
Last Login: 6/14/2007 12:44:16 PM
Posts: 12,
Visits: 4
|
|
| You have to create a seperate documents style sheet for you site, The way you are doing it , you will get confused easy. So let's say you working in dreamweaver. create your .css doc, make sure to specify what kind of float you want, size, width etc.. link the . css to your page then do the followin < div class="name of css instance"> Contents </div> That simple, on your , the less code possible the better. Mo
Jadvanced.com
|
|
|
|
|
Forum Newbie
Group: Forum Members
Last Login: 9/13/2007 6:53:51 PM
Posts: 7,
Visits: 1
|
|
what they said.
lulu raska
|
|
|
|
|
Junior Member
Group: Forum Members
Last Login: 5/29/2011 9:51:39 AM
Posts: 21,
Visits: 47
|
|
gogorieser (9/13/2007)
what they said.what does that mean?
Give me a smile and make my day
|
|
|
|
|
Forum Guru
Group: Administrators
Last Login: 7/23/2008 8:50:12 AM
Posts: 68,
Visits: 187
|
|
| Webgirl! Nice to see you again! Yes, this place is still alive, barely! 
|
|
|
|
|
Junior Member
Group: Forum Members
Last Login: 5/29/2011 9:51:39 AM
Posts: 21,
Visits: 47
|
|
| Yea Im still alive and waiting for my T-shirt. To the abovementioned problem I would suggest doing the tutorials how about this one http://css.maxdesign.com.au
Give me a smile and make my day
|
|
|
|
|
Admin
Group: Administrators
Last Login: 10/13/2010 9:32:56 AM
Posts: 165,
Visits: 333
|
|
When using floats in CSS, you may also find this useful:
After your floats, insert <div style="clear:both;"></div> to make sure that the next elements you place on the page are not placed on the same line as your columns.
For example, if you're using a two column layout:
<div style="float:left;">Column One</div>
<div style="float:left; position:relative;">Column Two</div>
Add <div style="clear:both;"></div> after it, so that the rest of the content will be placed below the two columns.
<div style="float:left;">Column One</div>
<div style="float:left; position:relative;">Column Two</div>
<div style="clear:both;"></div>
|
|
|
|