DIVS move according to browser size

Navigation
0

divs move as the size of the browser changes.

WhenIchangethebrowsersize. 

body
{
	margin: 0; 
	background: #FFF;
}

/*CLASSES UTEIS*/
.foco:focus
{
	outline: none;
}

/*CABEÇARIO*/
#cabecario
{
	width: auto;
	height: 40px;
	background: #7bdac1;
}
#logo_div
{
	float: left;
	width: 141px;
	height: 40px;
	margin-left: 30px;
	position: relative;
}
#logo
{
	margin-top: 3px;
}
#search_div
{
	float: left;
	width: 300px;
	height: 40px;
	margin-left: 70px;
	position: relative;
}
#search_bar
{
	width: 300px;
	height: 26px;
	margin-top: 6px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LuppBox</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
	<header>
		<div id="cabecario" name="cabecario">
			<div id="logo_div" name="logo_div">
				<img src="http://i.stack.imgur.com/jBNwP.jpg"id="logo" name="logo" width="auto" height="35">
			</div>
			<div id="search_div" name="search_div">
				<input id="search_bar" name="search_bar" type="search" class="foco">
			</div>
		</div>
	</header>
</body>
</html>
    
asked by anonymous 28.05.2015 / 20:14

1 answer

1

The problem is here: 

#cabecario
    {
        width: auto;
        height: 40px;
        background: #7bdac1;
    }

Put a specific width instead of automatic, type: 

width: 1000px;

Update:

Put it this way you will understand: 

#cabecario
        {
            min-width: 600px;
            height: 40px;
            background: #7bdac1;
        }

That way when you reduce the size of the browser it will not let the divs move, because you have set a minimum size. It will always display the divs in the required size so as not to distort.

I put 600px in the example, but you can test smaller values like 500px and see how far you will not move the divs.

    
28.05.2015 / 20:33
How can I make the selection of this DataTable? Category checking in C # / ASPX usage