SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict Romuba's Avatar
    Join Date
    Jun 2007
    Location
    Cape Town, South Africa
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can a column (div) have a min height?

    I have read many posts that are similar to what I am looking for but have not yet found the answer.

    If I have a two column layout using divs, is there any way I can make a div never shrink less than say 1000px in height, but should the content be more it will expand. I set the height to 1000px and it worked except that I then found it moved up under mu header. I have a height set at 26opx to keep it below the header.

    You can see what I am doing at www.denvor.bartwebsites.com It is the red div that I would like to have at a specific height.
    Ross Bartholomew
    Web Designer/Developer
    BartWebSites
    E-mail: ross@bartwebsites.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    HI,

    I'm not quite sure what problems you are having exactly but to set an element to have a min-height you just set the min-height andthen add a simple hack for ie6.

    Code:
    #content {
        background: #990000;
        padding-top: 10px;
        padding-bottom: 30px;
        margin-top: 270px;
        margin-left: 260px;
        margin-right: 270px;
        min-height:800px;
    }
    * html #content{height:800px}
    Note that the height must only be given to IE and cannot be in the same style block as the min-height because it they will conflict and all you get is a fixed height.

  3. #3
    SitePoint Addict Romuba's Avatar
    Join Date
    Jun 2007
    Location
    Cape Town, South Africa
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    I made the changes as per:

    Code:
    #content {
    	background: #990000;
    	padding-top: 10px;
    	padding-bottom: 30px;
    	margin-top: 270px;
    	margin-left: 260px;
    	margin-right: 270px;
    	min-height: 800px;
    }
    * html #content{height:800px}
    .time {
    	position: absolute;
    	top: 150px;
    	left: 350px;
    }
    It is fine in FireFox but still moves up underneath the header in Explorer. Have I missed something?
    Ross Bartholomew
    Web Designer/Developer
    BartWebSites
    E-mail: ross@bartwebsites.com

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    HI,

    Sorry, I see what you mean now. The problem is a nasty bug in IE with absolute elements and the only solution is to move the html around like thjis.

    Code:
    <body>
    <div id="content">
        <p>The album will feature 12 new songs, and is being produced by Gary Crause under the Legend Music label.</p>
        <p>A release date for this Denvor's  second album is scheduled for November.</p>
        <p>Denvor chose to collaborate with Gary and Deon du Toit from Legend Music Productions, as they bring a wealth of production, arrangement and music marketing experience to the table. Deon, formerly the singer, guitar player and co-producer of no less than 9 Toxic Shame albums, recently produced and co-wrote the latest Skallabrak album to much critical acclaim. Gary has worked with such artists as 1st Project, Toxic Shame, Spoon Feedas, Jo Day, Pyramid Tongue and Lois du Plessis of Afro-Z.</p>
        <p>Some of the most talented artists in the country are working with Denvor on the album. These include Deon du Toit on guitars and Travis Marc on drums. There are also a few surprise guest artists appearing on the disk, for which more information will be made available closer to its release.</p>
        <p>Everyone whom orders Denvor&rsquo;s new album before the and of October will receive the 1st two tracks free as downloads from his MySpace site.</p>
        <p>Thanks for your continued support!</p>
    </div>
    <div id="header"> <img src="http://www.denvor.bartwebsites.com/images/denvor_topleft.gif" alt="Denvor Logo" width="302" height="155" class="signature">
        <p class="p">Making music for the Soul </p>
        <img src="http://www.denvor.bartwebsites.com/images/left_head_pic.jpg" alt="Denvor" width="320" height="202" class="denvor_pic">
        <div id="fade"><img src="http://www.denvor.bartwebsites.com/images/fade.jpg" width="18" height="41"></div>
        <img src="http://www.denvor.bartwebsites.com/images/time.gif" alt="Time" width="96" height="45" class="time"> </div><img src="http://www.denvor.bartwebsites.com/images/denvor_greayscale.jpg" alt="Denvor looking Cool" class="right_pic">
    <div id="rightside">
    The header code must be moved after #content. It won't make any difference o the layout because your header is absolutely placed. IE just doesn't like absolute elements to come before static content in the html within the same stacking context.

  5. #5
    SitePoint Addict Romuba's Avatar
    Join Date
    Jun 2007
    Location
    Cape Town, South Africa
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks you very much Paul, that solved the problem.

    Only think it has wrecked a little is from an accessability perspective the order of things is a little back to front but I don't think it will cause too much confusion.

    Thanks again.
    Ross Bartholomew
    Web Designer/Developer
    BartWebSites
    E-mail: ross@bartwebsites.com

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    I don't think it will harm accessibility much as that header section was all images and didn't convey much information at all. With the revised layout you have content right at the top of the html which is good for accessibility and seo.

    However I do usually prefer to have a logical progression of the page.

    In fact I would probably add an h1 tag as the first line of your content as you seem to have no real heading there anyway. Your header section is just images with no structure and looks mainly like decoration only anyway.

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why is the header absolutely positioned anyway ??

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by centauri
    Why is the header absolutely positioned anyway ??
    Good point

  9. #9
    SitePoint Addict Romuba's Avatar
    Join Date
    Jun 2007
    Location
    Cape Town, South Africa
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used Absolute so that it wouldn't move at all, but good point so I will see what happens if I remove that.

    I must admit that sometimes I find the various options a little confusing, but I am learning. With any language there are various rules that you pick up along the way. Things that wourk under certain circumstances buyt not others.
    Ross Bartholomew
    Web Designer/Developer
    BartWebSites
    E-mail: ross@bartwebsites.com

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Yes most times you would avoid absolute elements because they disrupt the flow unless you use them with care (or if they fit in with what you want).

    If you made the header static then you wouldn't need the big margin top on your content because it would start automatically under the header.

    Usually side columns are done with floats these days to maintan the flow but you can also use absolute columns if the design is suitable. If the columns are absolute then there is no way to put a footer under all columns. If you don't need a footer under all columns then absolute columns can sometimes be more stable than floated columns.

    It all depends on the task in hand and what is going to happen next.

  11. #11
    SitePoint Addict Romuba's Avatar
    Join Date
    Jun 2007
    Location
    Cape Town, South Africa
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah that is much better. It makes thing work much more simply. Thanks for the advice.

    Hopefully I will be able to give some advice sometime, but for now I still have much to learn. Many of the posts on teh forum are just beyond me for now.
    Ross Bartholomew
    Web Designer/Developer
    BartWebSites
    E-mail: ross@bartwebsites.com


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
  •