Question

I’ve been banging my head for hours trying to figure this out. Why, in this demo, is the textbox shifted downwards a bit and not on the same line as the blue box? Thanks in advance!

EDIT: Sorry if I didn’t state this clearly: The top of the text box should align with the top of the blue box.

Answer 1

Update: About the seemingly “wrong” vertical placement.

You have to apply margin-top:6px;margin-bottom:0px; to the span to fix the issue (See http://jsbin.com/eciyib/8). By default, the top and bottom margin of the span is 10px, as defined by the #toolbar > * selector. The <input> element has a top and bottom margin of just 6px, as specified at the #url selector.

---

You haven’t defined a width property for the div#toolbar element. See below. When the viewport is smaller than 1690px, the input element will shift down, to fit.

JSBin: http://jsbin.com/eciyib/7/

div#toolbar   <missing width property>
    span      margin-left: 10px; margin-right: 5px; width: 22px;    total=  37px
    input#url margin-left: 5px; margin-right: 10px; width: 1228px;
              border-left-widt: 5px; border-right-width:5px         total=1553px
                                                                    total=1690px

Further explained:

• The elements have a margin-left and right of 5px, due #toolbar > * {margin:10px 5px;}
• The #toolbar > *:first-child and #toolbar > *:last-child selectors change the left and right margin of the childs to 10px.
•      As a result, both elements have a horizontal margin of 15px
• The input element has a fixed width of 1228px, as defined inline
• The input element inherit a left and right border of 5px, from the browser.