Divs side by side

#1

I was trying to figure out how to get multiple divs to sit side by side in a
parent div. I can get that to work fine with float BUT then I cannot get the
parent div to have a border that shows. The idea is that the divs might
contain an image and I'd like them to be on the same line regardless of
size. So, without float, is it possible to get multiple divs on one line
where the parent div will hold a border that contains them all?

Thanks

-S

#2

Steffan A. Cline wrote:

Quote:

I was trying to figure out how to get multiple divs to sit side by side in a
parent div. I can get that to work fine with float BUT then I cannot get the
parent div to have a border that shows. The idea is that the divs might
contain an image and I'd like them to be on the same line regardless of
size. So, without float, is it possible to get multiple divs on one line
where the parent div will hold a border that contains them all?

Wow, didn't bother to search the NG did you?

The parent is not supposed to expand to contain floated children. You
have two options...

Apply overflow: hidden on parent

Insert a clearing element with the parent and after the floated siblings.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

#3

In article <C3940A36.951E2%steffan (AT) hldns (DOT) com>,
"Steffan A. Cline" <steffan (AT) hldns (DOT) com> wrote:

Quote:

I was trying to figure out how to get multiple divs to sit side by side in a
parent div. I can get that to work fine with float BUT then I cannot get the
parent div to have a border that shows. The idea is that the divs might
contain an image and I'd like them to be on the same line regardless of
size. So, without float, is it possible to get multiple divs on one line
where the parent div will hold a border that contains them all?

Maybe this draft of an effort to explain some things might help
you?

http://netweaver.com.au/floatHouse/page3.html

You can make the parent see the floats and develop height and get
the borders to appear as you want by various means.

1. Put in lots of normal content into the parent container. Try
it and see, put in a whole lot of text after (say) the floats.

2. Add {overflow: hidden} to #container.

3. Add a small amount of content in an element just before
closing the parent and clear the element.

4. Add an empty clearing div just before closing the parent for
example, <div style="clear: left;}

--
dorayme

#4

dorayme wrote:

Quote:

In article <C3940A36.951E2%steffan (AT) hldns (DOT) com>,
"Steffan A. Cline" <steffan (AT) hldns (DOT) com> wrote:

I was trying to figure out how to get multiple divs to sit side by side in a
parent div. I can get that to work fine with float BUT then I cannot get the
parent div to have a border that shows. The idea is that the divs might
contain an image and I'd like them to be on the same line regardless of
size. So, without float, is it possible to get multiple divs on one line
where the parent div will hold a border that contains them all?

Maybe this draft of an effort to explain some things might help
you?

http://netweaver.com.au/floatHouse/page3.html

You can make the parent see the floats and develop height and get
the borders to appear as you want by various means.

1. Put in lots of normal content into the parent container. Try
it and see, put in a whole lot of text after (say) the floats.

2. Add {overflow: hidden} to #container.

Doesn't work in IE.

Quote:

3. Add a small amount of content in an element just before
closing the parent and clear the element.

You might as well just do the below.

Quote:

4. Add an empty clearing div just before closing the parent for
example, <div style="clear: left;}

That's always worked for me, although I usually clear both. Not that
I wanted a border on the parent...

Jeff

Quote:

#5

In article <13nlirg4njc8g27 (AT) corp (DOT) supernews.com>,
Jeff <jeff (AT) spam_me_not (DOT) com> wrote:

Quote:

dorayme wrote:
In article <C3940A36.951E2%steffan (AT) hldns (DOT) com>,
"Steffan A. Cline" <steffan (AT) hldns (DOT) com> wrote:

I was trying to figure out how to get multiple divs to sit side by side in
a
parent div. I can get that to work fine with float BUT then I cannot get
the
parent div to have a border that shows. The idea is that the divs might
contain an image and I'd like them to be on the same line regardless of
size. So, without float, is it possible to get multiple divs on one line
where the parent div will hold a border that contains them all?

Maybe this draft of an effort to explain some things might help
you?

http://netweaver.com.au/floatHouse/page3.html

You can make the parent see the floats and develop height and get
the borders to appear as you want by various means.

1. Put in lots of normal content into the parent container. Try
it and see, put in a whole lot of text after (say) the floats.

2. Add {overflow: hidden} to #container.

Doesn't work in IE.

