Jump to content

Creating cells with DIV's


yaragallamurali
 Share

Recommended Posts

Hi with the following code i am able to bring 3 Div's in a single row which are surrounded by a parent DIV. Now the problem is separating each div with a vertical line which makes it look like table cells in a single row. This can be done easily by applying "border-right" on each DIV. But here there is a problem. In these 3 div's Every div grows(height) independently based on the size of the content. So all the vertical lines should be of the height of the highest Div's height. I mean for example in the 3 div's suppose, first div height is 100px and second div height is 200px and third div height is 50px. Now all the vertical lines separating Div's should be of 200px. So it looks like real cells in a single row. Kindly help me in solving this problem?

<div style="border:2px solid red; overflow: hidden;">	    <div style="width:100px;height:100px;border:2px solid yellow;float:left;"></div>	    <div style="width:100px;height:100px;border:2px solid black;float:left">   </div>	    <div style="width:100px;height:100px;border:2px solid black;float:left">   </div>  </div>

Thanks in advance. Thanks and Regards,Muralidhar Yaragalla.

Link to comment
Share on other sites

See if this will help you out......

<!DOCTYPE HTML><html><head>	 <title>		  Creating Cells With Div's	 </title></head><body>	 <div style="border:2px solid red;display:table;">			<div style="width:100px;display:table-cell;">			   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....  			</div>			<div style="width:100px;border-left:2px solid black;display:table-cell;">			   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....  			</div>			<div style="width:100px;border-left:2px solid black;display:table-cell;">			   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....   your content....  			</div>	 </div></body></html>

Link to comment
Share on other sites

Hi scout1idf, Thanks for your reply. With "table-cell" and "table-column" this can be done but these are not supported in all browsers. At least i can guarantee that these are not supported 2 years back. So I am looking for a solution which will be supported by all browsers and without any problem.

Link to comment
Share on other sites

Hi thanks for your reply. For this kind of situation i think tables are the best. If we have to do only with div's i got a solution with javascript. I don't know why people are too much into frameworks(jquery). if frame work is able to do it, we also should be able to do it. After all jquery is built upon javascript. I am not against frame works. i agree they make our life easy but what i feel is we always have to have fundamentals and should know how to solve the problem without frameworks. Then to avoid huge amount of coding if you are using framework it is fine. In my opinion we should at least know the concepts. Anyway thanks for taking time to answer my question.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...