Ahmadz Issa Ahmadz Issa - 1 year ago 110
CSS Question

DIV moves when zoom-in in browse (foundation framework)

My div is moving around when the zooming in,and it goes below the navigation

picture of the problem
http://store2.up-00.com/2016-08/1470571909991.png

I tried to set min-width but it didn't work!.

note that I'm using foundation framework for CSS!
HTML -

<?php include 'core/init.php';?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Site</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/home_style.css" media="all" />
</head>
<body>
<div class="wrapper">
<header>
<div class="row clearfix">
<div class="large-8 columns">
<ul class="menu">
<li>Home</li>
<li>Members</li>
<li>Topics:</li>
<?php $get_topics = "SELECT * FROM `topics`";
$run_topic = mysqli_query($con, $get_topics);
while ($topics = mysqli_fetch_array($run_topic)){
$topic_id = $topics['topic_title'];
$topic_title = $topics['topic_title'];
echo "<li><a href='home.php?topic=$topic_id'>$topic_title </a></li>";
}
?>
</ul>
</div>
<div class="large-4 columns right" >
<form action="" method="post" class="search">
<label>Search</label>
<input type="text" name="search" class="search_input">
<input type="submit" name="search_b" value="Search">
</form>
</div>
</div>
</header>

</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>


CSS:

.wrapper {
width: 100%;
min-width: 1300px;
background: #eee; /* Fills the page */
position: relative; /* Fix for absolute positioning */
}

header {
height: 70px;
width: 100%;
background-color: #5f5f5f;
font-weight: bold;

}

header ul.menu li {
display: inline-block;
margin-left: 25px;
line-height: 60px;
}


.search {
margin-top: 12px;
}
.search_input {
display: inline;
}
.search input[type=text] {
width: 200px;
}

.search label {
display: inline;
}




/*REMOVE FOUNDATION STYLE*/
.menu > li > a {
padding: 0;
}



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

Answer Source

Watch your header style... height: 70px; is your problem. Your browser tries to move the element under others, but it has set height, so your element floats in nothing. Try to remove this attribute.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download