Is that a fly in my CSS? Positioning the search box
Even though the design for PA is pretty minimal, that doesn’t mean that it isn’t complicated enough to throw my CSS skills like a colicky bronco.
The latest issue that I (seem to have) squashed is the positioning of the search box in the top right of the page. Originally I had tried to place the box in the header section, in line with the site logo and name. I put the search box inside of a span and floated the whole thing right. When I loaded the page in my browser, however, the box ended up in line with the navigation links. It was a bit odd, but I thought it actually probably looked better that way so I didn’t fix it immediately.
When I loaded the page in Internet Explorer, the search ended up between the header and the navigation. It didn’t look very good. It was time to sort this out. I started getting a sense of the problem when I moved the HTML code for the search box down into the <div> it was displaying in, the navigation bar. When I did this, the search box moved below the nav bar. Ok, so it seems to always shift down for some reason. Next I removed the float:right line from the relevant CSS, and sure enough it displayed in line with the nav text, but aligned left. This is where I want it to be, minus the right justification. After continuing to try to wrestle the float into place, I finally decided that the position property was what I needed. Applying position:relative to the parent navigation <div> and some absolute positioning to the search span, it seems to be where it is supposed to be.
The HTML snippet:
The relevant CSS:
.search {
position: absolute;
right: 0;
top: 0;
padding: 0.5em 0;
}
#nav {
position: relative;
width: 100%;
margin-top: 5px;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 0.5em 0;
}
