By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,510 Members | 1,815 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,510 IT Pros & Developers. It's quick & easy.

Impossible DIV layout?

P: n/a
PW
I have a layout that I can not seem to make work. Using a float:right, I can
get the numbered items to wrap as desired around "rightdiv". The problem is,
this is a dynamic list, and "5" shouldn't come before "4" in the list. I
also want "6" to be aligned left.
So basically, 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>

Oct 2 '06 #1
Share this Question
Share on Google+
10 Replies


P: n/a
On 2006-10-02, PW <pw@anonymouswrote:
I have a layout that I can not seem to make work. Using a float:right, I can
get the numbered items to wrap as desired around "rightdiv". The problem is,
this is a dynamic list, and "5" shouldn't come before "4" in the list. I
also want "6" to be aligned left.
So basically, 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?
display: inline-block is just the thing for this, but it isn't supported
by Firefox (Opera does support it however).

Do the .item boxes actually need to be block boxes though? The other
option to get something close to what you might want is to make them
display: inline.

Otherwise you could use a table and set a rowspan on the rightdiv part.
><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>
Oct 2 '06 #2

P: n/a
PW
>I have a layout that I can not seem to make work. Using a float:right, I
>can
get the numbered items to wrap as desired around "rightdiv". The problem
is,
this is a dynamic list, and "5" shouldn't come before "4" in the list. I
also want "6" to be aligned left.
So basically, 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?

display: inline-block is just the thing for this, but it isn't supported
by Firefox (Opera does support it however).
You're right... display: inline-block would be perfect... if there was
cross-browser support.

Oct 2 '06 #3

P: n/a
PW wrote:
I have a layout that I can not seem to make work. Using a float:right, I can
get the numbered items to wrap as desired around "rightdiv". The problem is,
this is a dynamic list, and "5" shouldn't come before "4" in the list. I
also want "6" to be aligned left.
So basically, 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.
Au contraire. Try this:

<html>
<head>
<style>
#main {position:relative;left:100px;top:100px;width:400p x;padding-top:1px;}
#ItemWrapper {float:left;width:180px;margin:10px;}
..item {height:50px;width: 180px;margin-bottom:10px;}
#rightdiv {height: 150px;width: 180px;margin:10px 0 0 205px;}
#rightdiv, .item {border: 1px solid #000;}
</style>
</head>
<body>
<div id="main">
<div id="ItemWrapper">
<div class="item">1 All items 1-6 are in #ItemWrapper.</div>
<div class="item">2 #ItemWrapper is floated left.</div>
<div class="item">3 #main is the wrapper for everything and is ...</div>
<div class="item">4 ... positioned in anticipation for this need.</div>
<div class="item">5 A padding of 1px is applied to #main ...</div>
<div class="item">6 ... to prevent collapsing margins.</div>
</div>
<div id="rightdiv">This is #rightdiv and is not floated, but flows to
the right of

#ItemWrapper with a chosen left-margin of 205px for #rightdiv.</div>
</div>
</body>
</html>
Oct 3 '06 #4

P: n/a
On 2006-10-03, Gus Richter <gu********@netscape.netwrote:
PW wrote:
>I have a layout that I can not seem to make work. Using a float:right, I can
get the numbered items to wrap as desired around "rightdiv". The problem is,
this is a dynamic list, and "5" shouldn't come before "4" in the list. I
also want "6" to be aligned left.
So basically, 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.

Au contraire. Try this:
Couldn't that have been achieved pretty much with the original layout,
but by adding "clear: left" to the items?

As I understood it, the OP wanted the items to "flow" under the
rightdiv-- in other words, two items per line where there was room for
two, but with the additional constraint that they all remain aligned
with each vertically.
><html>
<head>
<style>
#main {position:relative;left:100px;top:100px;width:400p x;padding-top:1px;}
#ItemWrapper {float:left;width:180px;margin:10px;}
.item {height:50px;width: 180px;margin-bottom:10px;}
#rightdiv {height: 150px;width: 180px;margin:10px 0 0 205px;}
#rightdiv, .item {border: 1px solid #000;}
</style>
</head>
<body>
<div id="main">
<div id="ItemWrapper">
<div class="item">1 All items 1-6 are in #ItemWrapper.</div>
<div class="item">2 #ItemWrapper is floated left.</div>
<div class="item">3 #main is the wrapper for everything and is ...</div>
<div class="item">4 ... positioned in anticipation for this need.</div>
<div class="item">5 A padding of 1px is applied to #main ...</div>
<div class="item">6 ... to prevent collapsing margins.</div>
</div>
<div id="rightdiv">This is #rightdiv and is not floated, but flows to
the right of

#ItemWrapper with a chosen left-margin of 205px for #rightdiv.</div>
</div>
</body>
</html>
Oct 3 '06 #5

