I am trying to design my first custom (not kind of modified/hacked together) WordPress theme. I am using Starkers as my starting point. In the middle of the page, I have a div (cnt-mid-inner) which contains two other divs, cntin-cnt and cntin-side. cntin-cnt contains all the posts and stuff and cntin-side contains the sidebar. I want the sidebar to be at the right and the posts to be next to it on the left.

The problem is that the floated sidebar is below the posts. In other words, all the positioning is right, except that the sidebar is too low on the page. Here is a picture of what I am talking about:

http://img132.imageshack.us/my.php?i...estsiteld7.png
(sidebar is in red, posts are in yellow)

Here is the css for the divs I mentioned and the footer:

/* cnt-mid-inner - main content holder */
#cnt-mid-inner{
border: 1px solid black; /* debug */
}

/* cntin-cnt - posts */
#cntin-cnt{
background: yellow;
margin-right: 200px;
}

/* cntin-side - sidebar */
#cntin-side{
background: red;
float: right;
width: 200px;
}

/* cnt-btm-footer - footer below cnt-mid-inner (main content) */
#cnt-btm-footer{
border: 1px solid black; /* debug */
clear: both;
}

Thanks!

on the #cntin-cnt, you have margin-right: set to 200px. That basically makes your main content the whole width of the website. If you get rid of that margin, you should be able to get the floats to work.

Tell me if it works!
- Steve

Thanks for the suggestion, but I don't think it fixed the problem. Here is an updated screenshot with that change. (I have changed the top part of the page some, too.)

http://img364.imageshack.us/my.php?i...stsite2nz1.png

It would be a LOT easier to figure out what's going if you had a URL or ALL of the code. We can't do anything with code snippets and a screenshot.

Oh! Sorry. Your main area will need to have a fixed width.

- Steve

stevej - Thanks, but no change.

LadynRed - Here is the WP theme code for index.php. Does that help?

<?php get_header(); ?><!-- beginning tags for site and logo-bar here, ending tag for logo-bar -->

<div id="cnt-outer">

<div id="cnt-top-nav">top navigation</div><!-- /cnt-top-nav -->

<div id="cnt-mid-inner">
<div id="cntin-cnt">
    <?php if (have_posts()) : ?>

        <?php while (have_posts()) : the_post(); ?>

            <div class="post" id="post-<?php the_ID(); ?>">
                <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                <p><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></p>

                <?php the_content('Read the rest of this entry &raquo;'); ?>

                <p><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
            </div>

        <?php endwhile; ?>
        
        <ul>
            <li><?php next_posts_link('&laquo; Older Entries') ?></li>
            <li><?php previous_posts_link('Newer Entries &raquo;') ?></li>
        </ul>
        
    <?php else : ?>

        <h2>Not Found</h2>
        <p>Sorry, but you are looking for something that isn't here.</p>
        <?php include (TEMPLATEPATH . "/searchform.php"); ?>

    <?php endif; ?>
</div><!-- /cntin-cnt -->

<div id="cntin-side">
<?php get_sidebar(); ?>
</div><!-- /cntin-side -->
</div><!-- /cnt-mid-inner -->

<?php get_footer(); ?> <!-- contains start for cnt-btm-footer, end for cnt-btm-footer, end for cnt-outer, end for site -->

Should I post more code? If so, what?

Is it on-line at all ? That would be easier. It sounds to me like there may be some conflict somewhere, so only posting the css for that one bit isn't enough.

Sorry, but it is not yet. I have put in the full code that the browser sees, though, and some updated CSS. I have gotten some suggestions and I made changed my fixed widths to relative ones with no change. I then added overflow:hidden, which had the effect of moving the border for the surrounding box to include the sidebar, but nothing else.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

    <head profile="http://gmpg.org/xfn/11">
        
        <title>
            Test Site        </title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta name="description" content="Just another WordPress weblog" />
            
        <link rel="stylesheet" type="text/css" href="http://localhost/wordpress1/wp-content/themes/themetest1/style.css" media="screen" />
        <link rel="alternate" type="application/rss+xml" title="Test Site RSS Feed" href="http://localhost/wordpress1/?feed=rss2" />
        <link rel="pingback" href="http://localhost/wordpress1/xmlrpc.php" />

        <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress1/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress1/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 2.7" />


    </head>

    <body>

