CODEWITHSUNDEEP
htmlcss
CybeX
CybeX

Reputation: 2396

Float div left and button right

Please note: I have looked at several SO posts and various suggestions for floating 2 divs side by side, however none of them seemed to work for me.

A summary of suggestions are:

display: inline-block
float: left

others refer to overflow: hidden, overflow: auto with various implementations.

One had worked, required me to set the right div:

position: absolute;
right: 0px

This was undesireable since the button would attach itself the the right side, ignoring all parent container constraints.

enter image description here

Above is that what I want to achieve.

The left div has the blue background. The right div contains the button.

My code:

Html

<div class="row">
                <div class="display-inline-block float-left">
                    <h1>Your Order Schedule
                        <a id="editScheduleName" onclick="changeScheduleName()">
                            <img class="schedule-heading small-image" src=""images/icons/edit.png">
                        </a>
                    </h1>
                </div>
                <div class="display-inline-block float-right">
                    <input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
                </div>
            </div>

Css Note:using a basis of bootstrap for most of my css needs

.display-inline-block {
    display: inline-block;
}

.schedule-heading {
    position: relative;
}

.small-image {
    width: 30px;
    height: 30px;
    margin-bottom: 5px;
}

.button-status {
    width: 120px;
    height: 50px;
    font-weight: bold;
    font-size: 18px;
}

Help would be very much appreciated

Upvotes: 0

Views: 4133

Answers (3)

Spinstaz
Spinstaz

Reputation: 331

First, you need to create a container div for both your buttons, and then have them inside as 2 divs. Then you can write in your CSS:

.button_container {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

You don't need to write anything for the other 2 divs.

Upvotes: 0

JanR
JanR

Reputation: 6132

Without any changes to css, purely using bootstrap:

Few key things: ensure you add columns (<div class="col-md-12">) after specifying <div class="row">

You can use the pull-left & pull-right classes to float the content:

<div class="row">
    <div class="col-md-12"><!-- define columns in bootstrap -->
        <div class="pull-left"><!-- use pull-left -->
            <h1>
                Your Order Schedule
                <a id="editScheduleName" onclick="changeScheduleName()">
                    <img class="schedule-heading small-image" src="images/icons/edit.png">
                </a>
            </h1>
        </div>
        <div class="pull-right"><!-- use pull-right -->
            <input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
        </div>
    </div>
</div>

Fiddle

This has better overall browser support than display:flex which is not supported in older versions of Internet Explorer.

Upvotes: 2

kyun
kyun

Reputation: 10264

.row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.display-inline-block {
  display: inline-block;
}

.schedule-heading {
  position: relative;
}

.small-image {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
}

.button-status {
  width: 120px;
  height: 50px;
  font-weight: bold;
  font-size: 18px;
}
<div class="row">
  <div class="display-inline-block float-left">
    <h1>Your Order Schedule
      <a id="editScheduleName" onclick="changeScheduleName()">
                            <img class="schedule-heading small-image" src="images/icons/edit.png"/>
                        </a>
    </h1>
  </div>
  <div class="display-inline-block float-right">
    <input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
  </div>
</div>

.row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Try to use display: flex!

You can search in Google, you can learn display: flex easily.

Upvotes: 2

Related Questions