Newbie CSS layout question

Discussion in 'HTML' started by Jason, Oct 28, 2004.

  1. Jason

    Jason Guest

    Hi

    I'm making a design that will be applied to hundreds of pages, so
    trying to use CSS with DIVS and no tables to control the layout.

    In my example, the left DIV section (the title and text) is floated to
    the left. Is there any way to make it stretch to the bottom of the
    main DIV without fixing the height? I'd like to lose the white space
    below.

    http://www.bluetattoo.co.uk/csstest/test.htm

    Any advice appreciated!

    Thanks, Jason
    Jason, Oct 28, 2004
    #1
    1. Advertising

  2. Jason

    brucie Guest

    In alt.html Jason said:

    > In my example,


    YAY! someone actually supplied a URL for a change. you get a gold star
    to attach to your forehead.

    > the left DIV section (the title and text) is floated to
    > the left. Is there any way to make it stretch to the bottom of the
    > main DIV without fixing the height? I'd like to lose the white space
    > below.
    > http://www.bluetattoo.co.uk/csstest/test.htm


    http://nemesis1.f2o.org/articles


    --

    v o i c e s o f t h e l i t t l e
    brucie, Oct 28, 2004
    #2
    1. Advertising

  3. Jason

    brucie Guest

    brucie, Oct 28, 2004
    #3
  4. Jason

    brucie Guest

  5. Jason

    brucie Guest

    In alt.html brucie said:

    >> http://nemesis1.f2o.org/articles


    > better link:
    > http://www.maxdesign.com.au/presentation/page_layouts/index.cfm


    what the hell, heres the whole shebang

    css tutorials and other fun 'n giggly css stuff:
    http://www.css.nu/
    http://www.mako4css.com/
    http://www.richinstyle.com/
    http://www.blazonry.com/css/
    http://www.w3schools.com/css/
    http://www.websitetips.com/css/
    http://www.htmlhelp.com/reference/css/
    http://www.mezzoblue.com/css/cribsheet/
    http://www.pageresource.com/dhtml/indexcss.htm
    http://www.webpageworkshop.co.uk/main/css_index
    http://old.climbtothestars.org/coding/cssbasic/
    http://www.htmlcenter.com/tutorials/index.cfm/css/
    http://www.freewebmastertips.com/php/content.php3?aid=48
    http://www.canit.se/~griffon/web/writing_stylesheets.html
    http://www.utoronto.ca/ian/books/xhtml2/exerpt/css-4a.html
    http://www.greytower.net/en/archive/articles/tsutsumi.html
    http://www.intranetjournal.com/articles/200101/csstutorial1a.html
    http://webmonkey.com/authoring/stylesheets/tutorials/tutorial1.html

    layout examples:
    http://www.glish.com/css/
    http://www.csszengarden.com/
    http://www.bookofstyles.org/
    http://tantek.com/CSS/Examples/
    http://www.saila.com/usage/layouts/
    http://www.bluerobot.com/web/layouts/
    http://www.benmeadowcroft.com/webdev/
    http://nemesis1.f2o.org/templates.php
    http://www.xs4all.nl/~apple77/columns/
    http://www.meyerweb.com/eric/css/edge/
    http://www.htmler.org/tutorials/3/1.html
    http://css.nu/articles/floating-boxes.html
    http://webhost.bridgew.edu/etribou/layouts/
    http://www.roguelibrarian.com/lj/index.html
    http://css-discuss.incutio.com/?page=CssLayouts
    http://ecoculture.com/styleguide/r/rollovers.html
    http://thenoodleincident.com/tutorials/box_lesson/index.html
    http://www.maxdesign.com.au/presentation/page_layouts/index.cfm
    http://www.webreference.com/authoring/style/sheets/layout/advanced/

    some sites using css layouts:
    http://www.inc.com/
    http://www.wired.com/
    http://www.opera.com/
    http://www.kitty5.com/
    http://www.cinnamon.nl/
    http://msn.espn.go.com/
    http://www.virtuelvis.com/
    http://www.emptybottle.org/
    http://www.fastcompany.com/
    http://www.littleyellowdifferent.com/
    http://www.pga.com/pgachampionship/2004/

    rounded corners:
    http://www.albin.net/CSS/roundedCorners/
    http://www.alistapart.com/articles/customcorners/
    http://www.guyfisher.com/builder/workshop/css/corners/

    slants: http://www.infimum.dk/HTML/slantinfo.html
    lists: http://www.alistapart.com/articles/taminglists/
    pure css menus: http://www.meyerweb.com/eric/css/edge/menus/demo.html
    Fast rollovers: http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

    centering thingys
    http://dorward.me.uk/www/centre/
    http://www.w3.org/Style/Examples/007/center.html
    http://www.student.oulu.fi/~laurirai/www/css/middle/
    http://hicksdesign.co.uk/articles/css/vertical_centering_with_css/

    master compatibility charts:
    http://centricle.com/ref/css/filters/
    http://www.blooberry.com/indexdot/css/index.html
    http://macedition.com/cb/resources/abridgedcsssupport.html
    old:
    http://www.immix.net/html/CSSGuide.htm
    http://devedge.netscape.com/library/xref/2003/css-support/

    hiding CSS from crappy browsers:
    http://diveintomark.org/safari/csshacks/
    http://www.ericmeyeroncss.com/bonus/trick-hide.html
    http://www.w3development.de/css/hide_css_from_browsers/

    deadtree quick refs: http://visibone.com/html/

    css checkers:
    http://jigsaw.w3.org/css-validator/
    http://www.htmlhelp.com/tools/csscheck/
    http://examples.tobyinkster.co.uk/checkers

    cascading style sheets, level 2 specification
    http://www.w3.org/TR/REC-CSS2/
    cascading style sheets, level 2 revision 1 Candidate Recommendation
    http://www.w3.org/TR/CSS21/

    --

    v o i c e s o f t h e l i t t l e
    brucie, Oct 28, 2004
    #5
  6. Jason

    Jason Guest

    Thanks Brucie - that's really helpful.

    I'm now using a background image with the main DIV and everything
    works fine in IE. Firefox doesn't like it though - the content spills
    over the edge of my DIV tag.

    Example: http://www.bluetattoo.co.uk/csstest/test.htm

    Now I'm totally confused... any suggestions welcomed!

    Thanks,
    Jason



    On Thu, 28 Oct 2004 21:28:34 +1000, brucie <>
    wrote:

    >In alt.html brucie said:
    >
    >>> http://nemesis1.f2o.org/articles

    >
    >> better link:
    >> http://www.maxdesign.com.au/presentation/page_layouts/index.cfm

    >
    >what the hell, heres the whole shebang
    >
    >css tutorials and other fun 'n giggly css stuff:
    >http://www.css.nu/
    >http://www.mako4css.com/
    >http://www.richinstyle.com/
    >http://www.blazonry.com/css/
    >http://www.w3schools.com/css/
    >http://www.websitetips.com/css/
    >http://www.htmlhelp.com/reference/css/
    >http://www.mezzoblue.com/css/cribsheet/
    >http://www.pageresource.com/dhtml/indexcss.htm
    >http://www.webpageworkshop.co.uk/main/css_index
    >http://old.climbtothestars.org/coding/cssbasic/
    >http://www.htmlcenter.com/tutorials/index.cfm/css/
    >http://www.freewebmastertips.com/php/content.php3?aid=48
    >http://www.canit.se/~griffon/web/writing_stylesheets.html
    >http://www.utoronto.ca/ian/books/xhtml2/exerpt/css-4a.html
    >http://www.greytower.net/en/archive/articles/tsutsumi.html
    >http://www.intranetjournal.com/articles/200101/csstutorial1a.html
    >http://webmonkey.com/authoring/stylesheets/tutorials/tutorial1.html
    >
    >layout examples:
    >http://www.glish.com/css/
    >http://www.csszengarden.com/
    >http://www.bookofstyles.org/
    >http://tantek.com/CSS/Examples/
    >http://www.saila.com/usage/layouts/
    >http://www.bluerobot.com/web/layouts/
    >http://www.benmeadowcroft.com/webdev/
    >http://nemesis1.f2o.org/templates.php
    >http://www.xs4all.nl/~apple77/columns/
    >http://www.meyerweb.com/eric/css/edge/
    >http://www.htmler.org/tutorials/3/1.html
    >http://css.nu/articles/floating-boxes.html
    >http://webhost.bridgew.edu/etribou/layouts/
    >http://www.roguelibrarian.com/lj/index.html
    >http://css-discuss.incutio.com/?page=CssLayouts
    >http://ecoculture.com/styleguide/r/rollovers.html
    >http://thenoodleincident.com/tutorials/box_lesson/index.html
    >http://www.maxdesign.com.au/presentation/page_layouts/index.cfm
    >http://www.webreference.com/authoring/style/sheets/layout/advanced/
    >
    >some sites using css layouts:
    >http://www.inc.com/
    >http://www.wired.com/
    >http://www.opera.com/
    >http://www.kitty5.com/
    >http://www.cinnamon.nl/
    >http://msn.espn.go.com/
    >http://www.virtuelvis.com/
    >http://www.emptybottle.org/
    >http://www.fastcompany.com/
    >http://www.littleyellowdifferent.com/
    >http://www.pga.com/pgachampionship/2004/
    >
    >rounded corners:
    >http://www.albin.net/CSS/roundedCorners/
    >http://www.alistapart.com/articles/customcorners/
    >http://www.guyfisher.com/builder/workshop/css/corners/
    >
    >slants: http://www.infimum.dk/HTML/slantinfo.html
    >lists: http://www.alistapart.com/articles/taminglists/
    >pure css menus: http://www.meyerweb.com/eric/css/edge/menus/demo.html
    >Fast rollovers: http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
    >
    >centering thingys
    >http://dorward.me.uk/www/centre/
    >http://www.w3.org/Style/Examples/007/center.html
    >http://www.student.oulu.fi/~laurirai/www/css/middle/
    >http://hicksdesign.co.uk/articles/css/vertical_centering_with_css/
    >
    >master compatibility charts:
    >http://centricle.com/ref/css/filters/
    >http://www.blooberry.com/indexdot/css/index.html
    >http://macedition.com/cb/resources/abridgedcsssupport.html
    >old:
    >http://www.immix.net/html/CSSGuide.htm
    >http://devedge.netscape.com/library/xref/2003/css-support/
    >
    >hiding CSS from crappy browsers:
    >http://diveintomark.org/safari/csshacks/
    >http://www.ericmeyeroncss.com/bonus/trick-hide.html
    >http://www.w3development.de/css/hide_css_from_browsers/
    >
    >deadtree quick refs: http://visibone.com/html/
    >
    >css checkers:
    >http://jigsaw.w3.org/css-validator/
    >http://www.htmlhelp.com/tools/csscheck/
    >http://examples.tobyinkster.co.uk/checkers
    >
    >cascading style sheets, level 2 specification
    >http://www.w3.org/TR/REC-CSS2/
    >cascading style sheets, level 2 revision 1 Candidate Recommendation
    >http://www.w3.org/TR/CSS21/
    Jason, Oct 28, 2004
    #6
  7. Jason

    brucie Guest

    In alt.html Jason said:

    > Thanks Brucie - that's really helpful.


    goody but please don't toppost, it upsets the little voices.

    How am I supposed to post my replies in a newsgroup?:
    http://allmyfaqs.com/faq.pl?How_to_post

    > I'm now using a background image with the main DIV and everything
    > works fine in IE. Firefox doesn't like it though - the content spills
    > over the edge of my DIV tag.
    > Example: http://www.bluetattoo.co.uk/csstest/test.htm


    http://moreshit.usenetshit.info/image-right-with-full-height-border-thingy.shit

    --

    v o i c e s o f t h e l i t t l e
    brucie, Oct 28, 2004
    #7
    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:
    714
    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,006
  3. Replies:
    1
    Views:
    572
    John Timney \(MVP\)
    Jun 19, 2006
  4. Habib

    Css-Layout vs Table-Layout

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

Share This Page