sepoto Posted August 15, 2012 Share Posted August 15, 2012 (edited) <?phprequire_once('includes/i_rsslib.php');require_once('functions/f_lib.php');?><!DOCTYPE html><html><head><title>Daily Sports Guide</title><link type="text/css" rel="stylesheet" href="style/style.css"><link type="text/css" rel="stylesheet" href="style/suckerfish.css"></head><body><div id="wrapper"><?php require_once('includes/i_header.php'); ?> <div style='margin: 5px; padding: 5px; border: 1px solid white; height: auto; clear: both; overflow: hidden;'><div style='float: left; width: 48%; height: 100%; border: 1px solid blue; overflow: hidden;'>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war.We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor powerto add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished workwhich they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us -- that from these honored dead we take increased devotion tothat cause for which they gave the last full measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this nation, under God, shall have anew birth of freedom -- and that government of the people, by the people, for the people, shall not perish from the earth.</div><div style='float: left; width: 48%; height: 100%; border: 1px solid blue; overflow: hidden; margin: 0px 0px 0px 5px;'>Governor Stevenson, Senator Johnson, Mr. Butler, Senator Symington, Senator Humphrey, Speaker Rayburn, Fellow Democrats, I want to express my thanks to Governor Stevenson for his generous and heart-warming introduction.It was my great honor to place his name in nomination at the 1956 Democratic Convention, and I am delighted to have his support and his counsel and his advice in the coming months ahead.With a deep sense of duty and high resolve, I accept your nomination.I accept it with a full and grateful heart--without reservation-- and with only one obligation--the obligation to devote every effort of body, mind and spirit to lead our Party back to victory and our Nation back to greatness.I am grateful, too, that you have provided me with such an eloquent statement of our Party's platform. Pledges which are made so eloquently are made to be kept. "The Rights of Man"--the civil and economicrights essential to the human dignity of all men--are indeed our goal and our first principles. This is a Platform on which I can run with enthusiasm and conviction.</div></div> </div></body></html> So I have created this skeleton example of a two column layout. While the content of each column may vary I would like the borders of each column to match each other. I thought that I might be able to put the columns in a wrapper, float them and then use the 'height: 100%' CSS property on both columns. Unfortunately, solving the problem is not that simple. Does anyone know a way to do this? I had a layout before that was alright but if I could somehow get to the solution for this one it would look that much nicer. Is what I am trying to achieve with the layout possible? I uploaded a live copy to http://dailysportsguide.com/prototype/. Thanks again and in advance for any of your most useful comments and suggestions. P.S. I already have a plan to accomplish the same goal with some jQuery however if this can be done with CSS I would much prefer that method... Edited August 15, 2012 by sepoto Link to comment Share on other sites More sharing options...
sepoto Posted August 15, 2012 Author Share Posted August 15, 2012 So essentially I had to do things with jQuery. I am just wondering if there are any thoughts on how CSS seems to handle these elements... What I ended up with I think is good so I may as well share the solution... <?phprequire_once('includes/i_rsslib.php');require_once('functions/f_lib.php');?><!DOCTYPE html><html><head><title>Daily Sports Guide</title><link type="text/css" rel="stylesheet" href="style/style.css"><link type="text/css" rel="stylesheet" href="style/suckerfish.css"><script type="text/javascript" src="jquery/jquery-1.8.0.js"></script><script type="text/javascript"> $(document).ready(function(){ if( $("#content-left").height() < $("#content-right").height() ){$("#content-left").css("height", $("#content-right").height() );}else{$("#content-right").css("height", $("#content-left").height() );} }); </script><style>#content { clear: both; margin: 0px; padding: 0px; border: 1px solid white; width: 798px; overflow: hidden; height: auto; }#content-left { float: left; margin: 0px; padding: 0px; width: 397px; border: 1px solid blue; }#content-right { float: left; margin: 0px; padding: 0px; width: 397px; border: 1px solid blue; }</style></head><body><div id="wrapper"><?php require_once('includes/i_header.php'); ?> <div id="content"><div id="content-left">Four score and seven years ago...</div><div id="content-right">Four score and seven years ago...Four score and seven years ago...Four score and seven years ago...Four score and seven years ago...</div></div> <div id="msgid"></div></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 15, 2012 Share Posted August 15, 2012 (edited) #content { clear: both; margin: 0px; padding: 0px; border: 1px solid white; width: 798px; overflow: hidden; height: auto; position: relative; }#content-left, #content-right, #illusion { width:397px;} #illusion { position:absolute; border: 1px solid blue; left:0; bottom:0; right:0; top:0; } #content-left { float: left; margin: 0px; padding: 0px; } #content-right { float: left; margin: 0px; padding: 0px; border: 1px solid blue; } <div id="wrapper"><?php require_once('includes/i_header.php'); ?> <div id="content"><div id="illusion"></div><div id="content-left">Four score and seven years ago...</div><div id="content-right">Four score and seven years ago...Four score and seven years ago...Four score and seven years ago...Four score and seven years ago...</div></div> <div id="msgid"></div></div> Edited August 15, 2012 by dsonesuk 1 Link to comment Share on other sites More sharing options...
sepoto Posted August 15, 2012 Author Share Posted August 15, 2012 It's going to take me a bit of time to tinker with what you have done. I see I can learn quite a bit from running your code through jsFiddle. Thanks again it looks like an awesome alternate method. Link to comment Share on other sites More sharing options...
sepoto Posted August 18, 2012 Author Share Posted August 18, 2012 (edited) OK. I see what it is. I have to turn off the inside blue border. It appears that everything hinges upon some expert positioning. I still need to study it more. Thank you dsonesuk, you are helping me take things to the next level by showing me this. I greatly appreciate your efforts. Edited August 18, 2012 by sepoto 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