I am facing the challenge of centering one div element while having others float to the left of it, similar to the following:
The code provided sets width and height in pixels, whereas I need to set them in percentages. This presents a problem as I'm unsure of where the center should be, especially with varying resolutions. I want only the yellow div to be centered without affecting the green div.
Is there a solution apart from adding an invisible empty div on the left side with the same height as the green div?
.container{
background-color:#34495e;
width: 500px;
height: 200px;
padding: 10px;
}
.in-center{
background-color:#f1c40f;
width: 40%;
height: 100%;
display: inline-block;
}
.to-left{
background-color:#2ecc71;
width: 20%;
height: 100%;
display: inline-block;
}
<div class="container">
<div class="in-center"></div>
<div class="to-left"></div>
</div>