Separate text in two columns

Asked

Viewed 17,396 times

0

I have a div that will contain two columns. As shown below: inserir a descrição da imagem aqui

Is there any CSS technique to do this? No CSS3, because I want it to work on all browsers.

Sure, I could create two Ivs there and put float:left but it will be a content only, when the user is typing in the left column and ends, it goes to the right.

My HTML is like this:

<div class="grid_480 f-left margin-top-60 margin-bottom-60"></div>

THE CSS:

.grid_480{width:480}
.margin-top-60{margin-top:60px}
.margin-bottom-60{margin-bottom:60px}
.f-left{float:left}
html css

  • If you want to do it with just one div I doubt you can do it

  • I couldn’t get heheheeh, so I’ll see if anyone here knows.

  • With two div’s you can divide the content, if you want I can make an example

  • What happens is these columns will be manageable. That is, when the client is typing the content, the text on the left ends and it starts on the right, as it is in Word.

  • 1

    Ahh I get it. I don’t know if I can do it then, but I’ll try

  • Valeu @Cesarmiguel

  • 1

    Without Javascript, nothing comes to mind, but if this is permissible I have an idea: create two Ivs, and make one a "mirror" of the other (i.e. if one changes, the other changes the same); make both have overflow: hidden, twice the height of the visible space and position them so that one shows the top, and the other the bottom. If you want I try to build an example (but if your requirement is only CSS, then it’s no use).

  • Dude, I was searching the net and will only be functional with CSS3. Who uses IE7/8 that complies, hehe.

Show 3 more comments

1 answer

8


No, only CSS2 does not exist, but CSS3 is not so incompatible, and you can design an alternative layout/script for obsolete browsers with the language you know best.

With CSS3, it would be enough:

.div-em-colunas {
    -webkit-column-count:2; /* Chrome, Safari, Opera */
    -moz-column-count:2;    /* Firefox */
    column-count:2;         /* padrão */
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.