Problems with CSS 3-column layout

**naiani** · 08-13-2007, 06:52 PM

Hello everyone.

I have 2 questions about a header + 3 columns + footer layout, based on the one from this website: http://css.maxdesign.com.au/floatuto...torial0916.htm. First, codes; then, questions.

CSS:

Code:

#container {
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    color: #000;
    border: 1px dotted #ff0000;
    line-height: 130%;
}

#title {
    height: 152px;
    background-image: url(titlebg_alt.jpg);
    background-repeat: repeat-y;
    background-color: #bab3d4;
    background-position: left;
    border-bottom: 2px solid #fff;
}

#title img#logo {
    general formatting code
}

#title img#cglg {
    general formatting code
}

#title img#cto {
    general formatting code
}

#menu {
    background-image: url(menubg_gold.jpg);
    background-repeat: repeat-x;
    background-position: top;
    float: left;
    width: 165px;
    margin: 0;
    padding: 0;
    border-top: 10px solid #ba960e;
    border-right: 2px solid #ba960e;
    clear: left;
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu a {
    font: bold 0.8em Verdana, Arial, sans-serif;
    color: #000066;
    text-decoration: none;
    text-align: right;
    padding: 3px 5px 4px 0;
    border-bottom: #000066 solid 1px;
    height: 2.5em;
    display: block;
}

#menu a:active {
    color: #fff;
    background-color: #ba960e;
    border-right: thick solid #000066;
}

#menu ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
}

#menu ul ul li {
    margin-bottom: -1px;
}

#menu ul ul li a {
    border: 1px solid #ba960e;
    color: #fff;
    padding-bottom: 5px;
    height: 2.3em;
}

#menu li {
    position: relative;
}

div#menu ul ul {
    display: none;
    background-color: #000066;
}

div#menu ul li:hover ul {
    display: block;
}

div#menu ul li:hover > a {
    color: #fff;
    background-color: #ba960e;
    border-right: thick solid #000066;
    padding-right: 2px;
}

#news {
    font: 0.8em Verdana, Arial, sans-serif;
    line-height: 130%;
    float: right;
    width: 230px;
    margin: 0;
    padding: 1em;
    border-top: 10px solid #ba960e;
    border-left: 2px dotted #ba960e;
}

#news ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#content {
    font: 0.9em Verdana, Arial, sans-serif;
    text-align: justify;
    margin-left: 165px;
    padding-left: 1em;
    margin-right: 230px;
    padding-right: 1em;
    border-top: 10px solid #ba960e;
    max-width: 45em;
}

#content img {
    vertical-align: top;
    float: right;
    heigth: 226px;
    width: 188px;
    top: 0px;
    right: 0px;
    padding-left: 10px;
}

#footer {
    font: 0.75em Verdana, Arial, sans-serif;
    clear: both;
    margin: 0;
    padding: 0.5em;
    border-top: 2px solid #ba960e;
}

hr {
    display: none;
}

HTML:

HTML Code:

