Currently working on CSS styling for a store. I have a div that aligns the buy button to the left, and Prev and View Next images to the right.
The issue arises when the "buy" button is occasionally not present due to PHP functionality.
When the buy button is absent, the images need to be centered to avoid empty space on the left side where the buy button was positioned.
Initially, I considered using margin:0px auto, but realized it would require a constant width setting, correct?
What seemed like a simple task at first has become quite challenging.
Link to fiddle
Simplified version for clarity
I believe I might be overlooking something basic that I can't seem to pinpoint.
HTML:
<div id="comprarbtn">
<div id="wrappcomprarbtn">
<input class="comprarbtn commonButton" type="button" value="Buy Now" id="buynowlogin">
<div id="naviminicc"> <a href="javascript:void(0);" class="prevImg"><img src="images/navmini_01.png" class="navmini1"></a>
<img src="images/navmini_02.png" class="navmini2" rel="#mies1"> <a href="javascript:void(0);" class="nextImg"> <img src="images/navmini_03.png" class="navmini3"></a>
</div>
</div>
</div>
CSS:
.comprarbtn { width:175px;
line-height:51px;
background-image:url(image.jpg);
border:0px;
font-size:12px;
padding-left:10px;
cursor:pointer;
overflow:hidden;
text-indent:0px;
z-index:10;
}
#comprarbtn {
float:left;
position:absolute;
width:321px;
text-align:center;
height:51px;
z-index:1000;
display:table-cell;
background-color:#f4f4f4;
}
#wrappcomprarbtn { margin:0px auto;}
#naviminicc { width:145px; float:right;}
#naviminicc a { margin:0px; padding:0px; }
.navmini1 { cursor:pointer; margin:0px; }
.navmini2 {cursor:pointer; margin:0px; }
.navmini3 {cursor:pointer; margin:0px; }
#navmini { width:135px; max-width:135px;}