CODEWITHSUNDEEP
htmlcss
mshwf
mshwf

Reputation: 7449

Positioning two elements side by side in the bottom?

I'm trying to position two buttons in the bottom side by side, they both must fill the width of the screen, so I make their width 50% this is my HTML:

#norm, #eco {
	background-color: #210511;
	color: white;
	width: 50%;
	position: absolute;
	bottom: 0;
	z-index: 999;
}
#norm {
	float: left;
}
#eco {
	float: right;
}
<div id="btmBtnsContainers">
    <input type="button" name="normal" value="Normal" id="norm" />
    <input type="button" name="economy" value="Economy"  id="eco" />
</div>
but it ends with just one button, and the other is hidden!!

Upvotes: 0

Views: 58

Answers (4)

Danish Adeel
Danish Adeel

Reputation: 730

Use left and right instead of float.

 #norm,#eco {
            background-color:#210511;
            color:white;
            width: 50%;
            position: absolute;
            bottom: 0;
            z-index: 999;
        }
        #norm
        {
            left:0;
        }
        #eco
        {
            right:0;
        }
 <div id="btmBtnsContainers">
        <input type="button" name="normal" value="Normal" id="norm" />
        <input type="button" name="economy" value="Economy"  id="eco" />
    </div>

Upvotes: 0

Jakub Matczak
Jakub Matczak

Reputation: 15676

NiZa's answer in one way of doing that, and here's another:

Since you've set position:absolute for inputs, they are placed in the same position. Just add right:0 for one in order to place it on right side.

Also when you change position to absolute, the float property won't work anymore, so you can remove it.

 #norm,#eco {
            background-color:#210511;
            color:white;
            width: 50%;
            position: absolute;
            bottom: 0;
            z-index: 999;
        }
        #eco
        {
            right:0;
        }
 <div id="btmBtnsContainers">
        <input type="button" name="normal" value="Normal" id="norm" />
        <input type="button" name="economy" value="Economy"  id="eco" />
    </div>

Upvotes: 0

Ole Haugset
Ole Haugset

Reputation: 3797

There is no point of floating your buttons when you are absolute positioning them. Instead, assign left and right positions to them like this:

#norm,#eco {
    background-color:#210511;
    color:white;
    width: 50%;
    position: absolute;
    bottom: 0;
    z-index: 999;
}

#norm {
    left:0;
}

#eco {
    right:0;
}
 <div id="btmBtnsContainers">
        <input type="button" name="normal" value="Normal" id="norm" />
        <input type="button" name="economy" value="Economy"  id="eco" />
    </div>

Upvotes: 0

NiZa
NiZa

Reputation: 3926

Make your container absolute instead of the buttons. Like this:

#btmBtnsContainers {
  width: 100%;
  position: absolute;
  bottom: 0;
  left:0;
  z-index: 999;
}

#norm,
#eco {
  background-color: #210511;
  color: white;
  width: 50%;
  float:left;
}
<div id="btmBtnsContainers">
  <input type="button" name="normal" value="Normal" id="norm" />
  <input type="button" name="economy" value="Economy" id="eco" />
</div>

Upvotes: 1

Related Questions