WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Container, Main, Sidebars (5 posts)

  1. JCKnoell
    Member
    Posted 1 year ago #

    Here is the CSS I am using:

    #container {
       width:100%;
       height:100%;
       background: url(http://www.thinkinkutah.com/wp-content/uploads/2013/07/FullBackgroundGrade.png)
       overflow: auto;
    }
    #main {
       width:40%;
       margin: auto;
    }
    #sidebar {
       width:30%;
       float: left;
    }
    #heading {
    margin-left: 80px;
    align: center;
    text-align: center;
    }
    #sideright {
       width: 30%
       float: right;
    }

    For some reason, the main div is centered, which is great, but it's pushed the left sidebar div down so that the pictures are below the fold... Any ideas why this would happen? The html is literally just a couple img tags in the sidebar and an iframe in the main with no additional styling...

    <div id="container">
       <div id="main">
    	<div id="heading">
    	<h1>Header Here</h1>
    	<h3>Subhead here</h3>
    	</div>
    	<div id="video">
    
    		<iframe width="900" height="506" src="//www.youtube.com/embed/miHwx-uUj8A" frameborder="0" allowfullscreen></iframe>
    	</div>
       </div>
       <div id="sidebar">
    <style>
    img.block{display: block;}
    </style>
    
    <img class="block" style="padding-left:20px;" height="438" width="413" src="Image Here">
    <img class="block" style="padding-left:20px; padding-top: 20px;" height="207" width="413" src="Image Here">
       </div>
    </div>
  2. CrouchingBruin
    Member
    Posted 1 year ago #

    Can you provide a link to the page? I don't think it's anything on thinkinkutah.com, because I don't see a YouTube video on any of the pages. It's easier to see what's going on using a tool like Firebug against a live site.

  3. JCKnoell
    Member
    Posted 1 year ago #

    Sorry, duh. Meant to do that. the site is http://www.thinkinkutah.com/whyrefill

    Obviously it's not finished, nor is it supposed to be "live" yet.

  4. JCKnoell
    Member
    Posted 1 year ago #

    Nevermind, I figured this one out. Thanks for the help! :)

    My sidebar div was listed after my main div in my code. really simple fix.

  5. CrouchingBruin
    Member
    Posted 1 year ago #

    Let's try taking off width: 100% and adding display: inline-block; to #container first. That should get the left sidebar in place. The width of the iframe for the video might be a problem, though, for the right sidebar; it's fairly wide. You might try cutting the dimensions in half.

Topic Closed

This topic has been closed to new replies.

About this Topic