CSS: Positioning question


How do I position the “Search” and “I’m feeling lucky” button below the text input?

Wrap the buttons inside a div tag. Each tag has a default display property. Buttons default display property are inline-block.

An inline element does not start on a new line and only takes up as much width as necessary.

1 Like

What I usually do to accomplish that is use bootstrap and the their 12 column grid system.
Make sure to add Bootstrap to your codepen
<div class=“container”>
<div class=“row”>
<div class=“col-xs-12”>Your text input element here</div>
</div>
<div class=“row”>
<div class=“col-xs-6”>Your first button here</div>
<div class=“col-xs-6”>Your second button here</div>
</div>
</div>

the div with class container is there because Bootstrap requires a containing element to wrap site contents and house their grid system.