2 questions - expanding content and display in FF, IE

[konnor5092]

Hello again. I have 2 issues preventing me from making progress with a site. Both hopefully quite basic.

The first is.. how do you get 2 div's (left and right content for example) to expand together? So if there is more content on the left the right also expands and vice versa.



Second query is a display difference in IE and Firefox.

I have a wrapper containing the divs left and right content, so when content is added to left or right, the wrapper expands also.

This is shown correctly when I preview in IE....



However in firefox, the wrapper doesn't expand when the content does.....



Hope you can help!

Thanks

[Lchad]

Your last question is easy for me. If you have a footer div, then add this code to the css:

Code: Select all

clear: both;

If you do not have a footer div below, then you can add a new div below the floated columns. Whenever you have a floated column or floated div, you need to follow it up with the CLEAR, so the following element doesn't wrap around the float.

So if you don't have a footer use this code after the floated columns:
#clear {clear:both}

Two divs (left and right) can't expand the same amount...
One technique to use to fake it is called 'faux columns'. You use a background image behind the columns in the container div for instance.
Google that term and you'll see what I mean!

[Ryan Fait]

Sorry Lchad, I think he means two <div>'s extending to the height of the container they're in. This is not normally possible in CSS. A Google search of Faux Columns will get you the information you need to pseudo-acheive the effect you're after. As for the dynamically adjusting content; this is definitely not possible with CSS. CSS is an exact science, so to speak. It's something where you can control what you want and let the rest follow basic rules. Don't get me wrong, CSS is far more powerful than tables and (X)HTML, but you can't expect the same things from the pair.

[Lchad]

Yeah that's what I meant Ryan, probably didn't explain it correctly.

[konnor5092]

Originally Posted by Lchad

Your last question is easy for me. If you have a footer div, then add this code to the css:

Code: Select all

clear: both;

If you do not have a footer div below, then you can add a new div below the floated columns. Whenever you have a floated column or floated div, you need to follow it up with the CLEAR, so the following element doesn't wrap around the float.

So if you don't have a footer use this code after the floated columns:
#clear {clear:both}

Two divs (left and right) can't expand the same amount...
One technique to use to fake it is called 'faux columns'. You use a background image behind the columns in the container div for instance.
Google that term and you'll see what I mean!

Doesn't seem to help. I have clear: both; in the footer and also tried adding a new div before my left and right content called #clear {clear:both} as suggested.

This is the code I have....

Code: Select all

<div id="wrapper">
            <div id="banner">
            </div>
            <div id="navigation">
                <ul>
                    <li><a href='#'>Home</a></li>
                    <li><a href='#'>Forums</a></li>
                    <li><a href='#'>Mens</a></li>
                    <li><a href='#'>Womans</a></li>
                    <li><a href='#'>Roster</a></li>
                    <li><a href='#'>Contact</a></li>
                </ul>
            </div>
            <div id="leftcontent">
                <div id="welcome">
                    <h3></h3>
                </div>
                <div id="news">
                    <h3></h3>
                        <p class="p1">Littering a dark and dreary road lay the past relics of browser-                                     specific tags, incompatible DOMs, and broken CSS support.
                        </p>
                </div>
            </div>
            <div id="rightcontent">
                <div id="google">
                    <h3></h3>
                        <form action="http://www.google.com/search">
                            <input type=hidden name=hl value=en>
                            <input type=hidden name=ie value="ISO-8859-1">
                            <input maxLength=256 size=22 name=q value="">                    
                            <input type=submit value="Google Search" name=btnG> 
                        </form>
                </div>
                <div id="table">
                    <h3></h3>
                </div>
                <div id="resources">
                    <h3></h3>
                </div>
            </div>    
        </div>
    </div>
    <div id="footer">
        <p class="p1">
            eastcoastlacrosse © 2006  |  Web design by <a href="http://www.mattoconnor.co.uk/">Matt OConnor</a>
        </p>
    </div>

and relevent CSS...

Code: Select all

#wrapper {
  width: 608px; 
  background-color: #525252;
  border: 2px solid #FFFFFF;
  margin: 0 auto;
}

#leftcontent {
  clear: both;
  width: 422px;
  background-color: #A02E2E;
  float: left;
  font-size: 0.8em;
}

#rightcontent {
  clear: both;
  width: 186px;
  background-color: #007597;
  float: right;
}

#footer    {
  clear: both;
  margin: 0 auto;
  background: url(images2/footerpic.jpg);
  background-repeat: no-repeat;
  background-position: left;
  width: 716px;
  height: 60px;
}

[Lchad]

You only need the clear:both in the footer. Delete the others.

[konnor5092]

still not working in firefox!

[Lchad]

Try this it worked for me.

Code: Select all

#wrapper {
  width: 608px; 
  background-color: #525252;
  border: 2px solid #FFFFFF;
  margin: 0 auto;
}

#leftcontent {
  clear: both;
  width: 422px;
  background-color: #A02E2E;
  float: left;
  font-size: 0.8em;
}

#rightcontent {
  width: 186px;
  background-color: #007597;
  float:left;
}

#footer    {
  clear: both;
  margin: 0 auto;
  background: url(images2/footerpic.jpg);
  background-repeat: no-repeat;
  background-position: left;
  width: 716px;
  height: 60px;
}

[konnor5092]

Still no luck unfortunately. I'll just keep removing stuff until I found out where its tripping up.