P: n/a
PW
As I understood it, the OP wanted the items to "flow" under the
rightdiv-- in other words, two items per line where there was room for
two, but with the additional constraint that they all remain aligned
with each vertically.
You understood correctly. The problem seems to be keeping left floating
elements "top-aligned" when they wrap around the right-side element.

Oct 3 '06 #6

P: n/a
PW
Just to clarify a little more...

I want the following behavior, but with the ability to specify width and
height of the elements in the "item" DIVs.

(Use Firefox to look at this... IE just vomits all over the screen.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#main {width: 350px;padding:0;margin:0;font-size:22px;}
#rightdiv {
border: 1px solid #000;
width: 160px;
float:right;
min-height: 50px;
margin-right: 15px;
}
..item{
display: inline;
line-height:40px;
}
..item a{
background-color:#9F3;
padding:5px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="main">
<div id="rightdiv"test <br>
</div>
<div class="item"><a href="#">11111111111111</a></div>
<div class="item"><a href="#">22222222222222</a></div>
<div class="item"><a href="#">33333333333333</a></div>
<div class="item"><a href="#">44444444444444</a></div>
<div class="item"><a href="#">55555555555555</a></div>
<div class="item"><a href="#">66666666666666</a></div>
</div>
</body>
</html>
Oct 3 '06 #7

P: n/a
Ben C wrote:
>
Couldn't that have been achieved pretty much with the original layout,
but by adding "clear: left" to the items?
No affect at all, although "clear:right" causes the items to get stacked
under the rightdiv.
As I understood it, the OP wanted the items to "flow" under the
rightdiv-- in other words, two items per line where there was room for
two, but with the additional constraint that they all remain aligned
with each vertically.
I found the description to be somewhat lacking and could not see the
sense in wrapping the items around the float, so I thought it was a
communication problem on the OP's part. My bad.

Your provided version is similar to mine. Mine works in Opera and Fx and
not too badly in IE:

<html>
<head>
<style>
#main {position:relative;left:100px;top:100px;width:400p x;}
#rightdiv {float:right;height: 150px;width: 180px;margin-right:10px;}
#rightdiv, .item {border: 1px solid #000;}
..item {height:50px;width:180px;margin:0 0 10px 10px;
display:inline-block;display:-moz-inline-box;}
</style>
</head>
<body>
<div id="main">
<div id="rightdiv">This is #rightdiv and is floated right.</div>
<div class="item">1 The 'items' are Not floated,</div>
<div class="item">2 but flowed with the</div>
<div class="item">3 shrinkwrapping effect</div>
<div class="item">4 just as</div>
<div class="item">5 desired.</div>
<div class="item">6</div>
</div>
</body>
</html>

Oct 3 '06 #8

P: n/a
On Tue, 3 Oct 2006, PW wrote:
I want the following behavior,
That's a bit vague. Couldn't you describe in words what it is that
you want, ideally with a screenshot? On Seamonkey (1.0.5), I'm seeing
a box "test", positioned partway across the viewport, and then, below
it, your six number boxes stacked vertically, positioned at the left.
On Opera (9.02) I get something quite different - which, rather
surprisingly, resembles what I got when I fired-up Firefox (Win
1.5.0.7). To say nothing of MesSIE. Behaviour in a narrow viewport,
or when the text size was zoomed up, was different again between the
various browsers.

So this design does not seem to be robust against the available
browsers. I'm guessing that you want some aspect(s) of what I was
seeing on Firefox or Opera, but it's not clear...
#main {width: 350px;padding:0;margin:0;font-size:22px;}
If we're talking about pages made for the WWW (and that's what this
group is meant to be about), then I would have to say that any design
which requires the main text to be sized in pixels is not really worth
any further consideration.

I'm surprised that you haven't noticed this attitude, expressed in
various strengths, from quite a number of regular contributors in
previous discussions.

It's also recommended to create a test case on a server accessible to
the questioner, and post its URL, rather than stuffing the source into
the posting. And to correct any validation errors *before* asking for
advice - this may or may not cure your problem, but either way, it is
demeaning to ask the contributors to fix trivial syntax problems which
you ought to have fixed for yourself first. I created my own test
case and fixed your syntax errors before producing the results which I
described above.

On a side issue, maybe it's just me, but I'm always deeply suspicious
of anyone who chooses XHTML 1.0 Transitional Appendix C. To my way of
thinking, the first priority in moving forwards from HTML Transitional
is to move to Strict. At the present time there's very little to be
gained by moving to XHTML, and a few benefits in staying with HTML.
Again I think you'll see this sort of opinion expressed in various
ways by quite a number of regular contributors to the www authoring
groups. I worry that quite a number of postings nowadays seem to be
drive-by postings from folks who surely can't have read the group to
which they are posting?

regards
Oct 3 '06 #9

