Simple Floating

HTML & CSS
1

I seem to have forgotten how to do this- I have two buttons [leftBtn] [rightBtn] which I have centered [leftBtn] and floated:right for [rightBtn]. Once I float:right the [leftBtn] button which is centered shifts to the left a bit and no longer is in its centered position. Is there a method to keep the the [leftBtn] button centered while floating:right [rightBtn]?

<div class="centeredBtn"><div>[leftBtn]</div><div class="floatedBtn">[rightBtn]</div></div>
2

You could try something like this, but it would be better to know the context of this:


<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style media="all">
.centeredBtn {width: 300px;}
.leftBtn {width: 100px; margin: 0 100px;}
.floatedBtn {width: 100px; float: right;}
</style>
	
</head>

<body>

<div class="centeredBtn">
	<div class="floatedBtn">[rightBtn]</div>
	<div class="leftBtn">[leftBtn]</div>
</div>

</body>

</html>
3

Thank you. The context is a simple dialog box with a fixed width (500px by 400px) the two buttons are in the footer area. Your example is what I have too but it does not solve the issue of having [leftBtn] centered. And [rightBtn] absolutely positioned to the right. When you float the [rightBtn] the other button actually shifts its location thus is not in its original centered location.

4

Could you post an actual screen shot of what you want to make this clearer?

5

I have attached the screen shot illustrating what I am experiencing. But I think I answered my own question- I can absolutely position the [rightBtn] and that would solve it I believe. Sorry, I would be quicker but there are three computers connected for 30 developers :slight_smile:

6

Yes, position: absolute for the right button is an option. Or, if the width of the container is fixed, you could perhaps wrap divs around each button, float those divs, and place the bottons to the right of each div, and give the first div a width that makes the button sit in the center. I guess that’s not the most accurate method, though—especially as the button may change shape from browser to browser.

7

Is this what you have in mind?


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	<style media="all">
.buttonBox {
    border:2px solid #000;
    width:500px;
    padding:4px;
    margin:20px 0;
}
.centeredBtn {
    border:1px solid #888;
    background-color:#ccc;
    width:90px;
    text-align:center;
    margin:0px auto 0px;
}
.floatedBtn {
    border:1px solid #888;
    background-color:#ccc;
    width:90px;
    text-align:center;
    float:right;
}
    </style>
</head>
<body>

<div class="buttonBox">
	<div class="floatedBtn">[rightBtn]</div>
	<div class="centeredBtn">[leftBtn]</div>
</div>

</body>
</html>

(Ralph, please slice and dice at will.)

8

Nice work, ronpat. :slight_smile: