Hey everyone,

It's a bit unusual for me to post in the html section. However I am stumped as to why I have three divs. One aligned to the left and two aligned to the right and when I add the third div aligned to the right, the left div goes down along with the second right div that's aligned to the right. I'm not sure why my left div wont go all the way to the top right next to the first right aligned div. Help please?

here is the div aligned to the left in css

.sidebar {
    padding:0;
    float:left;
    width:280px;
    background-color: #fff;
    -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    border: 1px solid #000;
}

Here is the first div aligned to the right the should be right beside the left div..

.mainbar {
    margin:0;
    padding: 0px;
    float: right;
    width: 653px;
    background-color: #fff;
    -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
}

and finally here is the third div aligned to the right, underneath the .mainbar div.

.mainbar2 {
    margin-top: 10px;
    padding:0px;
    clear: both;
    float: right;
    width:653px;
    background-color: #fff;
    -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    border: 1px solid #000;
}

Thanks for any help. this is probably an easy fix, I just don't see it yet..

Recommended Answers

All 10 Replies

position:relative on all three?

And can you post your html, please

I tried this:

<html>
<head>
<title>title</title>
<style>  
.sidebar {
    padding:0;
    float:left;
    width:280px;
    background-color: #fff;
    -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    border: 1px solid #000;
}
.mainbar {
    margin:0;
    padding: 0px;
    float: right;
    width: 653px;
    background-color: #fff;
    -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    border: 1px solid #000;     
}
.mainbar2 {
    margin-top: 10px;
    padding:0px;
    clear: both;
    float: right;
    width:653px;
    background-color: #fff;
    -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    border: 1px solid #000;
}
</style
</head>

<body>
<div class='sidebar'>abcd</div>
<div class='mainbar'>abcd</div>
<div class='mainbar2'>abcd</div>
</body>
</html>

and it works, a big gap in between, but thats my monitor, other than that,
sidebar and mainbar, top line, in-line, and mainbar2 below mainbar.

<div class="mainbar">
      <h2><strong>Welcome</strong></h2>
    <p>stuff goes here</p>

    <p>more stuff goes here</p>
    <br />
    <h2>another header</h2>
    <p>some more stuff here</p>
    <ul>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
    </ul>
    </div><!-- end of mainbar class div -->
    <div class="mainbar2">
    Contact form goes in here with some links
    </div><!-- end of main bar class div -->
    <div class="sidebar">
    <?php include'includes/sidebar.php'; ?>
    </div><!-- end of sidebar div -->

the stuff that is in the sidebar.php include a search bar, newsfeed, and two forms stacked on top of each other. (I would post the code for all of that but its extremely long..)

Move the sidebar div up to under the body tag... it'll work, but you should use position in your css as well.

Sorry, I meant above your mainbar tag....

Well that fixed that div but now the mainbar2 div wont go right underneath the mainbar div. There's a huge space in between the mainbar div and the mainbar2 div.

take out clear:both this says 'nothing to the left or right' so it's pushing the mainbar2 down below the sidebar level.

@TonyG cyprus, That did it! Thanks for your patience with me!

No probs, mark it solved please.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.