Sun, 2012-02-19 01:49
<p>lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text</p> <table> <tr><td align="right">right aligned text</td></tr> <tr><td>left aligned text left aligned text left aligned text left aligned text</td></tr> <table> <p>lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text lots of text</p>
What's the CSS equivalent of the above. NOTE: The table is shrink wrapped. The width of the table is smaller the the paragraph of text below or above it!
Sun, 2012-02-19 10:29
#1
Floats
Float the content that goes right to the right and the content that goes left to the left and make sure to clear the floats for any content following.
Sun, 2012-02-19 20:10
#2
It's not that simple
It's not that simple. The aligned text in the center must be shrink wrapped like a table would do it.
NOTE: Without specifying widths!
Sun, 2012-02-19 20:10
#3
Boobs
People who pooh pooh tables are boobs!
[mod edit: No, those who misuse tables are the boobs. ~gt]
Mon, 2012-02-20 01:53
#4
Structure is not presentation
It appears you're as ignorant of html structure and css presentation as your namesake was of economics.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test document</title> <style type="text/css"> body { margin: 0; padding: 0; font: 100%/1.25 sans-serif; } p { font-size: 1em; margin: 1.25em 0; } #colholder { border-spacing: 1.25em; display: table; margin: 0 auto; } #colholder div { padding: 0 1.25em; } #colholder div:first-child { border: 1px solid black; display: table-cell; text-align: right; } #colholder div:last-child { border: 1px solid black; display: table-cell; } </style> </head> <body> <p>Duis accumsan volutpat mattis! Quisque et sodales tellus. Nulla quis dui turpis. Donec ut accumsan libero. Nullam adipiscing tellus sit amet purus malesuada pulvinar sed eget neque. Nunc feugiat, arcu sit amet viverra mollis, quam libero lacinia dolor; ut fermentum risus erat porta ante. Cras aliquam mollis lacus, vitae fringilla.</p> <div id="colholder"> <div> <p>Right aligned text<br /> second line</p> </div> <div> <p>Left aligned text Left aligned text<br /> Left aligned text</p> </div> </div> </body> </html>
Depending on how far back your browser support must reach, it may be better to use inline-blocks or even restrict yourself a bit and use floats. I wouldn't disparage Tyssen's suggestion too much, as his solution meets your rather unclear-on-the-specs problem statement. Plus he knows a hell of a lot more than you do on this subject.
Mon, 2012-02-20 09:50
#5
Nice update. thanks for your
Nice update. thanks for your valuable code.
It appears you're as ignorant of html structure and css presentation as your namesake was of economics.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test document</title> <style type="text/css"> body { margin: 0; padding: 0; font: 100%/1.25 sans-serif; } p { font-size: 1em; margin: 1.25em 0; } #colholder { border-spacing: 1.25em; display: table; margin: 0 auto; } #colholder div { padding: 0 1.25em; } #colholder div:first-child { border: 1px solid black; display: table-cell; text-align: right; } #colholder div:last-child { border: 1px solid black; display: table-cell; } </style> </head> <body> <p>Duis accumsan volutpat mattis! Quisque et sodales tellus. Nulla quis dui turpis. Donec ut accumsan libero. Nullam adipiscing tellus sit amet purus malesuada pulvinar sed eget neque. Nunc feugiat, arcu sit amet viverra mollis, quam libero lacinia dolor; ut fermentum risus erat porta ante. Cras aliquam mollis lacus, vitae fringilla.</p> <div id="colholder"> <div> <p>Right aligned text<br /> second line</p> </div> <div> <p>Left aligned text Left aligned text<br /> Left aligned text</p> </div> </div> </body> </html>
Depending on how far back your browser support must reach, it may be better to use inline-blocks or even restrict yourself a bit and use floats. I wouldn't disparage Tyssen's suggestion too much, as his solution meets your rather unclear-on-the-specs problem statement. Plus he knows a hell of a lot more than you do on this subject.
Mon, 2012-02-20 15:02
#6
No kidding
I've never seen the display: table property used before. I'll use the display: inline-block property.