Problem with div heights Please help

[rcrutchley101]

Hi Can anyone help me with this problem. I have one div called page which holds two more divs to create a 2 column layout. On the div container called page I have a background colour and a border for the design of the page however when I put the height of #page to auto you cannot see anything background colour or border until I give it an exact height. The problem is I cannot do this for every page because the height of every page is different and will change in the future when the database is linked.

Please see the page here
http://www.istl.com/css/contactus.html


At the moment I have tried to style the left column but this doesn't seem the correct way to do it also the height of the right column which holds the latest news does not go all the way to the footer.

I would really appreciate any help
Thanks

[Paul O'B]

Hi,

First of all you need to clear the floats (read the faq on floats) because floated content is removed from the flow and #page effectively contains nothing. You need to add a clearing technique to regain control of the page before the closing div of #page so that its background is stretched down.


There are clearing techniques explained in the faq but a quick fix is to add overflow:auto to #page. If you also set the background color of #page to #f9f9f9 and then it will match the left column and make it fill to the bottom of the page.

#page {
    width: 770px;
    height:auto;
    background-color:#f9f9f9;
    margin: auto;
    border-right-width: 2px;
    border-left-width: 2px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #999999;
    border-left-color: #999999;
    overflow:auto
    
}

The drawback of this method is that the left column must always have more content. If the right column has more content than the left then the columns won't equalise and will be uneven.

The best approach is simply to use a background image repeated down the y-axis of #page that contains the right column colour and border (and even the left column colour if you want.)

Here is an example:

http://www.pmob.co.uk/temp/spointfooter.htm

It simply uses this image to give the effect of a full column.

Hope that helps

[rcrutchley101]

Thanks Thats great. I've got one more question do you know the best bay to lay out the contact for I have never done it before just by css always used tables.

Thanks
http://www.istl.com/css/contactus.html

[Paul O'B]

Hi,

The easiest way to lay out forms is to use labels before the inputs and float the labels with a width. Make it wide enough to hold all the different size text that you will need. The inputs will then more or less line up automatically.

Here is a more advanced example.

http://www.pmob.co.uk/temp/sitepointform1.htm

[rcrutchley101]

Hi
Thanks again for your help I have put the names for each field in labels and they are lining up fine but I having trouble lining up the input fields and the bottom radio buttons.

Can you help
I really appreciate your patience I am fairly new to css and never styled the layout of forms before.

Thanks again

[Paul O'B]

Hi,

Here's a start then but I've kept it simple because i would have preferred to use fieldsets and legends but I think it might confuse you at this stage.

<form id="contact-form" method="post" action="">
                    <div>
                    <label>First Name:</label>
                    <input type="text" name="textfield" />
                    <br />
                    <label>Company:</label>
                    <input type="text" name="textfield" />
                    <br />
                    <label>Email:</label>
                    <input type="text" name="textfield" />
                    <br />
                    <label>Telephone:</label>
                    <input type="text" name="textfield" />
                    <br />
                    <label>Comments:</label>
                    <textarea name="textarea" cols="50" rows="5"></textarea>
                    <br />
                    <div class="latest-news">
                    <p><strong>Receive Latest News Via Email:</strong></p>
                    <label>Yes</label>
                    <input name="radio1" type="radio" value="Yes" />
                    <label>No</label>
                    <input name="radio1" type="radio" value="No" />
                    </div>
                    <input class="submit" type="submit" name="Submit" value="Submit" />
                 </div>
                </form>

#contact-form label {
float:left;
font-weight:bold;
padding-right:10px;
position:relative;
text-align:right;
top:5px;
width:6em;
}
#contact-form input {
margin-top:3px;
margin-bottom:3px;
width:10em;
}
.latest-news{margin:10px 0 10px 4em;}
#contact-form .latest-news label{
    float:none;
    top:0;
    padding:0;
    vertical-align:middle
}
#contact-form .latest-news input{
    width:auto;
    vertical-align:middle;
    margin-right:20px
}
.submit{margin-left:3em}
#contact-form textarea{
    width:15em;
    margin:5px 0 10px 10px ;
}

I notice you have said things like 48% width and padding:5px. What does that equal? 100% + 10px = ????

You have no idea what that will equal and whether it will fit in your container. As you have fixed width containers and a fixed width layout then define the widths in pixels and not percentages. If you set to elements at 50% width then its likely that ie will make then 101% due to rounding errors with percentages. Use the exact pixel width you need.

I suggest you go through that left column section and make sure all your widths,margins and padding add up to the available space correctly. I notice that in Ie6 your right column is much wider than it should be so double check everything fits in the space allocated.

[Paul O'B]

The reason that the column has dropped in IE is due to this image.

            <li> <img src="http://www.istl.com/css/images/contact-details.jpg" /></li>

The image is 196px wide but 'sidebar is only 180px wide and therefore it won't fit. You will need to remove some padding form #sidebar so that there is room for this image otherwise IE will stretch the element and break the layout.

I also notice that you have used the keyword thin for borders. This will cause problems because you have some elements that add up exactly to the space available assuming that the borders are at 1px width. However IE interprets the keyword thin as 2 pixels (which it is allowed to do). Therefore don't use keywords in this case and specify them as 1px instead.