WordPress.org

Support

Support » Themes and Templates » [Resolved] Container, Main, Sidebars

[Resolved] Container, Main, Sidebars

  • 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>
Viewing 4 replies - 1 through 4 (of 4 total)
  • 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.

    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.

    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.

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Resolved] Container, Main, Sidebars’ is closed to new replies.
Skip to toolbar