P: n/a
PW
Thanks to Ben and Gus who replied with helpful suggestions that have
ultimately helped me craft a solution. Otherwise, this would have been a
waste. Your post reminds me of why I typically hate Usenet.
So this design does not seem to be robust against the available
browsers. I'm guessing that you want some aspect(s) of what I was
seeing on Firefox or Opera, but it's not clear...
When I said, "Use Firefox to look at this...", I thought that was clear
enough. Next time I post, I'll be sure to repeat it a few times, in case
that wasn't clear enough.
>#main {width: 350px;padding:0;margin:0;font-size:22px;}

If we're talking about pages made for the WWW (and that's what this
group is meant to be about), then I would have to say that any design
which requires the main text to be sized in pixels is not really worth
any further consideration.
First of all, I believe the fact that this is a contrived example has
escaped you. I did this, in part, so that I do not have to paste 3 times
the source in order to get my point across. A solution to my contrived
example will work just fine in the production, regardless of font size
preference . But in the interests of fairness, if I change the sizing to
exs, will I alienate anyone?
It's also recommended to create a test case on a server accessible to
the questioner, and post its URL, rather than stuffing the source into
the posting.
So far, this is the only worthwhile suggestion in your post. In retrospect,
I probably should have done this.
And to correct any validation errors *before* asking for
advice - this may or may not cure your problem, but either way, it is
demeaning to ask the contributors to fix trivial syntax problems which
you ought to have fixed for yourself first. I created my own test
case and fixed your syntax errors before producing the results which I
described above.
Had I committed any blatant validation errors in my fake code, one which
specifically caused a format problem, the chastising might have been
warranted. If you believe the solution to my problem lies in adding a TITLE
tag, then we might be on two different wavelengths. Perhaps I should
apologize to the two responders who managed to look past the glaring
syntactic obstacles long enough to figure out the gist of my question.
On a side issue, maybe it's just me, but I'm always deeply suspicious
of anyone who chooses ...
You know what wouldn't be helpful to my original problem? Launching into a
DOCTYPE debate...
I worry that quite a number of postings nowadays seem to be
drive-by postings from folks who surely can't have read the group to
which they are posting?
I found the group yesterday, after searching website resources for a few
days before that. I hate to break it to you, but most technical discussion
groups gain members when someone is looking for a solution to a problem.
There are the fringe members that like to roll around naked in brand new
RFCs, and ultimately find newsgroups of their own volition, but they are the
minority.
Oct 3 '06 #10

P: n/a
amen.

dont you just love these holier than thou assholes?

"PW" <pw@anonymouswrote in message
news:12*************@corp.supernews.com...
Thanks to Ben and Gus who replied with helpful suggestions that have
ultimately helped me craft a solution. Otherwise, this would have been a
waste. Your post reminds me of why I typically hate Usenet.
>So this design does not seem to be robust against the available
browsers. I'm guessing that you want some aspect(s) of what I was
seeing on Firefox or Opera, but it's not clear...

When I said, "Use Firefox to look at this...", I thought that was clear
enough. Next time I post, I'll be sure to repeat it a few times, in case
that wasn't clear enough.
>>#main {width: 350px;padding:0;margin:0;font-size:22px;}

If we're talking about pages made for the WWW (and that's what this
group is meant to be about), then I would have to say that any design
which requires the main text to be sized in pixels is not really worth
any further consideration.

First of all, I believe the fact that this is a contrived example has
escaped you. I did this, in part, so that I do not have to paste 3 times
the source in order to get my point across. A solution to my contrived
example will work just fine in the production, regardless of font size
preference . But in the interests of fairness, if I change the sizing to
exs, will I alienate anyone?
>It's also recommended to create a test case on a server accessible to
the questioner, and post its URL, rather than stuffing the source into
the posting.

So far, this is the only worthwhile suggestion in your post. In
retrospect, I probably should have done this.
>And to correct any validation errors *before* asking for
advice - this may or may not cure your problem, but either way, it is
demeaning to ask the contributors to fix trivial syntax problems which
you ought to have fixed for yourself first. I created my own test
case and fixed your syntax errors before producing the results which I
described above.

Had I committed any blatant validation errors in my fake code, one which
specifically caused a format problem, the chastising might have been
warranted. If you believe the solution to my problem lies in adding a
TITLE tag, then we might be on two different wavelengths. Perhaps I should
apologize to the two responders who managed to look past the glaring
syntactic obstacles long enough to figure out the gist of my question.
>On a side issue, maybe it's just me, but I'm always deeply suspicious
of anyone who chooses ...

You know what wouldn't be helpful to my original problem? Launching into
a DOCTYPE debate...
>I worry that quite a number of postings nowadays seem to be
drive-by postings from folks who surely can't have read the group to
which they are posting?

I found the group yesterday, after searching website resources for a few
days before that. I hate to break it to you, but most technical
discussion groups gain members when someone is looking for a solution to a
problem. There are the fringe members that like to roll around naked in
brand new RFCs, and ultimately find newsgroups of their own volition, but
they are the minority.


Oct 6 '06 #11

This discussion thread is closed

Replies have been disabled for this discussion.