CODEWITHSUNDEEP
htmlcss
user1508831
user1508831

Reputation: 13

Position of Div

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>

Upvotes: 0

Views: 104

Answers (2)

SomeoneS
SomeoneS

Reputation: 1279

You must set width of container in px, or to set width of child elements in %. Because, when user make his browser window smaller (or monitor resolution), if container width is expressed with %, container will decrease, and if container width is expressed with px, container width will stay the same, only sliders will be add to the window, so users must slide now to see all content.

If you want one element to be adaptive to user window (resolution), all other elements must be adaptive as well.

There is min-width CSS property, but it will add sliders too, if user browser window (or resolution) is smaller than min-width value :)

Upvotes: 0

Musa
Musa

Reputation: 97717

How about adding a minimum width to the containing element

#contain {
    background-color: #9F6;
    min-width: 1120px;/*sum of all the widths of its children*/
    width: 100%;
}

FIDDLE

Upvotes: 1

Related Questions