homepage Welcome to WebmasterWorld Guest from 23.22.173.58
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Floating text columns in CSS
Floating text columns in CSS
Tdude

10+ Year Member



 
Msg#: 568 posted 2:52 pm on Jan 27, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 568 posted 2:44 pm on Jan 28, 2003 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 568 posted 3:04 pm on Jan 28, 2003 (gmt 0)

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+ Year Member



 
Msg#: 568 posted 10:03 pm on Jan 28, 2003 (gmt 0)

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+ Year Member



 
Msg#: 568 posted 10:21 pm on Jan 28, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 568 posted 7:17 pm on Jan 29, 2003 (gmt 0)

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 :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved