[SOLVED] multiple columns, text floats out of area... Best solution?

alfandango · #1 Apr 15th, 2008, 18:51

This is probably very simple but I'm trying to figure the best way to achieve having mulitple columns in a box that automatically expand to the allow for the text in the left and right collumns, they are currently overflowing from the content into the footer.

Basically, the "content_left" & "content_right" text are supposed to be in the brown box with the content text. Do I need to use clearing somewhere?

Is using floats the best way for this? If so, what would happen if I wanted to add more columns?

Any help or advice would be greatly appreciated... Here's my HTML:

Code: Select all

<body>

<div id="wrapper">
    <div id="content">
        <p>content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text </p>
        <div id="content_left">
        <p>left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text left text </p>
        </div>
        <div id="content_right">
        <p>right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text right text </p>
        </div>
    </div>
    
    <div id="footer">
        <p>footer text footer text footer text</p>
    </div>
</div>


</body>

...And the CSS:

Code: Select all

* {
    margin: 0; 
    padding: 0; 
}


#wrapper {
    margin:0px auto;
    margin-top:25px;
    width:950px;
    position:relative;
    border:none;
}

#content {
    background-color:#663300;
}

#content_left {
    color:red;
    width:45%;
    float:left;
}

#content_right {
    color:blue;
    width:45%;
    float:right;
}

#footer {
    background-color:yellow;
}

dab42pat · #2 Apr 15th, 2008, 19:15

If you add overflow:auto; to your #content in your css

That should allow your brown box to expand as you add your text.

Cheers

Pat

alfandango · #3 Apr 15th, 2008, 19:18

Pat, you are a true genious!

alfandango · #4 Apr 16th, 2008, 16:45

Whoops, I just realised that it works fine until tested on evil ie6. Any suggestions how to get around it?

dab42pat · #5 Apr 16th, 2008, 17:36

Try adding height:1% in your #content.

There is a name for this fix but I cant remember the name.

Pat

Aso · #6 Apr 16th, 2008, 18:21

^were you thinking of hasLayout?

dab42pat · #7 Apr 16th, 2008, 18:33

Thank you Aso.

alfandango · #8 Apr 17th, 2008, 12:00

Fantastic! It worked perfectly.

I owe you one

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Displaying multiple columns in a combo box	1840dsgn	Web Page Design	1	Jan 7th, 2008 04:56
text area	geyids	Flash & Multimedia Forum	4	May 31st, 2007 12:25
Updating web content from text file...or other solution?	dank	Web Page Design	4	Mar 16th, 2006 23:25
2 columns of text either side of Flash	timmytots	Web Page Design	11	Nov 29th, 2005 01:18
Two columns of text next to images	csa	Web Page Design	6	Nov 27th, 2005 17:21

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] multiple columns, text floats out of area... Best solution?