News Column Effect Using CSS and HTML

HTML & CSS
1

Hi,

I need news column effect using CSS and HTML. I have given the code is below,


<div id="main">
<ul class='t'>
		<li>Item 1</li>
		<li>Item 2</li>
			<ul>
				<li>Item 2.1</li>
				<li>Item 2.2</li>
			</ul>
		<li>Item 3</li>
			<ul>
				<li>Item 3.1</li>
				<li>Item 3.2</li>
				<li>Item 3.3</li>
			</ul>
		<li>Item 4</li>
		<li>Item 5</li>
		<li>Item 6</li>
		<li>Item 7</li>
		<li>Item 8</li>
	</ul>
</div>

I have fixed the height div#main container. I need the list items to be wrapped on second column like news paper. Please help me.

2

Hey there you could try something like:

<ul style=“float:left;”>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<li>item four</li>
</ul>
<ul style=“float:right;”>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<li>item four</li>
</ul>

:slight_smile: gd luck

3

I knows that a way. But the datas should come dynamically. So I cant use separate column. Its should be automatically wrapped. :slight_smile:

4

Hey can I see the site then I can understand what exactly you want?

5

Hi,

Unfortunately you can’t do this automatically unless you use the css3 column module which isn’t widely supported yet. You’ll just have to split the list as appropriate and float them in columns.

6

First of all thanks for your suggest. :slight_smile:

Its a client requirement. :frowning: I am developing one page for newspaper section. I done two column using float attribute and to demonstration the client but he doesnt want to that tricks. They need automatically to stretch the content in second column. If you have any other ideas using javascript then please share me that ideas.

7

I hope you saw the newspaper daily. In that newspaper the paragraph is not enough the space in the first column to stretch the rest of the paragraph in second column automatically. I hope you understand. :slight_smile:

8

I haven’t tried it but it looks like you are looking for something like this.