Member Avatar for geneh23

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..

  • 2 Contributors
  • 10 Replies
  • 259 Views
  • 59 Minutes Discussion Span
  • Latest Post Latest Post by TonyG_cyprus
Member Avatar for TonyG_cyprus

position:relative on all three?

Member Avatar for TonyG_cyprus

And can you post your html, please

Member Avatar for TonyG_cyprus

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.

Member Avatar for geneh23 
<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..)

Member Avatar for TonyG_cyprus

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

Member Avatar for TonyG_cyprus

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

Member Avatar for geneh23

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.

Member Avatar for TonyG_cyprus

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

Member Avatar for geneh23

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

Member Avatar for TonyG_cyprus

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.