2 Replies Latest reply on Jul 26, 2007 1:53 AM by zelky

    CSS Layout problems

    zelky Level 1
      I should start this by saying I am very new to CSS layouts, and am self taught, so I'm probably doing something very wrong. So far I've stuck to really simple layouts and had no problems...but they were very simple layouts.

      With the site I'm doing at the moment I have placed other div's inside a content div, so that I can have left and right hand content within the content div. But the left and right div's are not pushing the content div down with their content, and I'm not sure what else to try to get it to work.

      I've tried setting the height of the content div to auto or inherit but that doesn't work.

      As you can see on the main page of the site I'm using a background image in the content cell.

      http://members.westnet.com.au/zelky/surfschoolnew/index.html

      And if you look at the details page you can see what I am trying to describe. The content div not pushing down with the left and right content div’s contents means the background image is just a few pixels deep under the nav div.

      http://members.westnet.com.au/zelky/surfschoolnew/details.html

      And my pathetic CSS/stylesheet is here:

      http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css

      Thanks in advance and hopefully my mess isn’t’ to hard to look at. As I said I'm a bit lost so hopefully I'm not going to confuse anyone with my "home made" skills.
        • 1. Re: CSS Layout problems
          Level 7
          When you 'float' elements on your page you effectively remove them from
          the normal flow of the document, therfore the 'content' <div> thinks
          nothing is inside it. You need to help it by 'clearing' the floats.
          There are various methods for clearing floats.

          Insert a 'clearing' <br> (shown below) into your pages code directly
          AFTER the closing 'right' container tag and BEFORE the closing 'content'
          container tag.

          </div><!-- end 'right' -->
          <br style="clear: both;" />
          </div><!-- end 'content' -->









          zelky wrote:
          > I should start this by saying I am very new to CSS layouts, and am self taught,
          > so I'm probably doing something very wrong. So far I've stuck to really simple
          > layouts and had no problems...but they were very simple layouts.
          >
          > With the site I'm doing at the moment I have placed other div's inside a
          > content div, so that I can have left and right hand content within the content
          > div. But the left and right div's are not pushing the content div down with
          > their content, and I'm not sure what else to try to get it to work.
          >
          > I've tried setting the height of the content div to auto or inherit but that
          > doesn't work.
          >
          > As you can see on the main page of the site I'm using a background image in
          > the content cell.
          >
          > http://members.westnet.com.au/zelky/surfschoolnew/index.html
          >
          > And if you look at the details page you can see what I am trying to describe.
          > The content div not pushing down with the left and right content div?s contents
          > means the background image is just a few pixels deep under the nav div.
          >
          > http://members.westnet.com.au/zelky/surfschoolnew/details.html
          >
          > And my pathetic CSS/stylesheet is here:
          >
          > http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
          >
          > Thanks in advance and hopefully my mess isn?t? to hard to look at. As I said
          > I'm a bit lost so hopefully I'm not going to confuse anyone with my "home made"
          > skills.
          >
          >

          • 2. Re: CSS Layout problems
            zelky Level 1
            Osgood,

            Thank you for taking the time to look at my problem. You have given me the solution to the problem.

            Once again thank you.