<body>
    <div id="container">
        <div id="title">
                <img src="bluelogo_sml.jpg" id="logo" alt="CGLG" />
                <img src="title.png" alt="The Council of Great Lakes Governors" id="cglg" /><br />
                <img src="subtitle.png" alt="Canadian Trade Office" name="cto" id="cto" />
        </div>
        <hr id="divider" />
        <div id="menu">
            <ul>
                <li><a href="index.html" target="_parent">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">State Partners</a>
                    <ul>
                        <li><a href="#">Pennsylvania</a></li>
                        <li><a href="#">Wisconsin</a></li>
                    </ul>        
                </li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Export Documents</a>
                    <ul>
                        <li><a href="#">Canadian Customs Invoice</a></li>
                        <li><a href="#">NAFTA Certificate of Origin</a></li>
                        <li><a href="#">Harmonized Tariff Codes</a></li>
                        <li><a href="#">Cargo Control Document</a></li>
                        <li><a href="#">Bill of Lading</a></li>
                        <li><a href="#">Taxes</a></li>
                        <li><a href="#">Consumer Packaging and Labeling</a></li>
                        <li><a href="#">Role of a Customs Broker</a></li>
                    </ul>
                </li>
                <li><a href="#">Visiting Canada</a>
                    <ul>
                        <li><a href="#">Visa and Immigration</a></li>
                        <li><a href="#">Business Culture</a></li>
                        <li><a href="#">FAQs</a></li>
                    </ul>
                </li>
                <li><a href="#">Business Opportunities</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
            <div id="imgslide">
                <script type="text/javascript" src="imgslide.js"></script>
            </div>
        </div>
        <hr id="divider" />
        <div id="content">
            <p><img id="imgfront" src="imgfront.jpg" />The Canadian Trade Office of the Council of Great Lake Governors provides SMEs in our partner states of <a href="#">Pennsylvania</a> and <a href="#">Wisconsin</a>, with an invaluable resource in the Canadian market. Our professional staff can assist companies to research, identify and capitalize on market opportunities in a broad range of industry sectors across Canada.</p>
        <hr id="divider" />
        <div id="news">
            <div id="updates">
                <h3>Updates</h3>
                <ul>
                    <li><strong>August 09, 2007</strong> - Mandatory nutritional labelling implementation period coming to an end. <a href="#" onclick="return overlay(this, 'subcontent', 'bottom')">More >></a></li>
                    <li><strong>January 23, 2007</strong> - New American law concerning the need of passport when entering the U.S. by air. <a href="#" onclick="return overlay(this, 'subcontent', 'bottom')">More >></a></li>
                </ul>
            </div>
            <div id="subcontent">
                <script type="text/javascript">
                    showPage('ddbox1.html', 'subcontent')
                </script>
            </div>
            <br />
            <hr />
            <div id="cadusnews"><h3>Canada/U.S. News:</h3>
                <script type="text/javascript">
                    var newsfeed=new gfeedfetcher("rssnews", "rssnewsclass", "_new")
                    newsfeed.addFeed("CBC", "http://rss.cbc.ca/lineup/money.xml")
                    newsfeed.addFeed("Globe&Mail", "http://www.theglobeandmail.com/generated/rss/BN/Business.xml")
                    newsfeed.addFeed("CNN", "http://rss.cnn.com/rss/money_latest.rss")
                    newsfeed.addFeed("MSNBC", "http://rss.msnbc.msn.com/id/3174182/device/rss/rss.xml")
                    newsfeed.displayoptions("datetime label")
                    newsfeed.setentrycontainer("li")
                    newsfeed.filterfeed(6, "datetime")
                    newsfeed.init()
                </script>
            </div>
        </div>
        <hr id="divider" />
        <div id="footer">
            <span><a href="index.html" target="_self">Home</a> | <a href="#">About Us</a> | <a href="#">State Partners</a> | <a href="#">Services</a> | <a href="#">Export Documents</a><br />
            <a href="#">Visiting Canada</a> | <a href="#">Business Opportunities</a> | <a href="#">Links</a> | <a href="#">Contact Us</a></span>
            <br />
            <span>All Rights Reserved. 2007. Developed by <a href="#" id="webdev">Naiani Rosa de Barros</a></span>
        </div>
    </div>
</body>

I've posted only the <body> content, because it's the only relevant part. The <head> section just calls the external CSS file (the one I posted) and a few JavaScripts that have nothing to do with the design. The code doesn't work either on FF or IE7.

Problem #1: the #menu column is not following the height of the #container div. I know about the issues concerning the rendering of the height attribute, but was wondering why it doesn't work in this case, since the code from the tutorial works perfectly.

Problem #2: the right column, #news, doesn't stick to the bottom of the #header. It's like there's a clear: right defined for the #content column, or a clear: left for the #news one. But there are none of them.

I've tried to fix them by so many ways, I don't know what to do anymore, and I have no idea about why are these things happening, so, any help is more than welcome.

Thanks everyone, and forgive me if my English is not very clear.

**boogyman** · 08-13-2007, 07:57 PM

