what is the proper code for this?
in div style code. I know how to use float but only 2 divides. But in 4 divides, I don't know.
+3
A:
Floating will still work for any number of div's, they'll line up next to each other until they fill the width of the container, at which point they will start to wrap to the next line.
Tesserex
2010-04-21 16:09:11
+4
A:
Just float them all left and if necessary add a right margin of -1px so that the borders overlap nicely. Here's an SSCCE, just copy'n'paste'n'run it:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2684578</title>
<style>
.box {
float: left;
width: 100px;
height: 100px;
margin-right: -1px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
</body>
</html>
BalusC
2010-04-21 16:09:56
As long as body is wide enough to fit.
Dean J
2010-04-21 16:11:16
Thank you so much.
Jordan Pagaduan
2010-04-21 16:34:44
A:
Also, if you don't want your 4 divs to wrap to the next line when the window gets resized you can place your 4 divs inside a parent div and set the width of that parent div.
Here is an example based on BalusC's code above:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2684578</title>
<style>
.box {
float: left;
width: 100px;
height: 100px;
margin-right: -1px;
border: 1px solid black;
}
.parent {
width: 404px;
height: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
</div>
</body>
</html>
J Higs
2010-04-21 16:36:14