sepoto Posted August 9, 2012 Share Posted August 9, 2012 (edited) <?phprequire_once('includes/i_rsslib.php');require_once('functions/f_lib.php');?><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><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'); ?> <!-- start columns left and right --><div id="container2"><div id="container1"> <div id="col1"><?php include("index_leftcolumn.html"); ?></div> <!-- column break --> <div id="col2"><div id="col2inner"><h4 id="latestFromDSG">Latest from DSG</h4><div style='margin: 5px; padding: 0px; color: white; background-color: black;'><?php require_once('index_twitterfeed.php'); ?></div></div></div> </div></div><!-- end columns left and right --> <div style='margin: 5px; padding: 0px; border: 1px solid white;'><p style='color: white;'>Facebook comments area:</p></div> </div></body></html> body { background-color: black; text-align: center; }img { border: none; margin: 0; padding: 0; }a:visited { color: white; } #wrapper { width: 800px; margin: 0px auto; color: white; background-color: black; border: 1px solid red; text-align: left; padding: 0px 0px 0px 0px; height: auto; overflow: hidden;} #header { margin: 0px; padding: 0px; width: 100%; height: 141px; }#hcolumnLeft { float: left; width: 300px; background-color: blue; margin: 0px; padding: 0px; color: white; height: 141px; }#hcolumnRight { float: right; margin: 0px; padding: 0px; color: white; background-color: black; width: 500px; height: 141px; text-align: right; } #container2 { clear:left; float:left; width:100%; overflow:hidden; background: black; }#container1 { float:left; width:100%; position:relative; right:30%; background: black; }#col1 { float:left; width:70%; position:relative; left:30%; overflow:hidden; }#col2 { float:left; width:30%; position:relative; left:30%; overflow:hidden; } #latestFromDSG { font-size: 16px; margin: 0px 0px 10px; padding: 5px; background: #0100FE; }#col2inner { margin: 5px; padding: 0px; border: 1px solid white; background-color: black; } For some reason when I look at the CSS in Firebug I see that the facebook comments area thinks that it starts all the way at the top of #wrapper. This is not my intent at all. In fact my intent is to have the facebook comments area starting below the two column layout but still inside #wrapper. As usual with CSS trying to figure this out is not at all logical to me and not at all easy to understand. I see what the problem is but I really feel clueless on how to fix it. I had it in mind to upload a live copy to my server but for some reason I can not determine yet my PHP includes which are working fine on my IIS, PHP server are not working at all when I upload the files to CentOS 6, PHP server. Really I have to get the CSS right before I can figure out what is wrong with Cent OS. Thanks in advance for any help, comments or suggestions... Edited August 9, 2012 by sepoto Link to comment Share on other sites More sharing options...
dsonesuk Posted August 9, 2012 Share Posted August 9, 2012 Sorry? why do you think the FB comments start at top?? IF you referring to the right firebug panel where it shows styling for fb comments above wrapper, it does that to show the precedence of current styling applied to selected element, the styling takes precedence over the styling below it. IT tells you that it inherits color: white, and text alignment from its parent element #wrapper, that why its text is on the left, and white. 1 Link to comment Share on other sites More sharing options...
sepoto Posted August 9, 2012 Author Share Posted August 9, 2012 (edited) So what I am really trying to understand is why I see the one pixel solid white border for the facebook comments div only on the left, right and bottom. The top border is blocked out for some reason. I have tried numerous times to apply a top margin to the facebook comments div. I tried also using a few <br>'s. Seemingly nothing will move the facebook comments div into position where I can see the border on all four sides. I've ruled out margins and paddings for the two container objects of columns one and two above and also for col1 and col2 themselves. Edited August 9, 2012 by sepoto Link to comment Share on other sites More sharing options...
dsonesuk Posted August 9, 2012 Share Posted August 9, 2012 (edited) Because the elements above it are floated, the non floated fb comment container is trying to merge with them, apply clear: both; or our friend overflow:hidden; to fb comment container. WHY are you using position: relative; and left and right properties, you should try to stick with floating, margins and padding and try try to avoid using position unless you really, really really have to. Edited August 9, 2012 by dsonesuk 1 Link to comment Share on other sites More sharing options...
sepoto Posted August 9, 2012 Author Share Posted August 9, 2012 As you say it: <div style='clear: both; margin: 5px; padding: 0px; border: 1px solid white;'><p style='color: white;'>Facebook comments area:</p></div> I greatly appreciate the patience. The clear property I am not very familiar with yet but I see how it can be very useful. Again thank you kindly. You did have the solution. 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