Divs not staying next to each other

Question

I am having trouble setting up containers for a website I am making. I have defined the width of a sidebar container, but when I put text in it to test, it pushes down the body instead of sitting next to it..

My code is as follows

<div id="sidebar">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis urna at tristique tincidunt. Etiam ut cursus elit. Donec hendrerit turpis urna, ac pretium enim tincidunt nec. Donec ut mauris convallis odio vehicula dapibus ut id ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus a eleifend magna. Suspendisse potenti. Morbi ac ante vel sapien bibendum lacinia eu et nulla. Nunc aliquam nunc quis sem sollicitudin ultricies. Sed ultricies ornare nisi accumsan pharetra. Suspendisse elit arcu, sagittis vel bibendum eget, sollicitudin vel ipsum. Nam feugiat dolor tellus, sit amet adipiscing dui imperdiet at. Morbi facilisis non orci sit amet placerat. Nunc arcu elit, tincidunt vel est sit amet, fringilla porttitor leo. Nunc pharetra tellus vitae convallis elementum.<br>
        Quisque tristique nunc semper feugiat lacinia. Cras eu nunc commodo, auctor augue sed, pellentesque nisi. Duis ut sapien non metus venenatis porta vitae ac turpis. Suspendisse et fringilla magna. Quisque tempus tortor metus, quis eleifend elit interdum mollis. Nullam porta tincidunt magna sed ullamcorper. In luctus purus at fermentum posuere. Donec pellentesque lectus lorem, at tempus turpis iaculis ac. Sed in eros vitae augue adipiscing vehicula. Vivamus arcu odio, cursus nec magna rhoncus, eleifend ornare sem.<br></p>
</div>
<div class="container">
        <p class="body">
            Everything Blinds is a ‘come-to-you’ blinds service operating on-site, so you don’t have to worry about the inconvenience of having your blinds taken away. As professional blind specialists, we have years of experience - we know how to fix and clean all makes and models, and our in-depth knowledge of blinds can help you choose the right new blind for your home. <br>
            We aim for quality customer service by providing:
        </p>
        <ul>
            <li>Free quotes for cleaning, repairing and installing old and new blinds</li>
            <li>Most jobs can be easily quoted over the phone</li>
            <li>Premium quality blinds at competitive prices</li>
            <li>Onsite, on-the-day cleaning and repairing</li>
            <li>Wide variety of Australian-made blinds</li>
            <li>Reliable and friendly service</li>              
        </ul>           
</div>

#sidebar {width: 20%;margin-left: 10%;}
.container {width: 60%; margin-left: 30%; margin-right: 10%;}

You can see it in action at www.dweeman.com/eb/sitetemplate.html

I used a predone template for the navigation menu which had a few CSS elements, but I can't spot anything that would be interfering.

Any ideas what I am missing? I know the website looks terrible and has problems but it's still in early development.

Thanks

Answer 1

You should use floats. try adding this to your sidebar and container..

#sidebar: {
float:left;
width: "";
height:auto;
}

and

#container {
float:left;
width:"";
}

Just make sure to fill the width with real values =)

Also make sure you are FTPing correctly. I don't see any floats on your page still =P

Answer 2

Update your HTML and CSS as mentioned below :

HTML :

<div style="float: left">
        <div id="sidebar">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis urna at tristique tincidunt. Etiam ut cursus elit. Donec hendrerit turpis urna, ac pretium enim tincidunt nec. Donec ut mauris convallis odio vehicula dapibus ut id ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus a eleifend magna. Suspendisse potenti. Morbi ac ante vel sapien bibendum lacinia eu et nulla. Nunc aliquam nunc quis sem sollicitudin ultricies. Sed ultricies ornare nisi accumsan pharetra. Suspendisse elit arcu, sagittis vel bibendum eget, sollicitudin vel ipsum. Nam feugiat dolor tellus, sit amet adipiscing dui imperdiet at. Morbi facilisis non orci sit amet placerat. Nunc arcu elit, tincidunt vel est sit amet, fringilla porttitor leo. Nunc pharetra tellus vitae convallis elementum.<br>
                Quisque tristique nunc semper feugiat lacinia. Cras eu nunc commodo, auctor augue sed, pellentesque nisi. Duis ut sapien non metus venenatis porta vitae ac turpis. Suspendisse et fringilla magna. Quisque tempus tortor metus, quis eleifend elit interdum mollis. Nullam porta tincidunt magna sed ullamcorper. In luctus purus at fermentum posuere. Donec pellentesque lectus lorem, at tempus turpis iaculis ac. Sed in eros vitae augue adipiscing vehicula. Vivamus arcu odio, cursus nec magna rhoncus, eleifend ornare sem.<br>
            </p>
        </div>
        <div class="container">
            <p class="body">
                Everything Blinds is a ‘come-to-you’ blinds service operating on-site, so you don’t have to worry about the inconvenience of having your blinds taken away. As professional blind specialists, we have years of experience - we know how to fix and clean all makes and models, and our in-depth knowledge of blinds can help you choose the right new blind for your home.
            <br>
                We aim for quality customer service by providing:
            </p>
            <ul>
                <li>Free quotes for cleaning, repairing and installing old and new blinds</li>
                <li>Most jobs can be easily quoted over the phone</li>
                <li>Premium quality blinds at competitive prices</li>
                <li>Onsite, on-the-day cleaning and repairing</li>
                <li>Wide variety of Australian-made blinds</li>
                <li>Reliable and friendly service</li>
            </ul>
        </div>
    </div>

CSS :

#sidebar {
    width: 20%;
    margin-left: 10%;
    float: left;
}

.container {
    width: 60%;
    float: left;
    padding-left: 15px;
    word-break: break-all;
}

Answer 3

All you need to do is add float:left; to your sidebar:

#sidebar { 
    width: 20%;
    margin-left: 10%;
    float: left;
}

Answer 4

try adding this style overflow-wrap: break-word;