Thanks
views:
63answers:
5
A:
If you want the divs to be side by side then you can use the float property. If you want seperation between the divs then you can use margin property.
rahul
2010-07-14 11:00:55
Is the down vote for not giving the codes??
rahul
2010-07-14 11:36:09
+2
A:
Simple way to achieve the thing you want : use of float:left do work for you
<div style="width:100%">
<div style="width:100%">
<div style="width:45%; float:left">
div1
</div>
<div style="width:45%; ">
div2
</div>
</div>
<div style="width:100%">
<div style="width:45%; float:left">
div3
</div>
<div style="width:45%; ">
div4
</div>
</div>
</div>
Pranay Rana
2010-07-14 11:02:27
+1
A:
Use float and margin to solve your problem as rahul already suggested. To have 2 floats next to each other use width.
CSS:
.outer {
border: 1px solid black;
width: 100%;
float: left;
}
.inner {
margin: 10px;
float:left;
width:45%;
border: 1px solid black;
}
HTML:
<div class="outer">
<div class="inner">div</div>
<div class="inner">div</div>
<div class="inner">div</div>
<div class="inner">div</div>
</div>
I used 45% for the width of the floats, to make sure that they fit. 50% is not working due to the margin. The 45% could be increased slight more I guess, but that depends on the margin of the inner divs.
Veger
2010-07-14 11:10:53
the inner div does not need a class if you want to save some characters. you can use the css selector as this: `.outer div` or `.outer > div` if you only want to select the first childs
meo
2010-07-14 11:18:09
True, but using more complex CSS selectors (such as child and descendant selectors) seems to slow down browsers. So in this situation it is easily prevented.
Veger
2010-07-14 11:36:19
A:
try this code
<html>
<head>
<style type="text/css">
#main {
width:130px;
padding:10px 0px 0px 0px;
height:auto;
overflow:hidden;
background-color:#171817;
}
.div1 {
width:50px;
height:50px;
float:left;
display:inline;
margin:0px 0px 10px 10px;
background-color:white;
}
</style>
</head>
<body>
<div id="main">
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</div>
</body>
</html>
Jaison Justus
2010-07-14 11:11:00
Adding the units is much clearer and a good thing to do IMHO. And 0 is not always 0, for example 0 degrees Celsius is not the same as 0 degrees Fahrenheit or Kelvin
Veger
2010-07-14 11:39:38
@vergel: this is a bad argumentation i think. you never gonna use farenheit in a CSS style sheet. When you use a size 0 is always 0. I would always avoid to write useless stuff in any kind of code. It only would make sense if it would clarify something. But as you know 0px == 0pt == 0%. Using them makes your CSS heavier, longer to write and it hurts my eyes
meo
2010-07-14 12:56:43
+1
A:
This could be your HTML:
<div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
And this could be your CSS:
div {
float: left; /* so the surrounding div takes only the size of its content */
padding: 20px 0 0 20px; /* to get the same spacing everywhere */
overflow: hidden; /* this is not needed but i like to use it because clients never do what they shoul :P */
border: 4px solid black;
}
div > div {
float: left; /* places the divs next to each other */
width: 50px;
height: 50px;
margin: 0 20px 20px 0; /* makes the space between the divs */
border: 4px solid black;
}
div > div:nth-child(3n) {
clear: both; /* you want the 3rd div to start a new line */
}
and this would be the result: http://jsfiddle.net/NgjaY/1/
meo
2010-07-14 11:12:00