3 Replies Latest reply on Aug 6, 2006 11:00 PM by Newsgroup_User

    Positioning problem - CSS

    Level 7
      Hi all

      I know you get tons of questions about CSS positioning - and I may even have
      asked something similar before BUT this one is leaving me screaming in
      frustration.

      I can't see ANYTHING that is causing this problem - but there's clearly
      something very wrong with my markup.

      The url is http://wharfstudio.thecolourfactor.co.uk/index1.html.

      Problem is as follows: I'm trying to get the text content div to be on the
      left, auto width [I want a fluid layout], and I want the picture div to sit
      next to it on the right, specified width. The picture div insists on moving
      down even though there's enough space for it next to the content div.

      I've done other layouts very similar and don't get this problem!

      There is something new in this layout though and this is prob'ly the bit I'm
      messing up - the footer is locked to the bottom of the viewing pane. This
      works but I'm fairly sure this bit of the markup is causing the picture div
      problem. Just don't know why or how.

      Anybody help??

      Thanks and regards
      Judi


        • 1. Re: Positioning problem - CSS
          Level 7
          This is how you would achieve the middle fluid section, copy code below
          and paste into a new Dreamweaver document and run it through a
          browser....it works.

          Start adding your other <divs> back in, one by one, view it in the
          browser and see if and where it breaks down. I have to say I don't like
          what I see too much in your style sheet. I would'nt be doing it like
          that but of course there are many ways to achieve the same results so
          just take it one step at a time.




          <!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"><head>
          <meta http-equiv="Content-Type" content="text/html;
          charset=iso-8859-1"><title>John Bigglestone - Wharf Studio, Devizes</title>

          <style type="text/css">
          body {
          height:100%;
          max-height:100%;
          background-color:#333333;
          overflow:hidden;
          padding:0;
          margin:0;
          border:0;
          color:#999999;
          }
          html {
          height:100%;
          max-height:100%;
          padding:0;
          margin:0;
          border:0;
          background-color:#333333;
          font-size:80%;
          font-family:Geneva, Arial, Helvetica, sans-serif;
          /* hide overflow:hidden from IE5/Mac */
          /* \*/
          overflow: hidden;
          /* */
          }
          .content {
          margin-right: 300px;
          padding-left: 20px;
          }
          .photoblock {
          width:250px;
          float: right;
          padding-right: 20px;
          padding-left: 20px;
          }

          </style></head>

          <body>

          <div class="wrapper">
          <div class="photoblock"><img src="slides/01.jpg" width="250"></div>

          <div class="content">
          <p>The Place<br />
          Wharf Studio is located near the centre of Devizes, a country
          market town on the edge of Salisbury plain.</p>
          <p>The Studio<br />
          Five hundred square feet of shooting space, with tungsten and
          electronic flash lighting.</p>
          <p>The Work<br />
          Corporate and advertising photography for a range of clients located
          throughout an area from Wales to London and the South Coast.</p>

          <p>Largely studio-based (though a significant amount of work is shot
          on location), it includes people, products, corporate interiors and
          large-scale installations.</p>
          <p>Picture destinations include company brochures and annual reports,
          roadside and London Underground posters, cover and PR shots in
          specialist magazines and college prospectuses.</p>
          <p>Computer-based picture manipulation and retouching is available
          in-house at Wharf Studio using AppleMac and PC units. Clients often
          work alongside staff throughout the process, ensuring optimum results.</p>
          </div>

          </div>
          </body></html>

          • 2. Re: Positioning problem - CSS
            Level 7
            Hi Osgood

            Sorry for late reply.... and thanks for yours.

            What don't you like about the style sheet? It is cumbersome, I know.... I
            didn't write it all myself, it's adapded from a free style sheet.

            The bit I wanted was the fixed footer and I didn't know how to do that hence
            copying the bits I needed.

            Don't want to waste you time on this but if you felt like it, could you tell
            me how you would do it differently?

            Thanks and regards
            Judi


            "Osgood" <notavailable@atthisaddress.com> wrote in message
            news:eb4nvi$hla$1@forums.macromedia.com...
            > This is how you would achieve the middle fluid section, copy code below
            > and paste into a new Dreamweaver document and run it through a
            > browser....it works.
            >
            > Start adding your other <divs> back in, one by one, view it in the browser
            > and see if and where it breaks down. I have to say I don't like what I see
            > too much in your style sheet. I would'nt be doing it like that but of
            > course there are many ways to achieve the same results so just take it one
            > step at a time.
            >
            >
            >
            >
            > <!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"><head>
            > <meta http-equiv="Content-Type" content="text/html;
            > charset=iso-8859-1"><title>John Bigglestone - Wharf Studio,
            > Devizes</title>
            >
            > <style type="text/css">
            > body {
            > height:100%;
            > max-height:100%;
            > background-color:#333333;
            > overflow:hidden;
            > padding:0;
            > margin:0;
            > border:0;
            > color:#999999;
            > }
            > html {
            > height:100%;
            > max-height:100%;
            > padding:0;
            > margin:0;
            > border:0;
            > background-color:#333333;
            > font-size:80%;
            > font-family:Geneva, Arial, Helvetica, sans-serif;
            > /* hide overflow:hidden from IE5/Mac */
            > /* \*/
            > overflow: hidden;
            > /* */
            > }
            > .content {
            > margin-right: 300px;
            > padding-left: 20px;
            > }
            > .photoblock {
            > width:250px;
            > float: right;
            > padding-right: 20px;
            > padding-left: 20px;
            > }
            >
            > </style></head>
            >
            > <body>
            >
            > <div class="wrapper">
            > <div class="photoblock"><img src="slides/01.jpg" width="250"></div>
            >
            > <div class="content">
            > <p>The Place<br />
            > Wharf Studio is located near the centre of Devizes, a country market
            > town on the edge of Salisbury plain.</p>
            > <p>The Studio<br />
            > Five hundred square feet of shooting space, with tungsten and electronic
            > flash lighting.</p>
            > <p>The Work<br />
            > Corporate and advertising photography for a range of clients located
            > throughout an area from Wales to London and the South Coast.</p>
            >
            > <p>Largely studio-based (though a significant amount of work is shot on
            > location), it includes people, products, corporate interiors and
            > large-scale installations.</p>
            > <p>Picture destinations include company brochures and annual reports,
            > roadside and London Underground posters, cover and PR shots in
            > specialist magazines and college prospectuses.</p>
            > <p>Computer-based picture manipulation and retouching is available
            > in-house at Wharf Studio using AppleMac and PC units. Clients often work
            > alongside staff throughout the process, ensuring optimum results.</p>
            > </div>
            >
            > </div>
            > </body></html>
            >


            • 3. Re: Positioning problem - CSS
              Level 7
              Judith Kruger wrote:
              > Hi Osgood
              >
              > Sorry for late reply.... and thanks for yours.
              >
              > What don't you like about the style sheet? It is cumbersome, I know.... I
              > didn't write it all myself, it's adapded from a free style sheet.
              >
              > The bit I wanted was the fixed footer and I didn't know how to do that hence
              > copying the bits I needed.
              >
              > Don't want to waste you time on this but if you felt like it, could you tell
              > me how you would do it differently?

              If you have tested your page in a variety of browsers and it is working
              to your requirements then its ok.

              As I said in my previous post there quite a few css ways to achieve the
              same results. I just see something in a stylesheet that I'm not familair
              with and think this or that could be the cause of problems because its
              foreign to me. We all write css in different ways and I can only give
              solutions which I'm familiar with.

              Your page appears to be working ok now (even in Mac IE5x) If you can get
              it to work in MacIE5x then it will almost certainly work in all other
              browsers with or without minor tweaks. Whilst this is a pretty much dead
              browser it is a good benchmark of how you write css to account for a
              number of browsers. All layouts CAN work in MacIE5x so my philosophy is
              still write for it. I would not attempt to put the footer at the very
              bottom of the browers viewport as it will most likely be broken in some
              browser somewhere. I would just let the depth of the content on each
              page determine where the footer sits.