Jump to content

Stacking div's under a two column layout with containers...


Recommended Posts

 <?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. screenshot.png 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 by sepoto
Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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

Edited by sepoto
Link to post
Share on other sites

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 by dsonesuk
  • Like 1
Link to post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...