Ahmadz Issa Ahmadz Issa - 1 year ago 89
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

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

note that I'm using foundation framework for CSS!

<?php include 'core/init.php';?>
<!doctype html>
<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" />
<div class="wrapper">
<div class="row clearfix">
<div class="large-8 columns">
<ul class="menu">
<?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>";
<div class="large-4 columns right" >
<form action="" method="post" class="search">
<input type="text" name="search" class="search_input">
<input type="submit" name="search_b" value="Search">

<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>


.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;

.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.