Is there something wrong with my float:left in CSS - html

Question

I'm trying to design a flag for a website i'm doing and the design is the parts at the bottom of the flag, they stack when i don't float them (expected) but when i do float them, they shrink to the text inside of the box, How can i fix this? Here's my code:
#flag1{
max-width:400px;
max-height:1000px;
margin:0 auto;
}
#mainflag{
background-color:#BA0500;
max-width:400px;
max-height:1000px;
position:relative;
height:auto;
margin: 0 auto;
text-align:center;
padding:5px;
color:white;
}
#flagdesign1{
background-color:#BA0500;
max-width:100px;
position:relative;
max-height:50px;
color:#BA0500;
margin-top:-21px;
margin-right:20px;
}
<div id="flag1">
<div id="mainflag">
<h1>Flag</h1>
</div>
<div id="flagdesign1">
<h1>A</h1>
</div>
<div id="flagdesign1">
<h1>A</h1>
</div>
</div>
In the end, it should look something like these

Answer 1

If I understand your question well, you could try using display: table;.
Also, an ID is supposed to be unique, you should use classes instead.
I also used span instead of h1 for the flag element, as IE might not permit using display: inline-block;, depending on the version you're supporting.
#flag1{
max-width:400px;
max-height:1000px;
margin:0 auto;
}
#mainflag{
background-color:#BA0500;
max-width:400px;
max-height:1000px;
position:relative;
height:auto;
margin: 0 auto;
text-align:center;
padding:5px;
color:white;
}
.bottomFlag {
display: table;
width: 100%;
}
.bottomFlagElem {
display: table-cell;
}
.bottomFlagElem.center {
text-align: center;
}
.bottomFlagElem.left {
text-align: left;
}
.bottomFlagElem.right {
text-align: right;
}
.bottomFlagElem span {
display: inline-block;
width: 100%;
background-color:#BA0500;
max-width:100px;
position:relative;
min-height:30px;
max-height:50px;
color:#BA0500;
margin: 0;
}
<div id="flag1">
<div id="mainflag">
<h1>Flag</h1>
</div>
<div class="bottomFlag">
<div class="bottomFlagElem left">
<span>A</span>
</div>
<div class="bottomFlagElem center">
<span>A</span>
</div>
<div class="bottomFlagElem right">
<span>A</span>
</div>
</div>
</div>