Jump to content

Text in two columns


kurt.santo
 Share

Recommended Posts

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

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

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
Just 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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...