3 Divs, clear problem

HTML & CSS
1

So I creatd 3 divs. I need the buttons to be on the same level, just one is to the left and one to the right. So far everything is good except the right button (div) shows up one line below the first. I need it next to the other. I put in a float and tried some clears but it never works:

here’s what it looks like right now: http://elbalazo.net/post/buttons.jpg

#pageOptions-Bottom
{
    border-top: 1px solid #ccc;
    width: 100;
    margin: 10px 0px 0px 0px;   
}

#pageOptionsBottom-Left
{

    text-align: left;
    width: 50%;   
}

#pageOptionsBottom-Right
{
    float: right;
    text-align: right;
    width: 50%;   
}

            <div id="pageOptions-Bottom">
                <div id="pageOptionsBottom-Left">
                    <a href="http://somepath/ButtonLeft.jpg"><img border=0 src='images/continueShopping_grey.gif'></a>

                </div>
                <div id="pageOptionsBottom-Right">
                    <a href="http://localhost/Pmall.Web/Checkout.aspx"><img src="http://somepath/ButtonRight.jpg" border="0" align="absmiddle" /></a
                </div>
            </div>
2 
<img src="http://somepath/ButtonRight.jpg" border="0" [COLOR="Red"]align="absmiddle"[/COLOR] /></a[SIZE="5"]>[/SIZE]

Add big remove red

3

no wonder, I don’t use that type of crap, it was left over from my boss’s legacy code. Thanks Ryan!

4

damn removed that…and tried the following, still can’t get it yet. Even changed the width (prob unecessary) of the div on the left.

#pageOptions-Bottom
{
    border-top: 1px solid #ccc;
    width: 100%;
    margin: 10px 0px 0px 0px;
}

#pageOptionsBottom-Left
{
    text-align: left;
    width: 45%;
}

#pageOptionsBottom-Right
{
    float: left;
    text-align: right;
    width: 50%;   
}

<div id="pageOptions-Bottom">
                <div id="pageOptionsBottom-Left">
                    <a href="http://localhost/Pmall.Web/"><img border=0 src='images/continueShopping_grey.gif'></a>

                </div>
                <div id="pageOptionsBottom-Right">
                    <a href="http://localhost/Pmall.Web/Checkout.aspx"><img src="images/checkout.gif" border="0" /></a>
                </div>
            </div>
5

#pageOptionsBottom-Left {
float:left;
text-align:left;
margin-left: -1px;
width:50%;
}

float first

6

resolved:

#pageOptions-Bottom
{
    border-top: 1px solid #ccc;
    width: 100&#37;;
    margin: 10px 0px 0px 0px;
}

#pageOptionsBottom-Left
{
    display: inline;
    text-align: left;
    width: 45%;
}


#pageOptionsBottom-Right
{
    float: right;
    text-align: right;
    width: 50%;   
}

thanks Ryan.

7

Do my way.

eybard broen sry

8

hmm, why negative margins all of a sudden when you can just use a display: inline;?

9

IE needs float

margin roUnding errors

10

hmm, I’ve got a float on the div with float: right; So with that and a display: inline; on the other I don’t see the issue.

11

Wait, wtf! What I never had to add a margin: -1px; in the past. Damn you MS. So wtf, is this a new problem/bug in IE 8? Never had this issue in the past but I see now.

12

The problem you might find in ie is that you have a 1px border on a 100% width element. Wouldnt be suprised if that broke i.e 6. Anywho in reguards to the floating I would have done the following:


#pageOptionsBottom-Left
{
    float: left;
    text-align: left;
    width: 50%;   
}

#pageOptionsBottom-Right
{
    float: right;
    text-align: right;
    width: 50%;   
}

.clear
{
   clear:both
}

            <div id="pageOptions-Bottom">
                <div id="pageOptionsBottom-Right">
                    <a href="http://localhost/Pmall.Web/Checkout.aspx"><img src="http://somepath/ButtonRight.jpg" border="0" align="absmiddle" /></a
                </div>
                <div id="pageOptionsBottom-Left">
                    <a href="http://somepath/ButtonLeft.jpg"><img border=0 src='images/continueShopping_grey.gif'></a>
                </div>
            <div class="clear"></div>
            </div>

couple of things there, firstly I added a clear to the bottom of the floated elements to push the parent container to the correct height. Secondly the right floated element has to be first in your html otherwise it causes a float bug in ie to make things go wierd.

With the 100% element thing if the border is causing an issue maybe take the border off that 100% div and apply it to another div wrapping the 100% div eg:


<div class="withborder">
 <div class="100%">
     <div class="right">
     </div>
     <div class="left">
     </div>
 </div>
</div>

or if that doesnt work (i work with fixed width websites 99% of the time) just try setting the width of one of the floated items to 40% or something.

Generally I wouldnt use negative margins as they are a bit icky imo :stuck_out_tongue: