problem with css layout

Discussion in 'HTML' started by Paul Watt, Jul 13, 2006.

  1. Paul Watt

    Paul Watt Guest

    Hi,
    Well I've run into my first problem with my layout.
    http://www.paulwatt.info/fatgit/

    I'd like the box with "texty" written in it to be directly under the main
    content box. I've tried having the div directly under the content div in the
    source code, but this worked fine under IE, but in FF the "facts" box
    appeared down the page - in-line with "texty" box.

    see http://www.paulwatt.info/fatgit/index2.htm for demo (FF error only)

    Many thanks

    --
    Cheers

    Paul
    le singe est dans l'arbre
    http://www.paulwatt.info
     
    Paul Watt, Jul 13, 2006
    #1
    1. Advertising

  2. Paul Watt

    JDS Guest

    On Thu, 13 Jul 2006 14:23:49 +0100, Paul Watt wrote:

    > Well I've run into my first problem with my layout.
    > http://www.paulwatt.info/fatgit/
    >
    > I'd like the box with "texty" written in it to be directly under the main
    > content box. I've tried having the div directly under the content div in the
    > source code, but this worked fine under IE, but in FF the "facts" box
    > appeared down the page - in-line with "texty" box.


    Put the "texty" div and the "content" div in a "wrapper" div.
    --
    JDS
     
    JDS, Jul 13, 2006
    #2
    1. Advertising

  3. Paul Watt

    Paul Watt Guest

    "JDS" <> wrote in message
    news:p...
    > On Thu, 13 Jul 2006 14:23:49 +0100, Paul Watt wrote:
    >
    >> Well I've run into my first problem with my layout.
    >> http://www.paulwatt.info/fatgit/
    >>
    >> I'd like the box with "texty" written in it to be directly under the main
    >> content box. I've tried having the div directly under the content div in
    >> the
    >> source code, but this worked fine under IE, but in FF the "facts" box
    >> appeared down the page - in-line with "texty" box.

    >
    > Put the "texty" div and the "content" div in a "wrapper" div.
    > --
    > JDS
    >


    Cheers JDS, worked a treat. I was so in the mindset of getting out of the
    whole "nested tables" way of thinking, I couldnt see the wood for the trees.
    --
    Cheers

    Paul
    le singe est dans l'arbre
    http://www.paulwatt.info
     
    Paul Watt, Jul 13, 2006
    #3
  4. Paul Watt wrote:
    > Hi,
    > Well I've run into my first problem with my layout.
    > http://www.paulwatt.info/fatgit/
    >
    > I'd like the box with "texty" written in it to be directly under the main
    > content box. I've tried having the div directly under the content div in the
    > source code, but this worked fine under IE, but in FF the "facts" box
    > appeared down the page - in-line with "texty" box.
    >
    > see http://www.paulwatt.info/fatgit/index2.htm for demo (FF error only)


    One way is to float the 'facts' DIV and not the others, simplified example:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Sample layout</title>


    <style type="text/css">

    HTML, BODY { margin: 0; padding: 0; font-family: sans-serif; }

    #banner,
    #footer { color: #000; background-color: #ccc; border: 1px solid #050;
    margin: 0; padding: 1%; }

    #content { color: #050; background-color: #cfe; border: 1px solid #050; }
    #news { color: #005; background-color: #8c8; border: 1px solid #050; }
    #facts { color: #fff; background-color: #050; border: 1px solid #050; }

    #content,
    #news,
    #facts { margin: 1%; padding: 1%; }

    #content,
    #news { width: 70%; }

    #facts { width: 20%; float: right; }

    #footer { clear: both; }

    </style>
    </head>

    <body>
    <div id="banner">Your top banner</div>
    <div id="facts">Your facts list
    <ul>
    <li>Fact 1</li>
    <li>Fact 2</li>
    <li>Fact 3</li>
    </ul>
    </div>
    <div id="content">Your content</div>
    <div id="news">The DIV you where having trouble with</div>
    <div id="footer">Your bottom footer</div>
    </body>
    </html>

    NOTE: the margins, padding and borders are added to TOTAL width so if
    you want all on your DIVS when added together a 75% and 20% may not have
    enough room to fit side by side. I dropped your left DIVs to 70% and
    defined padding and margins in % so that it will work over a wider range
    of viewports.

    Also noted bad DOCTYPE

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    Remove the XHTML Stuff

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jul 13, 2006
    #4
  5. Paul Watt

    JDS Guest

    On Thu, 13 Jul 2006 14:54:46 +0100, Paul Watt wrote:

    > Cheers JDS, worked a treat. I was so in the mindset of getting out of the
    > whole "nested tables" way of thinking, I couldnt see the wood for the trees.


    Well, nesting DIVs works in this sort of circumstance. Just remember to
    not over use DIVs when a <P> or <H[1-6]> or similar would make more sense!
    I think you know that, though...

    --
    JDS
     
    JDS, Jul 13, 2006
    #5
  6. Paul Watt

    Stan McCann Guest

    "Paul Watt" <> wrote in
    news::

    > Hi,
    > Well I've run into my first problem with my layout.
    > http://www.paulwatt.info/fatgit/
    >
    > I'd like the box with "texty" written in it to be directly under the
    > main content box. I've tried having the div directly under the
    > content div in the source code, but this worked fine under IE, but
    > in FF the "facts" box appeared down the page - in-line with "texty"
    > box.


    Move the "facts" box up directly after the main content.

    I said I didn't like the grey but after you've added some more content,
    the grey looks fine.

    > see http://www.paulwatt.info/fatgit/index2.htm for demo (FF error
    > only)
    >
    > Many thanks
    >




    --
    Stan McCann, "Uncle Pirate" http://stanmccann.us/
    Implementing negative score for googlegroup postings, see
    http://blinkynet.net/comp/uip5.html
    A zest for living must include a willingness to die. - R.A. Heinlein
     
    Stan McCann, Jul 14, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    780
    clintonG
    Dec 24, 2004
  2. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,050
  3. Replies:
    1
    Views:
    642
    John Timney \(MVP\)
    Jun 19, 2006
  4. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,054
    Wÿrm
    Jun 20, 2006
  5. Replies:
    29
    Views:
    915
    Ben C
    Mar 21, 2008
Loading...

Share This Page