josephbastin Posted April 7, 2006 Share Posted April 7, 2006 <html><body> <div id="wrapperDiv" style="width: 500px; border: 1px solid #000000;"> <div id="leftDiv" style="width: 50%; background-color: #FF0000;"> </div> <div id="rightDiv" style="width: 50%; background-color: #CCCCCC;"> Maintain same height for both 'leftDiv' and 'rightDiv' </div> </div></body></html> Hope you have noticed in the code that the "Wrapper DIV" has two DIVs inside. The "Left DIV" and the "Right DIV".The Left DIV is empty whereas the Right DIV has some text in it. If this piece of code is browsed in IE, the Right DIV is below the Left Div and both the Left and Right DIV only occupy the first half of the Wrapper DIV.Now The Question is Q1. What style must be specified to the 'leftDiv' and/or 'rightDiv' to bring the 'rightDiv' to the right of 'leftDiv'?In the sense, both DIVs should be adjacent to each other (similar to 2 TDs of a table).Q2. What style must be specified to the 'wrapperDiv' and/or 'leftDiv' and/or 'rightDiv' so that the 'leftDiv' adjusts its height automatically to have the same height as of the 'rightDiv'?In other words, whatever the length of the content in the 'rightDiv' be, the 'leftDiv' should automatically adjust its height to make its height same as of the height of 'rightDiv'.Please provide the right code for this. Link to comment Share on other sites More sharing options...
boen_robot Posted April 7, 2006 Share Posted April 7, 2006 You are practically looking for the holy grail. The only thing missing is the requrement of a third column .In order to get the left column to the left, you obviously need float:left, but for the height.. That's much bigger issue.See this layout and try to adjust it, so it has only 2 columns. Link to comment Share on other sites More sharing options...
aspnetguy Posted April 7, 2006 Share Posted April 7, 2006 You are practically looking for the holy grail. The only thing missing is the requrement of a third column .In order to get the left column to the left, you obviously need float:left, but for the height.. That's much bigger issue.See this layout and try to adjust it, so it has only 2 columns.<{POST_SNAPBACK}> I have needed this many times...thank you. Link to comment Share on other sites More sharing options...
scott100 Posted April 8, 2006 Share Posted April 8, 2006 You are practically looking for the holy grail. The only thing missing is the requrement of a third column .In order to get the left column to the left, you obviously need float:left, but for the height.. That's much bigger issue.See this layout and try to adjust it, so it has only 2 columns.<{POST_SNAPBACK}> Brilliant I have also wanted this for ages, this was always a drawback when using css instead of tables, but not anymore Link to comment Share on other sites More sharing options...
boen_robot Posted April 8, 2006 Share Posted April 8, 2006 This has been in CSSplay for ages. How could you have noticed it now ?By the way, all "holy grail" templates that exist today (cause this isn't the only avaiable one) have some kind of drawbacks. This one has two:1. Doesn't look absolutely perfect when looked without CSS (or in other words: structually), but that's easy to fix.2. When the screen gets too small (on IE at least) the different columns overlap each other.Infact, most other templates have theese problems too. Link to comment Share on other sites More sharing options...
Little Goat Posted April 22, 2006 Share Posted April 22, 2006 well, I just found an easy way:as in the cssplay, you have a container div, and then you have two other div's inside it.here is the css for the three divs: div#container {height:100; overflow:visible;}div#col1 {height:100%; overflow:visible; background-color:#ff6666;}div#col2 {height:100%; overflow:visible; background-color:#66ff66;} no matter how much content each of the divs hold, they both appear the same size.LG Link to comment Share on other sites More sharing options...
johneva Posted April 23, 2006 Share Posted April 23, 2006 Height: 100% does not work with floats though so if your layout depends on floats that wont work.That is why there is something called faux coloumns. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 24, 2006 Share Posted April 24, 2006 Why don't you just use a table? Is there some reason that everyone is on a CSS div kick? This is exactly what tables do, they display content that is all the same height, and they have been doing it for years in every browser. What's the problem? Is there some inate fuzzy feeling that happens when you don't use a table? Link to comment Share on other sites More sharing options...
aspnetguy Posted April 24, 2006 Share Posted April 24, 2006 Using divs and CSS for page layouts is more efficient and loads faster. It is also easier to read the code and make changes over time. Nested tables get extremely messy. W3C sets forth that tables should only be used for tablular data like grids and such. If you do not care about standards compliance then feel free to ignore those recommendations. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 24, 2006 Share Posted April 24, 2006 There's a big difference between a recommendation and a requirement. There's no programmatic way to tell if the content a table is displaying is an Excel sheet or not. I would hardly say it's a violation of the spec to use a table to layout a page if you want to make sure the page looks right. I wouldn't say that divs are easier to read in the code. All it takes is one guy who doesn't know what he's doing to put floating divs all over the page, and then you get source code where the items appear in code in a different order than they do on the page. And we can tell from all the posts in places like this that it is not easy to get your divs to look the way you want them across browsers.It seems like the argument is that you can either have easier maintainability through stylesheets with divs, or you can have it actually work with tables. Link to comment Share on other sites More sharing options...
boen_robot Posted April 24, 2006 Share Posted April 24, 2006 Would you please consider continuing your conversation about tables vs CSS and leave this topic alone? Link to comment Share on other sites More sharing options...
johneva Posted April 24, 2006 Share Posted April 24, 2006 It seems like the argument is that you can either have easier maintainability through stylesheets with divs, or you can have it actually work with tables.<{POST_SNAPBACK}> Thats just not true if you know what your doing then divs do work and much better than tables do.The problem comes in that because people are still changing over from tables to div people have to learn how to do it.99% of the people with your opinion on tables over divs just dont know CSS to a high enough level to make it work. If you take the time to learn CSS to a good standard then you wont have a problem with them as you know what can and carnt be done.As stated before tables have there use and that is what they should be used for not for layout of your whole site. There are so many reasons for this and I am tired of going over the same topic over and over in the diffrent forums I use really.If you like using table then do so but dont go round telling people who want to learn the correct way that they are doing wrong.Thanx JohnEDITSorry yeah I was just writing this message when you made your. Link to comment Share on other sites More sharing options...
aspnetguy Posted April 24, 2006 Share Posted April 24, 2006 Ok guys, seriously. This discussion needs to move somewhere else. This post has been hijacked. In fairness to the author please take it elsewhere. Link to comment Share on other sites More sharing options...
josephbastin Posted October 19, 2006 Author Share Posted October 19, 2006 Ok guys, seriously. This discussion needs to move somewhere else. This post has been hijacked. In fairness to the author please take it elsewhere.Thanks a lot guys for the wonderful support. Link to comment Share on other sites More sharing options...
Glom Posted October 21, 2006 Share Posted October 21, 2006 So that first example... how does it work? I tried duplicating the CSS and didn't get anywhere. 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