I know this has probably been asked before, and it's more a CSS question than anything, but I can't seem to find the answer after searching for an hour both here and on W3 schools. I'm trying to position a widget with a phone number in the top right of the header area. I can get it where I want, but when I go to resize the window horizontally (smaller) , the phone number doesn't "go with" the header. Any suggestions?

http://www.drmichaelgriffith.com

ATA 3.6.4

This is one of the messy things about positioning. If you make it 'absolute', it doesn't move at all, make it 'relative' and the space it was in remains unless you use a height of '0' and if you make the page small enough it floats off the edge, but try and see if this helps and give the page a minimum width.

div#header_widget {
    color: #6A270A;
    font-family: 'Oswald',arial,sans-serif;
    font-size: 34px;
    font-weight: bold;
    height: 0;
    position: relative;
    right: -850px;
    top: -70px;
}

That does help in the sense that the text stays on one line when I resize the window, but it still meanders outside of the white header space when the window gets small enough. I set a minimum width of 900px, but that's arbitrary. Hm...

You just have to set a minimum width for you layout and perhaps adjust the right position.

Thanks to both of you for the responses I feel pretty embarrassed here, but I must be missing something with the minimum layout. I tried several different "sizes" (500 px, 900 px, 1000 px, etc.) and couldn't notice any difference when I resized my window. The widget's text is still spilling over into the tan background. I apologize if this is an easy fix that I'm just not understanding!

you need to make sure the phone number in positioned inside the minimum width of the page