Which IE? And exactly what does not work please? In IE6
containers 'see' their floats as mentioned at
http://netweaver.com.au/floatHouse/ and grow height for them.
Look especially at the appendix to page 5 (it is deeper in the
appendix in a screenshot link):

<http://netweaver.com.au/floatHouse/a...ledScreenshots
5_1.html>

or

http://tinyurl.com/346wyf

and see the bottom of the page. There is no need here for
overflow anything - the bug in buggy IE works benignly here (if
that is the look what you want).

--
dorayme

#6

dorayme wrote:

Quote:

In article <13nlirg4njc8g27 (AT) corp (DOT) supernews.com>,
Jeff <jeff (AT) spam_me_not (DOT) com> wrote:

dorayme wrote:
In article <C3940A36.951E2%steffan (AT) hldns (DOT) com>,
"Steffan A. Cline" <steffan (AT) hldns (DOT) com> wrote:

I was trying to figure out how to get multiple divs to sit side by side in
a
parent div. I can get that to work fine with float BUT then I cannot get
the
parent div to have a border that shows. The idea is that the divs might
contain an image and I'd like them to be on the same line regardless of
size. So, without float, is it possible to get multiple divs on one line
where the parent div will hold a border that contains them all?

Maybe this draft of an effort to explain some things might help
you?

http://netweaver.com.au/floatHouse/page3.html

You can make the parent see the floats and develop height and get
the borders to appear as you want by various means.

1. Put in lots of normal content into the parent container. Try
it and see, put in a whole lot of text after (say) the floats.

2. Add {overflow: hidden} to #container.
Doesn't work in IE.

Which IE?

IE 6.0 windows.

And exactly what does not work please?

No border. Wasn't that the thread? Note the overflow: hidden worked in
Moz 2.0.0.11 windows, Didn't check other browsers.

In IE6

Quote:

containers 'see' their floats as mentioned at
http://netweaver.com.au/floatHouse/ and grow height for them.
Look especially at the appendix to page 5 (it is deeper in the
appendix in a screenshot link):

This seems to be a mix of inline and float. I didn't know we were
discussing that. Why would you want to do that?

Quote:

http://netweaver.com.au/floatHouse/a...ledScreenshots
5_1.html

BTW, if you write that link as:

<URL:
http://netweaver.com.au/floatHouse/a...nshots5_1.html />

You should get around the link wrap problem. YMMV.

Quote:

or

http://tinyurl.com/346wyf

and see the bottom of the page. There is no need here for
overflow anything

That makes sense to me.

Since we are talking floats, who has a good resource on tableless
layout? I haven't seen anything yet that really deals with this well,
but I am see a number of large mainstream sites, such as cnn.com and
washingtonpost.com have gone tableless. I can not decipher the html and
css though. There's just too much crap in there...

Jeff

- the bug in buggy IE works benignly here (if

Quote:

that is the look what you want).

#7

In article <13nlpgk940itr66 (AT) corp (DOT) supernews.com>,
Jeff <jeff (AT) spam_me_not (DOT) com> wrote:

Quote:

dorayme wrote:

Which IE?

IE 6.0 windows.

And exactly what does not work please?

No border. Wasn't that the thread? Note the overflow: hidden worked in
Moz 2.0.0.11 windows, Didn't check other browsers.

In IE6
containers 'see' their floats as mentioned at
http://netweaver.com.au/floatHouse/ and grow height for them.
Look especially at the appendix to page 5 (it is deeper in the
appendix in a screenshot link):

This seems to be a mix of inline and float. I didn't know we were
discussing that. Why would you want to do that?

We were discussing the cause of a lack of border. It is due to

parent not growing height in non IE browsers. You fix the problem
by doing what Jonathan Little said earlier and what I said and
say in the above link. I will be shortly adding some things to
that tale but you are welcome to read it carefully and
forensically, to put aside everything in your life to do so,
forgo holidays, marriage, other study.

Quote:

http://netweaver.com.au/floatHouse/a...ledScreenshots
5_1.html

BTW, if you write that link as:

URL:
http://netweaver.com.au/floatHouse/a...nshots5_1.html /

You should get around the link wrap problem. YMMV.

Actually, thanks for that. Some people here who do not like
tinyURLs and have no trouble at all with links in NGs because
they have the right newsreaders with the right settings and like
that. But other poor schmucks like me are constantly troubled. I
will try your scheme until someone tells me better. I will try to
remember it?

Quote:

or

http://tinyurl.com/346wyf