<!-- moved here from index.php -->    
<div id="site">
<div id="logo-bar">
<!-- /moved -->

        <h1><a href="http://localhost/wordpress1/"><!-- old: Test Site--><img src="/wordpress1/logo.gif" alt="Site" /></a></h1>
        <!-- blog description and about page: (don't really need) <p>Just another WordPress weblog</p>
        <ul>
<li class="page_item page-item-2"><a href="http://localhost/wordpress1/?page_id=2" title="About">About</a></li>
        </ul>-->

</div><!-- /logo-bar -->
<!-- beginning tags for site and logo-bar here, ending tag for logo-bar -->

<div id="cnt-outer">

<div id="cnt-top-nav">top navigation</div><!-- /cnt-top-nav -->

<div id="cnt-mid-inner">
<div id="cntin-cnt">
    
        
            <div class="post" id="post-1">
                <h2><a href="http://localhost/wordpress1/?p=1" rel="bookmark" title="Permanent Link to Hello world!">Hello world!</a></h2>
                <p>December 26th, 2008 <!-- by admin --></p>

                <p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>

                <p> Posted in <a href="http://localhost/wordpress1/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a> |   <a href="http://localhost/wordpress1/?p=1#comments" title="Comment on Hello world!">1 Comment »</a></p>
            </div>

                
        <ul>
            <li></li>
            <li></li>
        </ul>
        
    </div><!-- /cntin-cnt -->

<div id="cntin-side">
        <ul>
                        <li>
                <form method="get" id="searchform" action="http://localhost/wordpress1/">
    <label class="hidden" for="s">Search for:</label>
    <input type="text" value="" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Search" />
</form>
            </li>

            <!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
            <li><h2>Author</h2>
            <p>A little something about you, the author. Nothing lengthy, just an overview.</p>
            </li>
            -->
            
            <li class="pagenav"><h2>Pages</h2><ul><li class="page_item page-item-2"><a href="http://localhost/wordpress1/?page_id=2" title="About">About</a></li>
</ul></li>
            <li><h2>Archives</h2>
                <ul>
                    <li><a href='http://localhost/wordpress1/?m=200812' title='December 2008'>December 2008</a></li>
                </ul>
            </li>
            <li class="categories"><h2>Categories</h2><ul>    <li class="cat-item cat-item-1"><a href="http://localhost/wordpress1/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a> (1)
</li>
</ul></li>
                            <li id="linkcat-2" class="linkcat"><h2>Blogroll</h2>
    <ul class='xoxo blogroll'>
<li><a href="http://wordpress.org/development/">Development Blog</a></li>
<li><a href="http://codex.wordpress.org/">Documentation</a></li>
<li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li>
<li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li>
<li><a href="http://wordpress.org/support/">Support Forum</a></li>
<li><a href="http://wordpress.org/extend/themes/">Themes</a></li>
<li><a href="http://planet.wordpress.org/">WordPress Planet</a></li>

    </ul>
</li>

                <li>
                    <h2>Meta</h2>
                    <ul>
                                                <li><a href="http://localhost/wordpress1/wp-login.php">Log in</a></li>
                        <li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
                        <li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
                        <li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
                                            </ul>
                </li>
            
                    </ul></div><!-- /cntin-side -->
</div><!-- /cnt-mid-inner -->

<div id="cnt-btm-footer">

        <p>Test Site is proudly powered by <a href="http://wordpress.org/">WordPress 2.7</a> | <a href="http://localhost/wordpress1/?feed=rss2">Entries (RSS)</a> | <a href="http://localhost/wordpress1/?feed=comments-rss2">Comments (RSS)</a>.</p>

</div><!-- /cnt-btm-footer -->
</div><!-- /cnt-outer -->

</div><!-- /site -->

    </body>

</html>
 <!-- contains start for cnt-btm-footer, end for cnt-btm-footer, end for cnt-outer, end for site -->

CSS:

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

/*
===============================
= Rough Overall DIV Structure =
===============================

body <- header.php begins
  site
    logo-bar
    cnt-outer <- index.php begins
      cnt-top-nav
      cnt-mid-inner
        cntin-cnt
        cntin-side
      cnt-btm-footer <-footer.php begins

================================
*/

/* styles for entire body */
body{
   background: orange; /* set page bg to color orange - should be changed to exact color */
}

/* site - centered block containing everything on the page */
#site{
border: 1px solid black; /* debug */
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}

/* logo-bar - contains logo + everything on the same vertical level */
#logo-bar{
border: 1px solid black; /* debug */
margin-bottom: 5px;
}

/* cnt-outer - outer container for all content, located directly below logo-bar */
#cnt-outer{
border: 1px solid black; /* debug */
background: green;
padding: 10px;
}

/* cnt-top-nav - main site navigation bar, just above cnt-mid-inner (main content) */
#cnt-top-nav{
border: 1px solid black; /* debug */
}

/* cnt-mid-inner - main content holder */
#cnt-mid-inner{
border: 1px solid black; /* debug */
width: 100%; /* used to be 900px */
overflow: hidden;
}

/* cntin-cnt - posts */
#cntin-cnt{
background: yellow;
width: 79%;
}

/* cntin-side - sidebar */
#cntin-side{
background: red;
float: right;
overflow: hidden;
width: 20%; /* used to be 200px */
}

/* cnt-btm-footer - footer below cnt-mid-inner (main content) */
#cnt-btm-footer{
border: 1px solid black; /* debug */
clear: both;
}

`e 09`1`

OK. I got a test site online: http://testing.linuxloop.com/llwp/

That's because
#cntin-cnt is not floated at all.

Thank you. That fixed it.