Hi This is my css and html code. There are a few div. When browser size is maximum there is no problem but when i change browser size smaller then div postion changed. For example : <div id="cnrht"> id "cnrht" İçeriği Buraya Gelecek</div> is on right of page but when browser goes smaller it is going to under other div and on left. How can i edit it.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html { height:100%;
width:100%;}
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 75%;
line-height: 1.5em;
height:100%;
width:100%;
}
#wrapper {
height: 100%;
width: 100%;
border: thin solid #F00;
position: relative;
visibility: visible;
z-index: 1;
}
#container {
border: thin dotted #006;
z-index: 2;
width: 100%;
}
#header {
background-color: #993;
clear: both;
height: 100px;
width: 100%;
}
#contain {
background-color: #9F6;
width: 100%;
}
#cnlft {
background-color: #C69;
padding: 10px;
height: auto;
width: 180px;
float:left;
}
#cncnt {
background-color: #F00;
padding: 10px;
width: 700px;
height: auto;
float:left;
}
#cnrht {
background-color: #0FF;
padding: 10px;
float: left;
width: 180px;
height: auto;
}
.clr {clear:both;}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">id "wrapper" İçeriği Buraya Gelecek</div>
<div id="contain">
<div id="cnlft">id "contain" İçeriği Buraya Gelecek</div>
<div id="cncnt"> id "cncnt" İçeriği Buraya Gelecek</div>
<div id="cnrht"> id "cnrht" İçeriği Buraya Gelecek</div>
<div class="clr"></div>
</div>
</div>
</div>
</body>
</html>
How about adding a minimum width to the containing element
FIDDLE