Jump to content

How to Uniformly increase height of 2 DIVs?


josephbastin
 Share

Recommended Posts

<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

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

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.

I have needed this many times...thank you.
Link to comment
Share on other sites

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.

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

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

  • 2 weeks later...

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

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

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

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

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

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.

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

  • 5 months later...

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...