and see the bottom of the page. There is no need here for
overflow anything

That makes sense to me.

But if it makes sense to you, and you can *see* the border in IE6

as in screenshot referenced above, then why are you talking about
"overflow: hidden" not working in IE6?

--
dorayme

#8

dorayme wrote:

Quote:

In article <13nlpgk940itr66 (AT) corp (DOT) supernews.com>,
Jeff <jeff (AT) spam_me_not (DOT) com> wrote:

dorayme wrote:

Which IE?
IE 6.0 windows.

And exactly what does not work please?

No border. Wasn't that the thread? Note the overflow: hidden worked in
Moz 2.0.0.11 windows, Didn't check other browsers.

In IE6
containers 'see' their floats as mentioned at
http://netweaver.com.au/floatHouse/ and grow height for them.
Look especially at the appendix to page 5 (it is deeper in the
appendix in a screenshot link):
This seems to be a mix of inline and float. I didn't know we were
discussing that. Why would you want to do that?

We were discussing the cause of a lack of border. It is due to
parent not growing height in non IE browsers. You fix the problem
by doing what Jonathan Little said earlier and what I said and
say in the above link. I will be shortly adding some things to
that tale but you are welcome to read it carefully and
forensically, to put aside everything in your life to do so,
forgo holidays, marriage, other study.
http://netweaver.com.au/floatHouse/a...ledScreenshots
5_1.html
BTW, if you write that link as:

URL:
http://netweaver.com.au/floatHouse/a...nshots5_1.html /

You should get around the link wrap problem. YMMV.

Actually, thanks for that. Some people here who do not like
tinyURLs and have no trouble at all with links in NGs because
they have the right newsreaders with the right settings and like
that. But other poor schmucks like me are constantly troubled. I
will try your scheme until someone tells me better. I will try to
remember it?

I think I got that from either Allan or Jukka... Is Allan Flavell
still around?

Quote:

or

http://tinyurl.com/346wyf

and see the bottom of the page. There is no need here for
overflow anything
That makes sense to me.

But if it makes sense to you, and you can *see* the border in IE6
as in screenshot referenced above, then why are you talking about
"overflow: hidden" not working in IE6?

Hmmm, we seem to have gotten twisted around.

If you just use overflow: hidden, it does not work in IE6 and you
cannot see the border (the border is collapsed on top). The other
methods work, although I didn't try adding more content. That really was
my only point. I tested that here as I had not thought of the overflow
hidden, and when I noticed it failed in IE, I replied...

Anyhow, I've got an idea on how to "fix" my main issue on float: left
columns, that being when the divs are uneven heights (inevitable) and
you want them to appear to be the same height (like if you are coloring
backgrounds or putting a border line between them).

Jeff

Quote:

#9

In article <13nmoir3mqtgm09 (AT) corp (DOT) supernews.com>,
Jeff <jeff (AT) spam_me_not (DOT) com> wrote:

Quote:

BTW, if you write that link as:

URL:
http://netweaver.com.au/floatHouse/a...nshots5_1.html
/

You should get around the link wrap problem. YMMV.

Actually, thanks for that.

I think I got that from either Allan or Jukka... Is Allan Flavell
still around?

Latter is not I understand. Our loss. Jukka can't go because he
is not human, he is an institution.

Quote:

or

http://tinyurl.com/346wyf

and see the bottom of the page. There is no need here for
overflow anything
That makes sense to me.

But if it makes sense to you, and you can *see* the border in IE6
as in screenshot referenced above, then why are you talking about
"overflow: hidden" not working in IE6?

Hmmm, we seem to have gotten twisted around.

If you just use overflow: hidden, it does not work in IE6 and you
cannot see the border

But, Jeff, my point is why would you use overflow in IE for
showing the border of a container in the situation we are
discussing since the problem does not show up in IE6 in the first
place (As can be seen from an actual screenshot at the bottom of
<URL:http://tinyurl.com/346wyf />? Are you saying that if you do
use overflow, then what was not even a problem in IE suddenly
becomes a problem? Now that would be interesting to me.

Here is a test, would you kindly do me a favour, I cannot at the
moment look at Windows IE, go to

<URL: http://netweaver.com.au/floatHouse/page8.html />

and tell me if you are not seeing the border on Figs 2, 3 and 4
in Win IE? There may well be an issue I am not aware of. (There
are several jigsaw pieces missing still from my Theory of
Everything <g>)

--
dorayme