CODEWITHSUNDEEP
htmlcss
Seong Lee
Seong Lee

Reputation: 10520

absolute position with float

I have arrow buttons as << and >> and in between there is a main div block. This main div has to be position:absolute since there are other hidden div elements that are overlapped.

The problem I have is with >> arrow button that I want to position on the right side of the main div.

This is my JS BIN.

Upvotes: 1

Views: 91

Answers (4)

user2652077
user2652077

Reputation:

Set the Height and Width in pg-wrapper css class

like this
        .pg-wrapper {
                 float:left;
                 height:27px;
                 width:188px;}

Upvotes: 1

Jacob Raccuia
Jacob Raccuia

Reputation: 1686

I floated to the arrow to the right, and set a parent around the div. it seems to have done what you wanted ( this time ).

http://jsbin.com/izeHiVu/2/

 .right {
     position:relative;
     display: block;
     float:right;
  }

.wrapper { width:265px; }

Upvotes: 1

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

demo

css

   ul { 
  list-style-type: none;
}

.nav-step li {
  float: left;
  background-color: lightgrey;
  color: white;
  padding: 5px 20px;
  border: 1px solid grey;
  position: relative;
  margin: 10px;
}

.nav-step li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: grey;
  position: absolute;
  left: -50%;
  top: 14px;
  z-index: -1
}

.nav-step li:first-child:after {
  content: none;
}

.nav-step .active {
  background-color: white;
  color: grey;
}

.pg-wrapper div {
  background-color: lightgrey;
  position:absolute;
}

.left {
  display:inline-block;
    margin:0 -3px;
    padding:0;
}

.pg-wrapper {
  position: relative;
  width: 180px;
  height: 20px;
  display:inline-block;
  overflow: hidden;
  vertical-align: middle;
}

.right {
  display: inline-block;
    margin:0 -4px;
    padding:0;
}

Upvotes: 0

Itay
Itay

Reputation: 16777

jsFiddle Demo

.pg-wrapper div {
  background-color: lightgrey;
  position:absolute;
}

.left {
  display:inline-block
}

.pg-wrapper {
  position: relative;
  width: 180px;
  height: 20px;
  display:inline-block;
  overflow: hidden;
  vertical-align: middle;
}

.right {
  display: inline-block;
}

Upvotes: 2

Related Questions