ThomasE
October 15th, 2011, 02:53 PM
Hello guys, i have recently been working with some CSS3.
So i have been messing with some divs. And everything looks great.
The new command i am using is called "display:inline-block"
But the problem is though, whenever the browser isn't maximized, all the divs float all over the place, i'll post my code and pictures below.
Any ideas on how to make the divs stay in place and just make the browser create a scroll bar at the bottem?
http://zhost.tk/u/k0/maximized.png
http://zhost.tk/u/m3/minimized.png
http://zhost.tk/u/k0/maximized.png
http://zhost.tk/u/m3/minimized.png
<html>
<head>
<title>Hai</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
#object1
{
height:50px;
width:60px;
background-color:blue;
display:inline-block;
}
#object2
{
height:50px;
width:60px;
background-color:red;
display:inline-block;
}
#object3
{
height:50px;
width:60px;
background-color:green;
display:inline-block;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="object1_wrapper">
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
</div>
<div id="object2_wrapper">
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
</div>
<div id="object3_wrapper">
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
</div>
</div> <!-- Ending wrapper -->
</body>
</html>
So i have been messing with some divs. And everything looks great.
The new command i am using is called "display:inline-block"
But the problem is though, whenever the browser isn't maximized, all the divs float all over the place, i'll post my code and pictures below.
Any ideas on how to make the divs stay in place and just make the browser create a scroll bar at the bottem?
http://zhost.tk/u/k0/maximized.png
http://zhost.tk/u/m3/minimized.png
http://zhost.tk/u/k0/maximized.png
http://zhost.tk/u/m3/minimized.png
<html>
<head>
<title>Hai</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
#object1
{
height:50px;
width:60px;
background-color:blue;
display:inline-block;
}
#object2
{
height:50px;
width:60px;
background-color:red;
display:inline-block;
}
#object3
{
height:50px;
width:60px;
background-color:green;
display:inline-block;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="object1_wrapper">
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
<div id="object1">
</div>
</div>
<div id="object2_wrapper">
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
<div id="object2"></div>
</div>
<div id="object3_wrapper">
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
<div id="object3"></div>
</div>
</div> <!-- Ending wrapper -->
</body>
</html>