ThePsion5 Posted June 6, 2006 Share Posted June 6, 2006 Solved! See 3rd reply.Hi,I am trying to set up some CSS for a web page that will allow me to create several sections that display images and text, similar to using a table, which i'm trying to avoid. Instead of this: (header/navigation html code)...<table><tr><td><img src="...">some text</td><td><img src="...">some text</td><td><img src="...">some text</td><td><img src="...">some text</td></tr></table>...(footer code) I have something like this: <div id="events"> <div class="event"><img src="...">text</div> <div class="event"><img src="...">text</div> <div class="event"><img src="...">text</div> <div class="event"><img src="...">text</div></div> Since this will allow the events to be dispayed in a different format if needed.However, I havn't been able to find a good way to allow the text to be displayed on a different line than the images without inserting a <br /> into it, which alters and could break different styles...any ideas? Link to comment Share on other sites More sharing options...
scott100 Posted June 6, 2006 Share Posted June 6, 2006 However, I havn't been able to find a good way to allow the text to be displayed on a different line than the images without inserting a <br /> into it, which alters and could break different styles...any ideas?<{POST_SNAPBACK}> put this in the head<style>img{display:block;}</style> that will knock the text to the line below the image. Link to comment Share on other sites More sharing options...
ThePsion5 Posted June 6, 2006 Author Share Posted June 6, 2006 Unfortunately, I would like the divs to be displayed sequentially like table cells in a single row...setting the display setting of the images to 'block' forces the divs after them onto the next row as well, which I want to try and avoid. Link to comment Share on other sites More sharing options...
scott100 Posted June 6, 2006 Share Posted June 6, 2006 Unfortunately, I would like the divs to be displayed sequentially like table cells in a single row...setting the display setting of the images to 'block' forces the divs after them onto the next row as well, which I want to try and avoid. <{POST_SNAPBACK}> Sorry, i misread your table code :ph34r: I think this might be what you want:<head><style>img{display:block;}div div{border:1px solid black;width:15%; float:left;</style></head><div id="events"><div class="event"><img src="...">text</div><div class="event"><img src="...">text</div><div class="event"><img src="...">text</div><div class="event"><img src="...">text</div></div> Link to comment Share on other sites More sharing options...
ThePsion5 Posted June 6, 2006 Author Share Posted June 6, 2006 That did the trick, actually! At first it got a little weird because I had some float items below the event div, but I was able to figure it out. Thanks! 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