resize window postion is messsed up

[hwoarang69]

for some reason it my postion of div get messed up when i resize window. not sure how to fix this.

    <div id = 'header_outer'>
                <div id ='header_left'>
                    <p>HELLO WORLD</p>
                </div>
                <div id='header_right'>
                    <h4>HELLOOOOOOOOOOOOOOOOOOOOOO</h4>
                </div>
            </div>


    #header_left
    {
        border: 3px solid blue; 
        float: left;
        padding-left:20px;
        font-weight: bold;
        font-size:45px;
        width:50%;
    }




    #header_outer
{
    border-bottom: 10px solid #350200; 
    height: 100px;
    width:100%;
    color: white;
}
    #header_right 
    {
        border: 3px solid black; 
        float: right;
        height:100%;
        width:40%;
    }

[simplypixie]

What exactly gets messed up?

[JorgeM]

If you can provide a picture/diagram of what you are trying to do that would be helpful.

[hwoarang69]

i have two pic. 1st image is the resize and messed up postion. 2nd image is how it should be when its not resized.
as you can see when resize right div get push to left for some reason.
i made a blue border for left div. and for right div i made blue border so its easy to see.

[JorgeM]

So your div elements resize because you have specified that they should have a percentage as a width. since your outer div has a width of 100% is going to try to fill its width as much as possible.

What you can do is for the outer div, try with a fixed width. If you want to center it, then also assign a left and right margin of 'auto'. For example...

#header_outer {
    border-bottom: 10px solid #350200; 
    height: 100px;
    width:1000px;
    margin: 0px auto;
    color: white;
}

The inner left and right divs will not resize because their parent div will always have a fixed width.