There are times when we need to make a multi-column layout for our webpage with different background colors. One way is to set the float property of style attribute accordingly:
<div>
<div style=”float:left;background:#c1ece0;width:380px”>
…someText
</div>
<div style=”float:left;background:#63ecc7;width:380px”>
…otherText
</div>
</div>
but this results in something like below :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit, ligula et cursus dignissim, mi tellus suscipit felis, quis fringilla lorem nisl non orci. Integer euismod nisl at velit ultricies rhoncus volutpat arcu mollis. Ut pharetra facilisis lacinia. Phasellus justo massa, bibendum ac gravida non, tempor vel felis. Etiam ac libero ut orci lacinia volutpat. Quisque quis nunc vel orci auctor fringilla. Aenean aliquam orci non mi accumsan ultricies. Cras vestibulum venenatis purus sed pretium. Nam erat sapien, pharetra ac rutrum mollis, cursus quis dui. Sed est turpis, rhoncus at auctor vitae, fermentum nec erat. Suspendisse potenti.
Aenean diam arcu, sodales a dapibus sed, tristique non nulla. Etiam quis felis eu purus malesuada elementum. Integer ac metus justo. Morbi iaculis erat id nisl ultrices iaculis. Aenean leo risus, congue eget tincidunt eget, tincidunt vel leo. Pellentesque malesuada lacus fermentum est euismod a cursus sem scelerisque. Nunc sodales luctus accumsan. Sed iaculis egestas vestibulum. Pellentesque vehicula purus ac nunc ullamcorper id cursus neque posuere. Maecenas tincidunt, libero eu tincidunt eleifend, turpis tellus auctor dolor, nec feugiat elit diam sed purus. Proin augue nunc, pretium sit amet sodales faucibus, feugiat et ligula. Aliquam ut ipsum arcu, in lacinia neque. Aliquam id enim vitae nisi viverra pharetra tempus viverra nisl. Integer sit amet egestas sem. Curabitur tempus, ante quis bibendum pretium, enim neque placerat justo, ac posuere nisi odio non mi. Donec fringilla massa in turpis commodo a fringilla erat ornare. Phasellus aliquet tellus vitae risus viverra convallis. Nam convallis sagittis nibh.
In publishing and graphic design, lorem ipsum is the name given to commonly used placeholder text (filler text) to demonstrate the graphic elements of a document or visual presentation, such as font, typography, and layout. The lorem ipsum text, which is typically a nonsensical list of semi-Latin words, is a hacked version of a Latin text by Cicero, with words/letters omitted and others inserted, but not proper Latin.
As nonsense (not actual Latin), the text is not italicized. The text often begins as, “Lorem ipsum dolor sit amet, consectetur adipisicing elit”. Substituting this dummy text for meaningful content should not be confused with “greeking”.
Even though using “lorem ipsum” often arouses curiosity because of its resemblance to classical Latin, it is not intended to have meaning. Where text is visible in a document, people tend to focus on the textual content rather than upon overall presentation, so publishers use lorem ipsum when displaying a typeface or design elements and page layout in order to direct the focus to the publication style and not the meaning of the text.
Now as we can see that the heights of the columns are unequal and therefore the page looks dirty. What we can do is:
1. Put the whole thing in a div, and set overflow:hidden
2. Set margin-bottom: -3500px; padding-bottom: 3500px; i.e. to an extent which cannot be the difference in height of the column.
<div style=”overflow:hidden”>
<div style=”float:left;background:#c1ece0;width:380px;margin-bottom: -3500px; padding-bottom: 3500px;”>
…someText
</div>
<div style=”float:left;background:#63ecc7;width:380px;margin-bottom: -3500px; padding-bottom: 3500px;”>
…otherText
</div>
</div>
Output:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit, ligula et cursus dignissim, mi tellus suscipit felis, quis fringilla lorem nisl non orci. Integer euismod nisl at velit ultricies rhoncus volutpat arcu mollis. Ut pharetra facilisis lacinia. Phasellus justo massa, bibendum ac gravida non, tempor vel felis. Etiam ac libero ut orci lacinia volutpat. Quisque quis nunc vel orci auctor fringilla. Aenean aliquam orci non mi accumsan ultricies. Cras vestibulum venenatis purus sed pretium. Nam erat sapien, pharetra ac rutrum mollis, cursus quis dui. Sed est turpis, rhoncus at auctor vitae, fermentum nec erat. Suspendisse potenti.
Aenean diam arcu, sodales a dapibus sed, tristique non nulla. Etiam quis felis eu purus malesuada elementum. Integer ac metus justo. Morbi iaculis erat id nisl ultrices iaculis. Aenean leo risus, congue eget tincidunt eget, tincidunt vel leo. Pellentesque malesuada lacus fermentum est euismod a cursus sem scelerisque. Nunc sodales luctus accumsan. Sed iaculis egestas vestibulum. Pellentesque vehicula purus ac nunc ullamcorper id cursus neque posuere. Maecenas tincidunt, libero eu tincidunt eleifend, turpis tellus auctor dolor, nec feugiat elit diam sed purus. Proin augue nunc, pretium sit amet sodales faucibus, feugiat et ligula. Aliquam ut ipsum arcu, in lacinia neque. Aliquam id enim vitae nisi viverra pharetra tempus viverra nisl. Integer sit amet egestas sem. Curabitur tempus, ante quis bibendum pretium, enim neque placerat justo, ac posuere nisi odio non mi. Donec fringilla massa in turpis commodo a fringilla erat ornare. Phasellus aliquet tellus vitae risus viverra convallis. Nam convallis sagittis nibh.
In publishing and graphic design, lorem ipsum is the name given to commonly used placeholder text (filler text) to demonstrate the graphic elements of a document or visual presentation, such as font, typography, and layout. The lorem ipsum text, which is typically a nonsensical list of semi-Latin words, is a hacked version of a Latin text by Cicero, with words/letters omitted and others inserted, but not proper Latin.
As nonsense (not actual Latin), the text is not italicized. The text often begins as, “Lorem ipsum dolor sit amet, consectetur adipisicing elit”. Substituting this dummy text for meaningful content should not be confused with “greeking”.
Even though using “lorem ipsum” often arouses curiosity because of its resemblance to classical Latin, it is not intended to have meaning. Where text is visible in a document, people tend to focus on the textual content rather than upon overall presentation, so publishers use lorem ipsum when displaying a typeface or design elements and page layout in order to direct the focus to the publication style and not the meaning of the text.