1) you forget to end the "content" div tag
2) in order for the 3 columns to have the same start height, you need to put the news div on top of the content, so the content is right above the footer tag.

Code:

container
  title
  menu
  news
  content
  footer

3) use the css styles below and add back in the rest of your styles. I deleted all that didnt have to do with layout.

Code:

<style type="text/css">
<!--
#container {
	width: 90&#37;;
	margin: 0 auto;
}

div#menu {
	float: left;
	width: 165px;
	margin: 0;
}

div#news {
	float: right;
	width: 230px;
	margin: 0;
}

div#content {
	margin-left: 175px;
	margin-right: 240px;
	padding: 0 1em;
	text-align: left;
}

#footer {
	clear: both;
	margin: 0;
	padding: 0.5em;
}
hr {display:none;}
// -->
</style>

**naiani** · 08-13-2007, 08:34 PM

I didn't forget to close the tag, it's on my original code. The problem was that I had to remove most of the text from the original piece in order to make it fit the forum's char limit, and I ended up erasing the </div> too.. x)
I put the #news code above the #content, and it worked perfectly. I had no idea that something like this could change the results. I guess HTML is trickier than I expected.. lol

Thanks A LOT, boogyman!

====

Now I'll keep fighting the problem with the #menu and its stubborn height.

**boogyman** · 08-13-2007, 08:54 PM

you can accomplish it through the faux columns technique

that technique uses a background image, but if you wish to have just a solid color what you can do is create a 1px x 1px image of the color you want and use that.

**naiani** · 08-13-2007, 09:18 PM

Yeah, I saw this technique, but I'm not sure whether it fits my needs or not.
See, the #menu already has a background image, which is a vertical gradient. Is it possible to use vertical gradient as background for one of the columns using the faux columns cheat?

