Question

I’m trying to position two <div> elements so that that their left sides line up, like the top navigation bar and sidebar in this photo:

Normally, I would use a parent <div> to help with this. The problem is that I plan on using a PHP include() for the header and sidebar, to save copying and pasting across the site. This means that the <div> tag has to be left open at the end of the include(), to leave room for the content on the right. This seems like horrible practice, and I might forget to add </div> at the end of the page.

Is there a way to align the blocks without enclosing them in a parent container?

EDIT: Here’s what I have so far.

<!-- Common code.  Designed to be include()'d into each page. -->
<div id = "Header">
    <a href = "/"><img id = "Logo" src = "Foo.jpg"></a>
    <!-- #Logo is centered in CSS. -->

    <ul id = "TopNav">
        <li><a href = "/">Home</a></li>
        <li><a href = "Browse">Home</a></li>
    </ul>
    <!-- #TopNav is also centered in CSS. There are also
    some fancy link effects, but those are irrelevant. -->
</div>

<div id = "Sidebar">
    <!-- Contains stuff like advertisements and a 
    table of contents. -->
</div>
<!-- No CSS effects are currently applied to the sidebar, meaning it's on the
far left of the page.  I'm trying to line it up with #TopNav, which is
closer to the center.

<!-- The content section to the right of the sidebar is not included
in this file.  That's defined on a page-by-page basis.  Whatever that
content is, it should fall to the right of the sidebar.  It'd be nice
if the left side of the content never fell past the right side of the
sidebar, though not an absolute necessity. -->

Answer 1

You can still align the two div‘s using a parent container. There is no need to worry about leaving div tags open. Just write your html/php like this:

<div id="parent">
    <?php include 'header_sidebar.php'; ?>
    <div id="content">
    </div>
</div>