2 questions - expanding content and display in FF, IE

konnor5092 · #1 (**permalink**) Feb 25th, 2007, 09:52

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 · #2 (**permalink**) Feb 25th, 2007, 11:45

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 · #3 (**permalink**) Feb 25th, 2007, 12:19

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 · #4 (**permalink**) Feb 25th, 2007, 13:06

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

konnor5092 · #5 (**permalink**) Feb 25th, 2007, 14:20

Quote:

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 · #6 (**permalink**) Feb 25th, 2007, 14:23

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

konnor5092 · #7 (**permalink**) Feb 25th, 2007, 14:26

still not working in firefox!

Lchad · #8 (**permalink**) Feb 25th, 2007, 15:48

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 · #9 (**permalink**) Feb 25th, 2007, 16:33

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How are some websites capable to display javascript content?	gurukhel	JavaScript Forum	3	Nov 9th, 2007 20:19
CSS Links - Display All Content In One Div (Like Frames)	weasel	Web Page Design	1	Oct 27th, 2007 04:19
display alternative content	welshstew	Classic ASP	1	May 10th, 2007 15:35
content area not expanding	Lchad	Web Page Design	19	Jan 29th, 2007 14:45
How to make an element display above a dynamic content?	wood_flower	Web Page Design	4	Aug 3rd, 2005 03:42

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
2 questions - expanding content and display in FF, IE