SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    May 2003
    Location
    nyc
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    tweaking left column

    hello all,

    i am hoping there is a quick fix for this: http://devbistro.com/test.jsp so that i don't need to revisit the whole CSS

    i'd like to make the box in the upper-left to extend all the way to the footer.

    any advice?

    thanks,
    james

  2. #2
    CTO htmlguy's Avatar
    Join Date
    Feb 2005
    Location
    North Carolina
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Two options

    You could use a table with breaks:
    <table width="150px" border="1" cellpadding="1" cellspacing="1"><tr><td>
    Your content
    then put a couple of breaks<br>

    You could do a div

    height: 1000px;

    There is many options but I hope this helps,
    HTMLGuy

  3. #3
    CTO htmlguy's Avatar
    Join Date
    Feb 2005
    Location
    North Carolina
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Did it work?

    So James,
    Did it work or are you still having trouble? I thought of something else which is you make a rowspan for the column and have your content in tds.
    HTMLGuy

  4. #4
    SitePoint Addict
    Join Date
    May 2003
    Location
    nyc
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    htmlguy,

    Thanks for your help.

    since my site is all css i don't want to use teh table approach (listed first(

    height: 1000px; is not what i am looking for as i view it as more of a hack rather than the way things are to be done in CSS

    James

  5. #5
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should move this <?xml version="1.0" encoding="utf-8"?>
    below the DOCTYPE Declaration, it'll throw IE 6 into quirks mode if it appears before the DTD.

    Any charactor before the DTD, other than white space, will put IE 6 into quirks mode.

    Getting the left colum to extend to the footer is more an illusion than anything else.

    It can be done with JavaScript.

    Or you can make it appear to extend to the footer, by moving the text below into another colum/container that sits next to it on the right, since the text in that colum reaches the footer, and has the same background color, you can simply turn on the left border of the right colum, and it will look as if the left colum reaches the footer. You'll have to turn off the border on the left colum though.

    Another way is to position the right colum over the the container div with a different color background, and it's left border turned on.

    Then float the content of the left colum to the left side of the container.

    Then set the containers background to a different color than the right colum, as the right(longest) colum extends the container, the containers background will show in the left colum, creating the illlusion of a 100% high left colum.

    Or you can use a simple 1 row 2 cell table to contain the content, and use CSS to control the content within the cells.

  6. #6
    SitePoint Addict
    Join Date
    May 2003
    Location
    nyc
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DocType

    Thanks a lot for loads of useful info. I'll try to piece it together

  7. #7
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's easier done than said. Lol

    All you'll have is a container, with 1 nested div that forces the container to exspand, every thing else is floated either left or right in the container(depending on which side you want to be longer).

    The longest div can be floated left or right.

    You can make a 3 colum layout the same way, just position the longest div in the center with margins, and float the left and right content before the center colum in the markup.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •