0

I need some help... How should I do the markup of a layout with two images and a block of text divided in 2 columns with different width, where the 2nd column starts lower than the first one because of one of those images? Here is a sketch of my layout:

I hope I described my problem explicitly enough.

P.S.: Is it possible actually?

David Thomas
  • 249,100
  • 51
  • 377
  • 410
Sergiu
  • 311
  • 4
  • 15
  • are you ok with splitting your text between two blocks of html, or do you need it to be one huge paragraph? – Joel Apr 09 '12 at 17:22
  • Have you tried anything yet? I assume you're trying to work with CSS columns? – rgthree Apr 09 '12 at 17:22
  • @Joel unfortunately I cannot split it... – Sergiu Apr 09 '12 at 17:24
  • it's like newspaper! it's hard to design.(impossible) – EmRa228 Apr 09 '12 at 17:24
  • @rgthree, I dont even imagin how should I do it, because two columns with different width are out of my understanding, and that right image is making it even worse for me. – Sergiu Apr 09 '12 at 17:25
  • @EmRa228 that would be bad news... are you sure? – Sergiu Apr 09 '12 at 17:27
  • if you are cool with it, you could design some complicated javascript to split the paragraph at the right point. Otherwise I would redesign your site. – Joel Apr 09 '12 at 17:41
  • @Joel the thing is I have to do markup exactly for this design or to give up, so I would highly appreciate if someone could help me do it. – Sergiu Apr 09 '12 at 17:46

1 Answers1

0

CSS3 has a solution, but it is not standard yet and won't work in older browsers here is a link http://www.css3.info/preview/multi-column-layout/.

Possibly the best idea is to use javascript somehow. Put all the text in the first column and test the height then move portions of the text over to the next column until you have equal columns or until the first column is at a desired height.

Another method is to have predefined proportions eg(2/3 in the first column and 1/3 in the second). Then split the text based on the proportions using character count. This won't be exact and you could use a method similar to the one above to find exact width based on overflow properties, but the characters should average out to be the correct length.

This method is pretty simple and would look like

var txt='Column text...';
var len=txt.length;
var chars=Math.floor(len*.67);
//Assuming you want 2/3 of the text in the first column
document.getElementById('col1').innerHTML=txt.substring(0,chars);
document.getElementById('col2').innerHTML=txt.substring(chars);
//Notice that this could split in the middle of a word so you would need to do
//some checking for the nearest space and the change the break to there.
//Also you could then use the previous method to adjust it if you want something really accurate
qw3n
  • 6,236
  • 6
  • 33
  • 62