ferren Posted July 10, 2015 Share Posted July 10, 2015 Is there a way to force <dd> to start on the same line as <dt>? I'm making a Timeline; <table> works but causes a tag stew with classes on each <td>. All I want is a format like: 1861 Changes in CO2 might cause climate change. 1896 Arrhenius outlines effects of anthropogenic CO2. 1936 Callendar: doubling CO2 will raise temperature 2°C. 1972 Sawyer: by 2000, CO2 will increase by 25%, and temperature by 0.6°C. 2014 Hansen: a legal case can be made for children to sue the government .... but it seems to be awkward to arrange in HTML! Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted July 10, 2015 Share Posted July 10, 2015 you could try giving the dd and dt a style property of display:inline-block; though you might then need a <br /> to break the lines. If you are using a table, you could simulat that without the table by styling them with display: table-cell Link to comment Share on other sites More sharing options...
dsonesuk Posted July 10, 2015 Share Posted July 10, 2015 Try dd, dt{ display: block;float: left; }dt {clear: left;} Link to comment Share on other sites More sharing options...
Ingolme Posted July 10, 2015 Share Posted July 10, 2015 That's my usual solution. Often I'll set widths to them as well. Link to comment Share on other sites More sharing options...
ferren Posted July 12, 2015 Author Share Posted July 12, 2015 Thanks. <div> <style scoped> dd, dt{ display: inline-block;float: left; } dt {clear: left; width: 110px; margin-right: 12px; text-align: right;} </style> worked for short lines, but as predicted, one needs <br> for multi-line <dd>s, and this fails when the page width changes. Also, I find zebra-striping useful here, and nth-child doesn't work on <dl>s. So: back to borderless tables. Sorry about the duplicate posting. Accidental. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 12, 2015 Share Posted July 12, 2015 This should fix that dt { float: left; width: 60px; } dd{margin-left:60px;} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now