Create two column text format in DIV

Posted on 2007-09-29
Last Modified: 2013-11-19
I'd like two contain text in a div that has two columns.  I need the text to flow from one column to the other.  The text may have HTML tags (i.e. bold, h3, etc), which I don't want broken.  To create the white space, I've sized a 1px image to about width=20px and height=200px. I then applied different styles to the image's style attribute.  The image always appears on top of the text, rather than pushing it aside to create a middle white space gutter.

Is there a way to correct this or a better way?
Question by:brettr
    LVL 6

    Accepted Solution

    Without specifically splitting the text into two different divs that are floated side by side, there is no way to get text to flow from one column to another.

    To learn more about multi column layout, read this...

    Also, spacer images are never a good idea.  CSS has way more than enough power to create white-space between columns.
    LVL 14

    Assisted Solution

    implemented in CSS3 but some browsers still hanging back there:
    (IE not supporting it at all:

    Alternative solutions until Internet Explorer will support CSS3:

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Javascript: Crash Course

    Javascript is not only emerging as the most important language to know, it's flexibility is unique. With Javascript being deployed on the web, mobile and even the desktop this is the one language that all technologists need to know.

    Suggested Solutions

    Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System ( introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now