how to place an element at the bottom of 2 elements that are floated left and right?

Question

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<button type="button" style="width: 40%; float: left; height: 40px">Top!</button>
<button type="button" style="width: 40%; float: right; height: 40px">Top!</button>
<button type="button" style="float: left">Botton!</button>

</body>
</html>

In the above code, the 3th button will only be placed in a new line if the window is so narrow that the space between the 2 top buttons is not enough to fit the 3rd button.

How do I change the code so that the 3nd button will always be placed in a new line regardless of the window width?

score 1 · Accepted Answer · answered Dec 09 '20 at 04:38

1

Just add

clear:both:
float:left;

to bottom Button

<button type="button" style="clear: both;float: left;">Botton!</button>

answered Dec 09 '20 at 04:38

can you explain the CSS concept here? – Bear Bile Farming is Torture Dec 09 '20 at 04:43
check these links https://stackoverflow.com/questions/8554043/what-is-a-clearfix and https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use – Dec 10 '20 at 09:29

score 0 · Answer 2 · answered Dec 09 '20 at 04:40

You should not use float for the 3rd button, instead use a margin like this:

body {
   text-align: center;
}

button:nth-child(3) {
   margin-top: 40px; /*you can use more margin if you want to*/
}

<body>
<button type="button" style="width: 40%; float: left; height: 40px">Top!</button>
<button type="button" style="width: 40%; float: right; height: 40px">Top!</button>
<button type="button">Botton!</button>
</body>

how to place an element at the bottom of 2 elements that are floated left and right?

2 Answers2