Forum Moderators: not2easy
/*snip*/
These boxed are with different height
<div id="box1" class="node"></div>
<div id="box2" class="node"></div>
<div id="box3" class="node"></div>
<div id="box4" class="node"></div>
<div id="box5" class="node"></div>
I gave following css property to make it look like a boxes
.node {
float:left;
margin:10px 7px;
paddin147px;
}
why there is a big gap under between box 1 and box 2?
I know if I give theme a definite height, they will become normally aligned. But can i do that without giving them fixed height?
Thanks a lot everyone
[edited by: limbo at 3:30 pm (utc) on Dec. 26, 2009]
[edit reason] No URL's please, see TOS [webmasterworld.com] [/edit]
.node {
float:left;
margin:10px 7px;
width:147px;
}
Floated elements will continue to "fill out a line" until they run out of room, then the next div will pop down to the next "line." In your picture, there's nothing to clear the first row, so the upper left of box four will start at the lower right of box 1. If it were the same height as box 2, of course it would go full left.
Two suggestions that might work: add a clearing element between rows, or put them in a floated container. A floated element will always "shrink wrap" and contain it's floated children. Working example, with some elements added to duplicate the effect and demonstrate both:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype all on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
.container { float:left; width: 350px; background:#c0c0c0; }
/*
If you need to NOT float this container, you will need
to add a clearing div in the second example. Experiment with both.
.container { width: 350px; background:#c0c0c0; }
*/
.node {
float:left;
margin:10px 7px;
width:147px;
height:200px;
background:#a95f56;
color: #ffffff;
text-align:center;
}
.clear-div { clear: both; }
.element-row { float:left; width: 350px; }
#box1,#box4,#box6,#box9,#box10 { height: 250px; }
</style>
</head>
<body>
<p>First, a clearing div between elements:</p>
<div class="container">
<div id="box1" class="node">Box 1</div>
<div id="box2" class="node">Box 2</div>
<div class="clear-div"></div>
<div id="box3" class="node">Box 3</div>
<div id="box4" class="node">Box 4</div>
<div class="clear-div"></div>
<div id="box5" class="node">Box 5</div>
</div>
<p class="clear-div">Next, a floated containing div. Note this paragraph also
is a clear class, so the two container boxes don't go side-by-side:</p>
<div class="container">
<div class="element-row">
<div id="box6" class="node">Box 6</div>
<div id="box7" class="node">Box 7</div>
</div>
<div class="element-row">
<div id="box8" class="node">Box 8</div>
<div id="box9" class="node">Box 9</div>
</div>
<div class="element-row">
<div id="box10" class="node">Box 10</div>
</div>
<!--
if you do not float ".container",
you will need to add this.
<div class="clear-div"></div>
-->
</div>
</body>
</html>
Of course, all that falls apart if you don't know how many boxes will be in each row. If this is the case, I'd suggest controlling the height of the boxes, set their overflow to hidden, but that might "chop off" vital content.
(A float [w3.org] is a box shifted left/right along a line with other content flowing to the left or right, while inline-block [w3.org] creates a block box that flows as an inline box)
In other words, you don't want to shift each box left or right, you just want to create block boxes (because you want to specify heights and widths), that will "flow" along a single line and then wrap to the "next" visual "line" if there are too many to fit horizontally.
In the past floats have been used to simulate this behaviour because of inconsistent browser implementation of inline-block. SuzyUk has a post [webmasterworld.com] dealing with those issues, however I think browser improvements make it possible to use it without vendor-specific code unless you are supporting many older browsers. The advantage of inline-block over floats is that there is no need to use additional mark-up to create clearing elements as they aren't required.
This is an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Boxes</title>
<style type="text/css">
.node {
display:inline-block;
margin:10px 7px;
padding:47px;
background-color:red; /*just for the example*/
width:100px; /*set as required*/
}
/*to create varying heights for the example */
#box1 {height:200px}
#box2 {beight:100px}
#box3 {height:300px}
</style>
<!--[if lte IE 7 ]>
<style type="text/css">
/*a conditional comment is required for ie<8 because of the different implementation of inline-block. You may also need to adjust margins/padding to allow for the different box model */
.node {display:inline;vertical-align:top;}
</style>
<![endif]-->
</head><body>
<div id="box1" class="node">One</div>
<div id="box2" class="node">Two</div>
<div id="box3" class="node">Three</div>
<div class="node">four</div>
<div class="node">five</div>
<div class="node">six</div>
<div class="node">seven</div>
<div class="node">eight</div>
</body>
</html>