Another thing I just found: in the example used for the tutorial I talked about on my first post, the heights follow the tallest column. But I'm not sure if it's because I changed the text directly in the file, and for my website the content is changed using Ajax (http://www.dynamicdrive.com/dynamici...axcontent.htm), therefore the page might not "be prepared" for that new height once it uses the first load's heights to determine everything.

**naiani** · 08-14-2007, 01:35 PM

Now I'm having another problem. As I said before, the content on my website changes using Ajax to open an external HTML file in a DIV. When I load the Home page, everything is ok. But when I try to go to any other page, the #news column changes the width of the page and squeezes the #content DIV, making it sit under the #news. The code is the same as above, I just changed the order of the divs #content and #news and now it's #news and #content.
Can anyone help me?

Thanks!

**boogyman** · 08-14-2007, 02:45 PM

Originally Posted by naiani

Yeah, I saw this technique, but I'm not sure whether it fits my needs or not.
See, the #menu already has a background image, which is a vertical gradient. Is it possible to use vertical gradient as background for one of the columns using the faux columns cheat?

If it already has a vertical gradient that that is fine, just set it to repeat across the y axis

Code:

 background-repeat: repeat-y;

also, if you could post the site url, I could follow through with all of your troubles.

Originally Posted by naiani

Another thing I just found: in the example used for the tutorial I talked about on my first post, the heights follow the tallest column. But I'm not sure if it's because I changed the text directly in the file, and for my website the content is changed using Ajax http://www.dynamicdrive.com/dynamici...jaxcontent.htm, therefore the page might not "be prepared" for that new height once it uses the first load's heights to determine everything.

unless you have the height set specifically and some type of formatting to hide the extra content, the page will automatically resize the height of the tag according to the content within. however it is important to note, that it will only affect that column individually. the height of the other columns will also conform to the size of the content. There is an article about how to make the columns appear to be the same height and use just a regular background color, however the script does not have support for resized elements via AJAX, which sounds like is your problem exactly. in any case the site is http://www.paulbellows.com/getsmart/balance_columns/

Originally Posted by naiani

Now I'm having another problem. As I said before, the content on my website changes using Ajax to open an external HTML file in a DIV. When I load the Home page, everything is ok. But when I try to go to any other page, the #news column changes the width of the page and squeezes the #content DIV, making it sit under the #news. The code is the same as above, I just changed the order of the divs #content and #news and now it's #news and #content.
Can anyone help me?

Thanks!

are you changing the news content? if you are check the width of the elements you are changing too. if you are changing the content, well then sounds it sounds like you have your offsets set incorrectly. A div being positioned under another is the result of there being an "overlap". If you have Firefox, you can check this by downloading the "Web Developer's Extension" and outline block level elements.

However you could have it set perfectly in Firefox, and do a check in IE and have the problem still be there... this is caused by IE's rendering engine known better as the Box Model Hack. Whenever I do a liquid layout like you are doing, I always give myself a 2-3% gutter between the elements and that usually solves my problem in IE.

**naiani** · 08-14-2007, 03:28 PM

Originally Posted by boogyman

If it already has a vertical gradient that that is fine, just set it to repeat across the y axis

Code:

 background-repeat: repeat-y;

also, if you could post the site url, I could follow through with all of your troubles.

The website wasn't online yet, that's why... ehehe But I just managed to upload it, and the address is http://www.cglg-canada.com/testnew/index_imp.html.

Originally Posted by boogyman

are you changing the news content? if you are check the width of the elements you are changing too. if you are changing the content, well then sounds it sounds like you have your offsets set incorrectly. A div being positioned under another is the result of there being an "overlap". If you have Firefox, you can check this by downloading the "Web Developer's Extension" and outline block level elements.

However you could have it set perfectly in Firefox, and do a check in IE and have the problem still be there... this is caused by IE's rendering engine known better as the Box Model Hack. Whenever I do a liquid layout like you are doing, I always give myself a 2-3% gutter between the elements and that usually solves my problem in IE.

Everything looks exactly the same in both FF and IE7 so far. It's probably a miracle... ehhehe
The #content column is being overlapped, but it shouldn't be, because the width for the #container is set (80%) and for the content as well (45em). But when I change the content of the #content, the #news column moves a little bit left, overlapping the #content. And I also tested making the #content narrower, but it still goes down.

PS.: Please don't consider the problem with the drop-down menu items, I just need to fix a few parameters that I forgot to include when I re-did the style sheet.

**boogyman** · 08-14-2007, 04:04 PM

thats good that you are testing it in Firefox as well as IE7, however not everyone uses those 2 browsers. Consider someone that hasn't upgraded to IE6 or someone that is on a Mac, and possibly uses Safari. those are just 2 examples. At the least you should test for a different version of IE, I test 2 versions back, and I force anyone with an older browser than 2 versions to either upgrade or warn them the site may not function properly do to new technology.

now onto your problem, as I said in my last reply, it sounds like your margins are set incorrectly. the container tag really doesnt have that much to do here, because if it was being broken then the width of the entire center content would be different from the header / footer. The issue is the center content and the margins / width settings. the idea on the fluid 3 column layout is to have the center (main) content be fluid and have the left / right columns more restricted. It is possible to do everything in percentages, and while that would be the ultimate fluid layout, it seems you have chosen to set the menu and news to an absolute pixel width. The problem is the width of the center. if I am reading your post correctly you have set it to an absolute width of 45em.
that right there gets rid of ALL the fluidity that you are attempting to accomplish. What you might want to do is set the maximum width property to a value of 45em

Code:

#content {
  max-width: 45em;
  -your styles-
}

which will work in any standards compliant browser, but IE unfortunately doesnt support the max-width css property.

check the margins of the center content tag, and do NOT make them be the exact width of the menu / news columns respectfully. Make the margins wider so you have that buffer zone.

**naiani** · 08-14-2007, 05:46 PM

I fixed the margins/width issue, but the problem persists.. I even used extreme values, as you can notice on the new CSS for the website, but it keeps going down...
Ah, almost forgot: about the tests, I just found an online tool that render the website in older versions of IE. The address is http://ipinfo.info/netrenderer/index.php.
At least from what they show there, my website is ok. =)

Thread: Problems with CSS 3-column layout

Thread Tools

Search Thread

Problems with CSS 3-column layout

Bookmarks

Bookmarks

Posting Permissions