[SOLVED] the Main Content div of my template breaks when I type a long text

[kee2ka4]

I am having problems with my Main Content, it breaks my template that I have built when I type a long text and
doesn't stay within the main content but breaks into the right Content bar. Also when I type anything in the
Main Content or the Right content I want both the content div to expand to stay in line and that doesn't happen.

Here is the layout of my Html div

HTML: Select all

<div id="wrapper">
    <div id="Content">
        <div id="Logo">Logo Goes here</div>
        <div id="Header">Header goes</div>
    </div>
    <div id="NavigationContent">
        <div id="Navigation">Navigation Goes here</div>
        <div id="SearchBar">Search Goes here</div>
    </div>
    <div id="ContentWrapper">
        <div id="MainContent">Main Content Goes HERE</div>
        <div id="RightContent">Right Content GOes HERE</div>
    </div>
    <div id="Footer">Footer Goes Here</div>
</div>

here is the code for my css for the divs: My main #Wrapper is 900 pixel.

HTML: Select all

body {
    background-color: #FFFFFF;
}
#wrapper {
    width: 900px;
    margin-right: auto;
    margin-left: auto;
}
#Logo {
    background-color: #EEF1ED;
    height: 80px;
    width: 300px;
    float: left;
    margin: 0px;
    padding: 0px;
}
#Header {
    float: right;
    width: 600px;
    height: 80px;
    background-color: #CCCCCC;
    margin: 0px;
    padding: 0px;
}
#Content {
    width: 100%;
    margin: 0px;
    padding: 0px;
}
#NavigationContent {
    width: 100%;
}
#Navigation {
    height: 40px;
    width: 100%;
    background-color: #ECE9D8;
    margin: 0px;
    padding: 0px;
}
#SearchBar {
    background-color: #FFECF5;
    height: 40px;
    width: 100%;
}
#ContentWrapper {
    width: 100%;
    overflow: visible;
}
#MainContent {
    background-color: #F2F9F9;
    width: 600px;
    padding: 20px;
    float: left;
    text-align: justify;
    height: auto;
}
#RightContent {
    float: right;
    width: 220px;
    padding: 20px;
    background-color: #F1EBEE;
}
#Footer {
    background-color: #F7F4F4;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-top: 20px;
    float: left;
    width: 900px;
}

Thanks

[Lchad]

See if adding overflow: hidden;
to the maincontent div helps keep it from breaking.

In order to keep the two columns even no matter what amount of content is placed inside, you will need to use the faux column technique. Here is a tutorial on it.

[kee2ka4]

aah thanks.. yea it works fine.. overflow hidden has done the job. Thank much appreciated.. i will go through the tutorial..

Ket