Welcome to WebmasterWorld Guest from 54.167.116.62

Forum Moderators: not2easy

Message Too Old, No Replies

Floating text columns in CSS

Floating text columns in CSS

     

Tdude

2:52 pm on Jan 27, 2003 (gmt 0)

10+ Year Member



Hi yall!
I have a layout with bits and pieces of code from most everywhere since I'm a novice to CSS. (think this one's mostly from glish.com) Just can't seem to make a 2-middle-column-floating layout cross-browser friendly. My text columns work fine in IE6, but the 2 columns in the centercontent div stack on top of each other top/left in Mac IE5. Wow itīs really hard to explain without posting a URL. Here's some code:

#centercontent {
position: relative;
background: transparent;
margin-right:15%;
margin-bottom: 4;
margin-left: 4;
left:150px;
top:20px;
height:100%;
padding-top: 0px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px;
border-left:1px solid #<% = color %>;
border-right:1px solid #<% = color %>;
}

#colLeft { position: relative;width: 49%; float: left;padding: 0% 3% 50px 0%; clear: left; }
#colRight { position: relative;width: 51%; float: right; padding: 0% 0% 50px 1%; clear: right;
}

Col Left and right go into the centercontent div. I think the rest of the styles are irrelevant. Of course I've tried absolute positioning. Thankful for any ideas!

Aah, forgot to bring a few details. My menu is static to the left. I use the clear: both; after the two columns.

MCookie

2:44 pm on Jan 28, 2003 (gmt 0)

10+ Year Member



Hi,
I'd say take out the "clear:left;" and "clear:right;" from the floating divs rules.
Also, I don't think you need the "position:relative;". I never use it in floats.

Birdman

3:04 pm on Jan 28, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I don't think you need to float the right div. When you float the left div, the next div will automatically position to it's right.

#centercontent {
position: relative;
left:150px;
top:20px;
background: transparent;
margin-right: 0px 15% 4px 4px;
height:100%;
padding: 0px 4px 4px 4px;
border-left:1px solid #<% = color %>;
border-right:1px solid #<% = color %>;
}
#colLeft
{
width: 49%;
float: left;
}
#colRight
{
width: 51%;
}

Tdude

10:03 pm on Jan 28, 2003 (gmt 0)

10+ Year Member



Ok thanx! I just tried your suggestions, but it doesn't cut it else than in IE6 which looks OK. I must be doing something else wrong. Will come back when I fix it.

Longhaired Genius

10:21 pm on Jan 28, 2003 (gmt 0)

10+ Year Member



It's just not possible to make a coherent stylesheet by cutting and pasting from various sources. Fragments of css will interact in unexpected ways. There is no substitute for understanding what your style declarations will do as you write them. You have to start off experimenting with simple styles and build experience that way.

Tdude

7:17 pm on Jan 29, 2003 (gmt 0)

10+ Year Member



LongHairedGenius...I agree to some point, but I wouldn't be fiddling with computers at all, nor developing my skills, if I didn't throw myself into unknown territory once in a while. Thanx for all your time anyway! Let me know if you need help developing your snowboarding :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month