text formatting

  • Hi i want my text to be divdied upp in three colums on my pages, can i do that ? whitout having to hardcode it ???? so when i write something on any page it will spill over to next colum after a it filled a specified area.
    thank you for helping me out
    mia

Viewing 1 replies (of 1 total)

  • Hi,

    If you want your content to appear in three columns without hardcoding you can use CSS3. CSS3 only works in modern day browsers (Safari, Google Chrome, Firefox, Opera, IE9). This code will not work for IE6 – IE8 & some older versions of the browsers i’ve mentioned above.

    * Older browsers will just display a single column.

    Anyway, Is your content wrapped in a container e.g. <div>, <article>?, if it is, does it also have an ID or Class?

    Below are some examples of how to create multi column content with CSS3 – hope they help. If the examples below work for you then you will need to edit your CSS file.

    Please note:
    Do not just copy this code into your stylesheet – you will need to edit to suit your needs.

    Also check this in all browsers you want to support – you will see the code:

    article#three-col h1 {
	-webkit-column-span: all; /* Safari - Heading span across all columns (3) */
}

    Will only work in Safari & Google Chrome (Webkit browsers)

    Full code example

    CSS3 Styles

    article#three-col {
	-webkit-column-count: 3; /* Safari Column Count (3) */
	-webkit-column-gap: 20px; /* Safari Column Gap (20px) */
	-moz-column-count: 3; /* Firefox Column Count (3) */
	-moz-column-gap: 20px; /* Firefox Column Gap (20px) */
	column-count: 3; /* IE9+ Column Count (3) */
	column-gap: 20px; /* IE9+ Column Gap (20px) */
}

    CSS3 – Span a header across all columns

    article#three-col h1 {
	-webkit-column-span: all; /* Safari - Heading span across all columns (3) */
}

    HTML Code

    <article id="three-col">
	<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.</p>
    <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.</p>
</article>
Viewing 1 replies (of 1 total)
  • The topic ‘text formatting’ is closed to new replies.