CODEWITHSUNDEEP
layoutcss
Abraham
Abraham

Reputation: 20694

Why does my css shift the textbox downwards and to the next line?

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.

Upvotes: 0

Views: 208

Answers (3)

Rob W
Rob W

Reputation: 349122

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.

Upvotes: 1

Vilx-
Vilx-

Reputation: 106970

Seems to me that there is a bit of Javascript there that makes sure that the textbox is always as wide as the viewport (or close to it). After that, it's simple line-wrapping that makes sure that the textbox is in the next line.

Upvotes: 2

Smamatti
Smamatti

Reputation: 3931

Your input is too wide to fit into the same line and the margin in one rule is positioning it this way:

#toolbar > * {
    margin: 10px 5px;
}

Upvotes: 0

Related Questions