3
Contributors
5
Replies
6
Views
8 Years
Discussion Span
Last Post by daviddoria
0

div#main needs to be enclosed in the div#content-wrap.
this will stop your text from "hanging out" :)
you need to change your HTML to the following:

<div id="content-wrap">
    <div id="sidebar">
      <h1>Search Box</h1>
      <form action="http://www.free-css.com/" class="searchform">
        <p>
          <input name="search_query" class="textbox" type="text" />

          <input name="search" class="button" value="Search" type="submit" />
        </p>
      </form>
      <h1>Sidebar Menu</h1>
      <ul class="sidemenu">
        <li><a href="http://www.free-css.com/">Home</a></li>
        <li><a href="#TemplateInfo">Template Info</a></li>

        <li><a href="#SampleTags">Sample Tags</a></li>
        <li><a href="http://www.free-css.com/">More Free Templates</a></li>
        <li><a href="http://www.free-css.com/">Premium Templates</a></li>
      </ul>
      <h1>Links</h1>
      <ul class="sidemenu">
        <li><a href="http://www.free-css.com/">PDPhoto.org</a></li>

        <li><a href="http://www.free-css.com/">Squidfingers</a></li>
        <li><a href="http://www.free-css.com/">Alistapart</a></li>
        <li><a href="http://www.free-css.com/">CSS Remix</a></li>
        <li><a href="http://www.free-css.com/">Dark Eye</a></li>
      </ul>
    </div>

    <div id="main">
      Home page
   </div> <!--end main-->

  </div>

and then you need to clear #main and #sidebar.
here is a good article that explains how to clear your elements:
http://www.positioniseverything.net/easyclearing.html

0

I see, thanks. However, I have most of the code in a header.shtml file so I can do this:

<div id="wrap">
<!--#include file="header.shtml" -->
    <div id="main">
      Home page
   </div> <!--end main-->

</div> <!--end content wrap from header.shtml-->

So that I can use the same page layout and just server side include different text for each "page" of the site. So now the header.shtml looks like:

<div id="content-wrap">
    <div id="sidebar">
      <h1>Some stuff</h1>
  
    </div> <!--end sidebar-->

You'll note that there is no </div> ending the content-wrap because that appears in the main files (index.shtml for example) AFTER the main-div, as you suggested. This seems a BIT goofy - is this a standard thing to do?

Thanks,

Dave

0

I see, thanks. However, I have most of the code in a header.shtml file so I can do this:

<div id="wrap">
<!--#include file="header.shtml" -->
    <div id="main">
      Home page
   </div> <!--end main-->

</div> <!--end content wrap from header.shtml-->

So that I can use the same page layout and just server side include different text for each "page" of the site. So now the header.shtml looks like:

<div id="content-wrap">
    <div id="sidebar">
      <h1>Some stuff</h1>
  
    </div> <!--end sidebar-->

You'll note that there is no </div> ending the content-wrap because that appears in the main files (index.shtml for example) AFTER the main-div, as you suggested. This seems a BIT goofy - is this a standard thing to do?

Thanks,

Dave

no it is not standard. what you should do is remove #content-wrap from header.shtml and instead have it like so:

<div id="sidebar">
      <h1>Some stuff</h1>
  
    </div> <!--end sidebar-->

and have your index.shtml look like so:

<div id="wrap">
  <div id="content-wrap">
    <!--#include file="header.shtml" -->
    <div id="main">
      Home page
   </div> <!--end main-->

  </div> <!--end content wrap from header.shtml-->

also remember to clear your elements or you will run into problems later on... refer to the article i linked for you or look up "how to clear floats".

Edited by urolicious: n/a

0

Great - I guess the problem was mostly with what was contained inside the content-wrap. I didn't end up "clearing" any of the div's, but it seems to be working fine.

Thanks!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.