# CSS: Positioning question

**URL:** <https://forum.freecodecamp.org/t/css-positioning-question/86036>\
**Category:** General\
**Created:** [February 11, 2017, 2:13am UTC](https://forum.freecodecamp.org/t/css-positioning-question/86036 "2017-02-11T02:13:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidvu408](https://avatars.discourse-cdn.com/v4/letter/d/f19dbf/32.png) [@davidvu408](https://forum.freecodecamp.org/u/davidvu408)\
**Post date:** [February 11, 2017, 2:13am UTC](https://forum.freecodecamp.org/t/css-positioning-question/86036/1 "2017-02-11T02:13:51Z")

</div>

> **[Wikipedia Viewer](https://codepen.io/david_vu408/full/ygjGON/)**
>
> ...

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

---

<div class="post-metadata">

**Author:** ![Reggie01](https://avatars.discourse-cdn.com/v4/letter/r/8c91f0/32.png) [@Reggie01](https://forum.freecodecamp.org/u/Reggie01)\
**Post date:** [February 11, 2017, 2:21am UTC](https://forum.freecodecamp.org/t/css-positioning-question/86036/2 "2017-02-11T02:21:47Z")

</div>

Wrap the buttons inside a div tag. Each tag has a default [display](http://www.w3schools.com/css/css_display_visibility.asp) 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.

- [W3C website](http://www.w3schools.com/css/css_display_visibility.asp)

---

<div class="post-metadata">

**Author:** ![edwinruizr](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/edwinruizr/32/34993_2.png) [@edwinruizr](https://forum.freecodecamp.org/u/edwinruizr)\
**Post date:** [February 11, 2017, 8:23am UTC](https://forum.freecodecamp.org/t/css-positioning-question/86036/3 "2017-02-11T08:23:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:24pm UTC](https://forum.freecodecamp.org/t/css-positioning-question/86036/4 "2021-01-16T17:24:38Z")

</div>

Closed on January 16, 2021, 5:24pm UTC