how to make a button aligning bottom with float property within a div?

Question

<div  id="header" class="head">
    <img src="../../image/a2m.png" alt="propic here" usemap="#image" style="width:100px; height:100px;" class="propic"/>
    <map name="image">
        <area shape="circle" coords="50,50,50" href="opendiary.html" />
    </map>
    <a href="profile.html"><button class="menubar btn a1">Profile</button></a><a href="opendiary.html"><button class="menubar btn a2">Open Diary</button></a><a href="message.html"><button class="menubar btn a3">Message</button></a><button class="menubar btn a4">Options</button>

</div>

css:

#header {
    min-width:230px;
    max-width:1366px;
    min-height: 100px;
    position:relative;
    border: 2px dashed #dddddd;
    background-color: #555f00
}
#header button {
    display: inline-block;
    position: relative;
    float: left;

}

I want all 4buttons to be aligning at bottom. But I cant understand how? I have seen other question but as I am using 4 buttons because of position:absolute and float:right all overlap on each other. How can I solve this?

scottohara · Accepted Answer · 2017-04-30T01:01:46.637

The following should give you the result you're looking for. (you'll still need to add any responsive behavior the banner might need (as it will break at smaller screen sizes)

/* for IE9- render these elements correctly */

header,
nav {
  display: block;
}


/* header container */

.head {
  background-color: #555f00;
  border: 2px dashed #ddd;
  max-width: 1366px;
  min-height: 100px;
  min-width: 230px;
  position: relative;
  overflow: hidden;
}

.head__img-area {
  float: right;
}

.propic {
  width: 100px;
  height: 100px;
}

.head__nav-area {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 8px;
}

.head__nav-area .btn {
  display: inline-block;
  /* dummy styling */
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .3);
  padding: 8px;
  color: #fff;
  text-decoration: none;
}

.head__nav-area .btn:hover,
.head__nav-area .btn:focus {
  background: rgba(160, 160, 160, .5);
  border-color: rgba(40, 40, 40, .9);
}

<header id="header" class="head">

  <div class="head__img-area">
    <img src="../../image/a2m.png" alt="propic here" usemap="#image" class="propic" />

    <map name="image">
      <area shape="circle"
        coords="50,50,50"
        href="opendiary.html"
        alt="insert descriptive text here" />
    </map>
  </div>

  <nav class="head__nav-area">
    <a href="profile.html" class="menubar btn a1">
      Profile
    </a>
    <a href="opendiary.html" class="menubar btn a2">
      Open Diary
    </a>
    <a href="message.html" class="menubar btn a3">
      Message
    </a>
    <a href="#" class="menubar btn a4">
      Options
    </a>
  </nav>

</header>

So what the above is doing is floating the new img-area wrapper to the right, as per your screen shot. The entire nav container is then position absoluted and set to the bottom / left of the header.

I cleaned up the link/button combos you had there... it's invalid to have buttons inside of anchor elements, so I put the classes of the buttons on to the <a>s and made up some dummy styling to display them.

While I used position absolute and floating to achieve this layout, I primarily used them because they were utilized in the code you provided. Since you're using an image map, I'm guessing this may be an older project? And based on that assumption, I figured flex box wouldn't be a solution for you due needing at least IE10 for browser support.

However, if you can use flexbox, I'd highly recommend you check out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

As it could have been used to achieve this layout (and would be easier to work with for responsive websites)

good luck!

score 0 · Answer 2 · edited May 23 '17 at 11:46

Surround all your buttons with a div container and give this div container some CSS. This could look at the end like this:

#header {
    min-width: 230px;
    max-width: 1366px;
    min-height: 100px;
    position: relative;
    border: 2px dashed #dddddd;
    background-color: #555f00
}
#header .buttons {
    position: absolute;
    left: 0;
    bottom: 0;
}

/* To replace the <a> link */
#header .buttons form {
  display: inline;
}
/* To style the <a> link more like a <button> */
#header .buttons a {
  font: bold 13px sans-serif;
  text-decoration: none;
  background-color: #E0E0E0;
  color: black;
  padding: 2px 6px 2px 6px;
  border: 1px solid #CCC;
  border-right-color: #333;
  border-bottom-color: #333;
  font-weight: normal;
  appearance: button;
  -moz-appearance: button;
  -webkit-appearance: button;
}

<div id="header" class="head">
    <img src="../../image/a2m.png" alt="propic here" usemap="#image" style="width:100px; height:100px;" class="propic"/>
    <map name="image">
        <area shape="circle" coords="50,50,50" href="opendiary.html"/>
    </map>
    <div class="buttons">
        <a href="profile.html" class="menubar-link">
            Profile
        </a>
        <form action="opendiary.html" method="get">
            <button type="submit" class="menubar btn a2">Open Diary</button>
        </form>
        <form action="message.html" method="get">
            <button type="submit" class="menubar btn a3">Message</button>
        </form>
        <button class="menubar btn a4">Options</button>
    </div>
</div>

Float is often considered as bad practise. So try whenever to avoid this option. Also you should not use <button> tags inside <a> tags. I added two possible ways to avoid this.

This answer helped me: Answer to: How to align content of a div to the bottom?

but now all are making a vertical line on left. they are not staying horizontali. — Abdullah Al Mubin, Apr 29 '17 at 22:46

score 0 · Answer 3 · answered Apr 30 '17 at 01:14

Wrap the buttons and their containers in a div a position that div absolute and align it bottom.

#header {
    min-width:230px;
    max-width:1366px;
    min-height: 100px;
    position:relative;
    border: 2px dashed #dddddd;
    background-color: #555f00
}
#header button {
    display: inline-block;
    position: relative;
    float: left;
}
/**Added this**/
.btn-cont {
  position: absolute;
  bottom: 0;
 /** right: 0; this is to align buttons right**/
}
/**Uncomment this to float image right
img {
  float: right;
 }

<div  id="header" class="head">
    <img src="../../image/a2m.png" alt="propic here" usemap="#image" style="width:100px; height:100px;" class="propic"/>
    <map name="image">
        <area shape="circle" coords="50,50,50" href="opendiary.html" />
    </map>
    <div class="btn-cont"><!--Added this div-->
    <a href="profile.html"><button class="menubar btn a1">Profile</button></a><a href="opendiary.html"><button class="menubar btn a2">Open Diary</button></a><a href="message.html"><button class="menubar btn a3">Message</button></a><button class="menubar btn a4">Options</button>
     </div>
</div>

how to make a button aligning bottom with float property within a div?

3 Answers3