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> 10  1822 
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>
>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.
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>
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>
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.
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>
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>
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
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.
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.
This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Peter Diedrich |
last post by:
The site design is pretty simple:
============================================
| Head |
============================================
| | ...
|
by: Tom Schmitt |
last post by:
I tried getting a complicated, multi-column box design on it's way on
my web-site and it works out fine on the IE6. Because I'm a relative
beginner to all stuff related to CSS and am used to...
|
by: Neal |
last post by:
Patrick Griffiths weighs in on the CSS vs table layout debate in his blog
entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A
quite good article.
|
by: Doc |
last post by:
I've read in a couple of different places including the archives of this
forum that html doesn't allow you to precisely dictate the position of an
image, but I found this command (again in the...
|
by: Greg Smith |
last post by:
Hello, I have been given a programming task that falls into the "impossible"
category with my current skill set. I am hoping somebody out there knows
how to do this and can save my b-t.
I...
|
by: Volker Lenhardt |
last post by:
For a QApplication (PyQt) on the small screen of my Zaurus 5500 PDA I
try to layout my data output in a QScrollView as the central widget. I'd
prefer to use QGridLayout, but cannot add it to the...
|
by: Luke |
last post by:
Hi.
I am trying to make correct layout, here is an example of (dynamically
generated content via jsp):
http://localhost/www/layout.htm
Most outer div is positioned absolute (if not then it...
|
by: Ed Sproull [MSFT] |
last post by:
First I'm pretty new to ASP.NET and I'm having a simple problem. I have
small website with a header, sidebar and the the content. I want my content
to appear beside my sidebar which seems to be a...
|
by: brave1979 |
last post by:
Please check out my javascript library that allows you to create any
layout for your web page, nested as deep as you like, adjusting to
width and height of a browser window. You just describe it in...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
| |
