Help with Firefox in a two-column float layout

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Matt Bostock
    #1

    Help with Firefox in a two-column float layout

    Hi,

    I'm a bit of a CSS newbie so please accept my apologies if this post is
    inappropriate.

    I can't get the 'latest news' title to move across to the right column
    where it belongs. Here's a link to the page: http://www.retroweb.net/dev/8/

    If anyone could help, I'd be extremely grateful.

    Many thanks,
    Matt :)
    Tags: None
    • Richard
      #2
      Re: Help with Firefox in a two-column float layout

      On Sun, 30 Jan 2005 04:45:40 GMT Matt Bostock wrote:
      [color=blue]
      > Hi,[/color]
      [color=blue]
      > I'm a bit of a CSS newbie so please accept my apologies if this post is
      > inappropriate.[/color]
      [color=blue]
      > I can't get the 'latest news' title to move across to the right column
      > where it belongs. Here's a link to the page:
      > http://www.retroweb.net/dev/8/[/color]
      [color=blue]
      > If anyone could help, I'd be extremely grateful.[/color]
      [color=blue]
      > Many thanks,
      > Matt :)[/color]

      Good job on the layout.
      There's a lot more to CSS than just laying out <div> tags instead of <table>
      tags.
      When all else fails, and you can't see the forest through the trees, start
      over.
      Congratulations ! Your page validates so that's not an issue.

      What you need to do now is, layout two divisions side by side.

      <div class="containe r">
      <div id="left" style="width:49 %; border:1px solid black; float:left;>
      This is the body of the text holder for the stuff on the left side.
      Note the spaces in "border" they are important.
      That's just to show you where it is, remove it later.
      <div id="right" style="width:49 %; border:1px solid red; float:left;>
      For the stuff in your right hand side including "latest news".
      </div>
      </div>
      </div>

      In xhtml, you won't use the </div> though. Just for show here.
      The "container" division merely holds everything together in case the window
      is resized, the divisions will remain side by side.

      I've been working on a rather cumbersome photo gallery and tonight I had to
      rewrite it so that everything worked the way I want it to.

      While you're going through the process, www.validator.w3.org will make sure
      everything has it's proper place.



        Comment

        • Beauregard T. Shagnasty
          #3
          Re: Help with Firefox in a two-column float layout

          Richard wrote:
          [color=blue]
          > <div class="containe r">
          > <div id="left" style="width:49 %; border:1px solid black; float:left;>
          > This is the body of the text holder for the stuff on the left side.
          > Note the spaces in "border" they are important.
          > That's just to show you where it is, remove it later.
          > <div id="right" style="width:49 %; border:1px solid red; float:left;>
          > For the stuff in your right hand side including "latest news".
          > </div>
          > </div>
          > </div>
          >
          > In xhtml, you won't use the </div> though. Just for show here.[/color]

          What? If you do NOT use the </div>, your page will not validate, and
          probably fail miserably. How would you expect a browser to guess where
          the divs end?
          [color=blue]
          > The "container" division merely holds everything together in case the window
          > is resized, the divisions will remain side by side.[/color]

          Yes, sorta...
          [color=blue]
          > I've been working on a rather cumbersome photo gallery and tonight I had to
          > rewrite it so that everything worked the way I want it to.[/color]

          Cumbersome? <lol>
          [color=blue]
          > While you're going through the process, www.validator.w3.org will make sure
          > everything has it's proper place.[/color]

          ...which will tell you there were missing </div>'s.

          --
          -bts
          -This space intentionally left blank.

            Comment

            • Unknown User
              #4
              Re: Help with Firefox in a two-column float layout

              On Sun, 30 Jan 2005 04:45:40 GMT, Matt Bostock <matt@mattbosto ck.com>
              wrote:
              [color=blue]
              > latest news[/color]

              Here it looks the same way on Opera, IE, and Mozilla.

              --
              Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
              Discover Opera: http://members.surfeu.fi/jerkku/
              http://www.auriance.com - http://www.auriance.net

                Comment

                • Unknown User
                  #5
                  Re: Help with Firefox in a two-column float layout

                  On Mon, 31 Jan 2005 01:56:24 -0600, Richard <Anonymous@127. 001> wrote:
                  [color=blue]
                  > While you're going through the process, www.validator.w3.org will make
                  > sure
                  > everything has it's proper place.[/color]

                  There is a more simple way to do it. Send your pages as
                  application/xhtml+xml to your browser, and use a standard-compliand
                  browser (Opera, Mozilla, Firefox, etc...). If you forget to close a <p>
                  tag, your page won't display and instead there will be a debug screen to
                  tell you the line and character where the error is. Don't send your page
                  to the W3C Validator all the time :) Just one time when everything is done
                  to make sure :)

                  --
                  Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
                  Discover Opera: http://members.surfeu.fi/jerkku/
                  http://www.auriance.com - http://www.auriance.net

                    Comment

                    • Matt Bostock
                      #6
                      Re: Help with Firefox in a two-column float layout

                      Unknown User wrote:[color=blue]
                      > Here it looks the same way on Opera, IE, and Mozilla.[/color]


                      Thanks for the info. I was designing primarily with Firefox (I then
                      usually check my designs in other browsers, but everything must look
                      right in Firefox and IE for me to be happy).

                      So any ideas on what's causing it?

                      Many thanks,
                      Matt

                        Comment

                        Previous template Next
                        Working...