yaragallamurali Posted May 24, 2013 Share Posted May 24, 2013 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 More sharing options...
scout1idf Posted May 24, 2013 Share Posted May 24, 2013 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 More sharing options...
yaragallamurali Posted May 24, 2013 Author Share Posted May 24, 2013 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 More sharing options...
newseed Posted May 24, 2013 Share Posted May 24, 2013 I'm not old schooled but there is still nothing wrong with using tables for certain situations like the one your have. IF you must use divs then you might want to looking into a jquery solutionhttp://www.cssnewbie.com/example/equal-heights/plugin.htmlThere might be others so just Google them. Link to comment Share on other sites More sharing options...
yaragallamurali Posted May 24, 2013 Author Share Posted May 24, 2013 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now