css question
- Started
- Last post
- 13 Responses
- jevad
I have a table cell - and within that table cell - without embedding a table, I would like to have two vertical columns of text - each 200px wide with a 30px space between the two.
Easily done with a nested table - how about css?
- whiteSneaks0
if each column is in a div you can float them i believe. the space between can be achieved with padding on those divs. this can be buggy and make sure you define widths in the css.
- jevad0
aaawww yeah....nice - thanks shawn - wicked site btw...great work
- whiteSneaks0
thanks for compliments.
i am working on a new site using xhtml/css myself, so i have been monkeying around with this stuff for that last few weeks.
good luck
- Duane0
Jevad, any luck with this? I'm trying to do the same thing and I'd like to do it the right way. I've got it down with tables, but with I keep making a mess with divs.
- Duane0
*bump
I'm running with scissors here.
- jon_0
here are a little examples of what you are wanting to do.
you may notice that the parent element of the two columns is set to 440px rather than 430px, this is because safari decided there wasn't enough room to have both of the pieces of text next to each other so i added a little margin for error.
there is also a workaround in there to remove problems with the way that ie/win misunderstands the box model
- jon_0
forgot to mention that this layout works fine on the following browsers:
ie6 / windows xp
mozilla 1.7.2 / windows xp
safari 1.2.3(v125.9) / os x 10.3.5
firefox 0.9.3 / os x 10.3.5
camino 0.7.0 / os x 10.3.5
ie 5.2 / os x 10.3.5the you might be able to go for less than 10px extra for safari to layout properly but i don't really have the time right now to try that.
i guess i really should remember to read what i write before i hit broadcast, oh well i shall leave other people to construct sentences that actually read well.
- Duane0
Thanks for the help jon. I'll see what I can do with your provided examples. One additional challenge I have is that I want 4 columns, each 200 pixels wide with 20 pixels padding. Regardless, I really appreciate you taking the time to generate those examples.
*picks up scissors again
- ian000
with css you shouldn't have to use tables as means for layout (however sometimes it just makes sense). check out the source of our site to see how the afore mentioned float property works: www.chemset.net. also here is an awesome reference site: www.alistapart.com. specifically here is an article about tables: www.alistapart.com/articles/jour…...
- Duane0
Maybe I'm running into one of those situations where tables work best. I've read most of the articles at alistapart.com, glish.com, and others but it's still an uphill battle. I'm not done fighting yet, but the bummer is I already have a working model that is table based. I just wanted to do this right.
Nice site and work ian. Sort of inline with what I'm trying to do (a single page portfolio). How's the work scene in Austin?
- jon_0
four column version added to the previous examples
same page as before, may need to refresh
- Duane0
Thank you! I may unravel this mystery yet.
- ian000
Austin -- work scene.
meh.
good luck with the css issue. you have my sympathy.