kurt.santo Posted February 28, 2008 Share Posted February 28, 2008 Would like to have my main div text in two columns. It shoud look like a newsarticle. Is there any other way apart from floating two more divs inside main?Kurt Link to comment Share on other sites More sharing options...
jlhaslip Posted February 28, 2008 Share Posted February 28, 2008 you got it... Link to comment Share on other sites More sharing options...
newseed Posted February 28, 2008 Share Posted February 28, 2008 There is alternative and that is using a list. Although I never used it as columns of text like a newspaper but I did do one example here you can try and tweak it to your desire: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Fort Walton BeachDestin</title><style type="text/css">ul#two-column { float:left; width: 300px; margin: 0; padding: 0;}ul#two-column li { float:left; width: 150px; margin: 5px 10px 0 0; padding: 0;}li.paragraph-style { color: maroon; font-family: Helvetica; font-style: italic;}</style></head><body><ul id="two-column"> <li> <p>This is column one. You can add text here for this column</p> <p>Using paragraph tags will block your paragraphs and style them independently from the other column as you will see on the right.</p></li> <li class="paragraph-style"> <p>This is column two. The text here is styled differently</p> <p>You can add margins between the two columns</p> </li></ul><p>If you want to make it three columns, just change the overall width of the <strong>ul#tow-column</strong> to whatever and then make sure the <strong>ul#tow-column li</strong> is one-third fo the overall width.</p></body></html> Link to comment Share on other sites More sharing options...
jlhaslip Posted February 28, 2008 Share Posted February 28, 2008 Wonder if that'll blow up in IE? Might need to widen it to allow for cross-browser display. Allow for the padding and margins. Link to comment Share on other sites More sharing options...
kurt.santo Posted March 1, 2008 Author Share Posted March 1, 2008 Thanks for your input. Unfortunately, as jlhaslip feared it does not work in IE (use IE 7). Guess for now just stick to the old way;-)Kurt Link to comment Share on other sites More sharing options...
jlhaslip Posted March 1, 2008 Share Posted March 1, 2008 http://www.jlhaslip.trap17.com/sm/3_col_list.htmlWorks in IE7 for me. I added a column, too. Adjust to suit. Link to comment Share on other sites More sharing options...
kurt.santo Posted March 2, 2008 Author Share Posted March 2, 2008 http://www.jlhaslip.trap17.com/sm/3_col_list.htmlWorks in IE7 for me. I added a column, too. Adjust to suit.Looks like this is what I am after... Do you know if it works with IE 6? Cheers,Kurt Link to comment Share on other sites More sharing options...
jlhaslip Posted March 2, 2008 Share Posted March 2, 2008 nope, I don't have ie6 Link to comment Share on other sites More sharing options...
Synook Posted March 2, 2008 Share Posted March 2, 2008 Jhaslip's solution works in IE 6 for me. Link to comment Share on other sites More sharing options...
kurt.santo Posted March 3, 2008 Author Share Posted March 3, 2008 Jhaslip's solution works in IE 6 for me.Cheers. Synook, could you do me a favour and have a look on homepage of www.ensura.co.uk (my other tread "Bg image align right leaves space on right"). Do you see a problem with right rounded corner and the dotted line which separates nav bar from content? I cannot replicate the problem I saw at my friends computer and think it might be due to IE 6. Kurt Link to comment Share on other sites More sharing options...
kurt.santo Posted March 3, 2008 Author Share Posted March 3, 2008 Cheers. Synook, could you do me a favour and have a look on homepage of www.ensura.co.uk (my other tread "Bg image align right leaves space on right"). Do you see a problem with right rounded corner and the dotted line which separates nav bar from content? I cannot replicate the problem I saw at my friends computer and think it might be due to IE 6. KurtJust installed multiple IE and could see problem myself. Could fix problem with top right corner, but still not sure why the line in between the nav bar on left and main content gets broken on some pages (as index.htm). Appreciate any comment on this one...Kurt Link to comment Share on other sites More sharing options...
aalbetski Posted March 3, 2008 Share Posted March 3, 2008 just thought Ii'd throw 2c in, this works with just <p> tags in all browsers tested (IE7, FF). <style>p{ width:30%; float:left; padding:0px 10px; text-align:justify; margin:0px 1px;}</style><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor <br><br>in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> Link to comment Share on other sites More sharing options...
kurt.santo Posted March 3, 2008 Author Share Posted March 3, 2008 just thought Ii'd throw 2c in, this works with just <p> tags in all browsers tested (IE7, FF). <style>p{ width:30%; float:left; padding:0px 10px; text-align:justify; margin:0px 1px;}</style><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor <br><br>in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> also works well in IE6;-)Kurt Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.