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.
Add a comment
|
4 Answers
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>
1 Comment
Dean J
As long as body is wide enough to fit.
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.
Comments
Just add float: left for every div.
Comments
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>
