CODEWITHSUNDEEP
htmlcss
Jerodev
Jerodev

Reputation: 33206

html renders different in same browser

I am creating a simple blog template. In the right corner of the template there is a search box in the header. The search box should appear there, but at some moments it appears under the header.

enter image description here

This happens every now and then, if I refresh the page a few times the box will somethimes jump positions. I have used Google Chrome for the developent The html of this page is purely static, so I don't have a clue why this is happening. Could anyone find out why this box is jumping up and down.

The affected page can be found here.

Upvotes: 0

Views: 176

Answers (3)

Snade
Snade

Reputation: 166

The solution is quite simple,

just ad float: left; to the menu element ( header#top nav ul) 

header#top nav ul {
list-style: none;
height: 45px;
display: inline-block;
float: left;
}

than you will only need to add height to the wrapper 

.wrapper {
width: 800px;
margin: 0 auto;
height: 46px;
}

Upvotes: 0

Marcel
Marcel

Reputation: 1288

I can't re-create your problem, but I'm sure adding position:relative to either nav or .wrapper

.wrapper {
  width: 800px;
  margin: 0 auto;
  position: relative;
}

and position:absolute to the searchbox will prevent any jumping.

header#top #searchBox {
  position:absolute;
  top: 0;
  right: 0;
  display: block;
  width: 240px;
  height: 45px;
  // line-height, any other styles
}

Upvotes: 2

Hello Universe
Hello Universe

Reputation: 3302

Try the following

header#top #searchBox{
float: right;
display: inline-block;
line-height: 45px;
width: 63%;

text-align: right;}

Upvotes: 0

Related Questions