homepage Welcome to WebmasterWorld Guest from 54.196.24.103
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Floating text columns in CSS
Floating text columns in CSS
Tdude




msg:1199195
 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




msg:1199196
 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




msg:1199197
 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




msg:1199198
 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




msg:1199199
 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




msg:1199200
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved