Forum Moderators: not2easy
I really want the items to be floated left, but if I apply a left float, the wrapping looks like crap. "rightdiv" can have varying heights, so using a fixed margin on it is not an option.
Is what I am wanting even possible?
<html>
<head>
<style>
#main {width: 400px}
#rightdiv, .item span{
margin: 5px;
border: 1px solid #000;
width: 180px;
}
#rightdiv {
float:right;
height: 150px;
}
.item span {
float:right;
height:50px;
display: block;
}
</style>
</head>
<body>
<div id="main">
<div id="rightdiv"></div>
<div class="item"><span>1</span></div>
<div class="item"><span>2</span></div>
<div class="item"><span>3</span></div>
<div class="item"><span>4</span></div>
<div class="item"><span>5</span></div>
<div class="item"><span>6</span></div>
</div>
</body>
</html>
[edited by: SuzyUK at 9:32 pm (utc) on Oct. 3, 2006]
Is what I am wanting even possible
no I'm not sure it is especially as that right div has varying heights. I can get the float ordering to work but the rest is a pixel perfect math excercise!
The thing is even if you float the span's left, which you should to maintain their order like you want, as soon as they reach the bottom of the right div they will get still appear jagged if the maths mean they haven't got a clear float space to get over to the left.
#main {
width: 400px;
background: #eee;
overflow: hidden; /* to contain floats */
}#rightdiv, .item span{
margin: 5px 9px 5px 9px; /* this is math excercise depending on the width of the main div, and the width of the inner divs and their borders */
border: 1px solid #000;
width: 180px;
background: #fff;
}#rightdiv {
float: right;
display: inline; /* double margin bug */
height: 145px; /* this amount is vital to match with the first few floated spans */
}.item span {
float: left;
height: 40px; /* needs to be compatible with the margins so the first floats exactly match the right div */
display: block;
}
just change the height of that right div to see this fall flat!
also changing the heights of the floats and/or their top bottom margins will do the same - e.g. change the top margin on the floats by 1px to see how even 1px will stop the floats going where you want!
about the only thing I can think of right now is to assign say three floats to the left of the right div, then provide a clearing element then continue the list after the clearing has been done.. how this will work in your layout I don't know, it would depend on how much variance there is the height of your right div compared to the floated spans?
...
<div class="item"><span>3</span></div>
<br style="clear: both; width: 100%;" />
<div class="item"><span>4</span></div>
...
do let us know if you find a solution
Suzy
[edited by: SuzyUK at 10:58 am (utc) on Oct. 3, 2006]
Style changes:
#rightdiv, .item{
margin: 5px;
border: 1px solid #000;
width: 180px;
}.item {
height:50px;
display:-moz-inline-box;
display: inline-block;
}
HTML changes:
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
