centering two divs

red wrote:

That works too, and it avoids absolute positioning. But now I'm
wondering why I had such a problem in the first place. I thought the
floated div was ignoring the wrapper. I guess not.
The code below is how I would normally do this, and now it works. I must
have done it wrong somehow. Yours lets the window get smaller before the
#text jumps to the bottom, which is good.
#main{width:90%;margin:auto;}
#side{float:left;width:25%;}
#text{float:left; background:#ffffff; width:65%;}

You already specified the width of #main to be 90% of which 25% is #side
and the balance is the width of #text.
Giving #text a width of 65%, the centering is off. Give #main
border:1px solid red; and you will see the difference clearly.
If you wish to reduce the width of #text and keep the centering, you
should alter the width of #main.

--
Gus

Gus Richter wrote:

red wrote:

That works too, and it avoids absolute positioning. But now I'm
wondering why I had such a problem in the first place. I thought the
floated div was ignoring the wrapper. I guess not.
The code below is how I would normally do this, and now it works. I
must have done it wrong somehow. Yours lets the window get smaller
before the #text jumps to the bottom, which is good.
#main{width:90%;margin:auto;}
#side{float:left;width:25%;}
#text{float:left; background:#ffffff; width:65%;}


You already specified the width of #main to be 90% of which 25% is #side
and the balance is the width of #text.
Giving #text a width of 65%, the centering is off. Give #main border:1px
solid red; and you will see the difference clearly.
If you wish to reduce the width of #text and keep the centering, you
should alter the width of #main.

I guess you are referring to the fact that 25%+ 65% only = %90. I would

make 25% + 75% but then the divs are not side by side. Neither are they
when I leave off the 65%, because then it is %100.

Your solution where you give the second dive a 25% margin instead of
floating it works fine and I'm happy to use it. Although mine is more
straightforward,and might be tweaked, it seems to be a pain in the ass.

red wrote:

Gus Richter wrote:

red wrote:

That works too, and it avoids absolute positioning. But now I'm
wondering why I had such a problem in the first place. I thought the
floated div was ignoring the wrapper. I guess not.
The code below is how I would normally do this, and now it works. I
must have done it wrong somehow. Yours lets the window get smaller
before the #text jumps to the bottom, which is good.
#main{width:90%;margin:auto;}
#side{float:left;width:25%;}
#text{float:left; background:#ffffff; width:65%;}



You already specified the width of #main to be 90% of which 25% is
#side and the balance is the width of #text.
Giving #text a width of 65%, the centering is off. Give #main
border:1px solid red; and you will see the difference clearly.
If you wish to reduce the width of #text and keep the centering, you
should alter the width of #main.

I guess you are referring to the fact that 25%+ 65% only = %90. I would
make 25% + 75% but then the divs are not side by side. Neither are they
when I leave off the 65%, because then it is %100.

Your solution where you give the second dive a 25% margin instead of
floating it works fine and I'm happy to use it. Although mine is more
straightforward,and might be tweaked, it seems to be a pain in the ass.

No, I'm sorry that I did not make myself clear. What I tried to point
out is that #text is actually the width of #main and the *apparent*
width of #text is 65% only because of the floated #side which takes up
the 25%. By you adding width:65%; to #text, you are not declaring
(65%*100%) width, but 65%(65%*100%) width, which essentially, in this
case with this percentage value, acts as though you applied a negative
margin to #text. #main, although still centered as before and retaining
its left margin position, has its *seemingly* right side shortened,
(actually the width of #text is shortened) resulting in the *visual*
loss of centering for #main. [This does take a full understanding of
floats, I'm afraid.]

You probably added the width:65%; to #text thinking that I had
forgotten it and that it should be there. You were mistaken. I did not
include it intentionally.

As I said, add border:1px solid red; to #main and you will see the
difference as you look at it with and without your added width:65%; to
#text.

--
Gus

Gus Richter wrote:

red wrote:

Gus Richter wrote:

red wrote:

That works too, and it avoids absolute positioning. But now I'm
wondering why I had such a problem in the first place. I thought the
floated div was ignoring the wrapper. I guess not.
The code below is how I would normally do this, and now it works. I
must have done it wrong somehow. Yours lets the window get smaller
before the #text jumps to the bottom, which is good.
#main{width:90%;margin:auto;}
#side{float:left;width:25%;}
#text{float:left; background:#ffffff; width:65%;}




You already specified the width of #main to be 90% of which 25% is
#side and the balance is the width of #text.
Giving #text a width of 65%, the centering is off. Give #main
border:1px solid red; and you will see the difference clearly.
If you wish to reduce the width of #text and keep the centering, you
should alter the width of #main.

I guess you are referring to the fact that 25%+ 65% only = %90. I
would make 25% + 75% but then the divs are not side by side. Neither
are they when I leave off the 65%, because then it is %100.

Your solution where you give the second dive a 25% margin instead of
floating it works fine and I'm happy to use it. Although mine is more
straightforward,and might be tweaked, it seems to be a pain in the ass.


No, I'm sorry that I did not make myself clear. What I tried to point
out is that #text is actually the width of #main and the *apparent*
width of #text is 65% only because of the floated #side which takes up
the 25%. By you adding width:65%; to #text, you are not declaring
(65%*100%) width, but 65%(65%*100%) width, which essentially, in this
case with this percentage value, acts as though you applied a negative
margin to #text. #main, although still centered as before and retaining
its left margin position, has its *seemingly* right side shortened,
(actually the width of #text is shortened) resulting in the *visual*
loss of centering for #main. [This does take a full understanding of
floats, I'm afraid.]

You probably added the width:65%; to #text thinking that I had
forgotten it and that it should be there.

No I didn't- I used your code exactly to finish my page- you can see it
here:http:cartdini.tv/newindex.php That was very helpful.

It works good but in my last post I was just trying to figure out why it
was the way it was. I still don't get it. I just don't understand divs.
I write a couple divs, and they never do what I expect them to do. Even
when I think I understand them, then next page I write will act totally
different from my understanding. This has happened over and over again.
I switch my understanding back and forth, and just when I think it
makes sense, I write another page and I'm totally baffled again. I
experiment for hours and hours and read books and webpages over and over
again and it drives my crazy. This had been going on for years and I'm
getting pretty depressed. So thanks for trying but I don't understand
what you've written. I guess all I can do is post examples and ask how
do I do this or that. I don't like it, in fact I hate it, but since I'm
apparently too stupid to actually understand divs I don't see any
alternative.

You were mistaken. I did not
include it intentionally.

As I said, add border:1px solid red; to #main and you will see the
difference as you look at it with and without your added width:65%; to
#text.

red wrote:

I used your code exactly to finish my page- you can see it
here:http:cartdini.tv/newindex.php That was very helpful.

http://cardini.tv/newindex.php is the correct one.
It looks very nice, congrats.

It works good but in my last post I was just trying to figure out why it
was the way it was. I still don't get it. I just don't understand divs.

Your question was about floats, which I skipped over. I'll try to help:
A floated item will float to the extreme left (I'll use left, although
it may also be right), out of flow, of whichever is the parent block,
but at the vertical point of its inclusion. If it is not inside a div,
it will flow to the left of the viewport. If it is within a div, it
flows, out of flow, to the extreme left edge of this container div. Out
of flow means that it presents no width/height to its container. A
subsequent (non-floated) element to the floated item, will flow around
the floated item. This is evident when the subsequent element is
paragraph (<p>) text. The subsequent element will attempt to place
itself into the leftover space/width of the parent block less the width
of the floated item. If the subsequent element is a div (or an image,
etc.) with extended height beyond the height of the floated item, this
div will not flow around the floated item, but continue to extend
downward. If the div has a width greater than the available width beside
the floated item, the div will flow to the point where it will fit which
will be below the floated item and to its left edge.

I write a couple divs, and they never do what I expect them to do. Even
when I think I understand them, then next page I write will act totally
different from my understanding. This has happened over and over again.
I switch my understanding back and forth, and just when I think it
makes sense, I write another page and I'm totally baffled again. I
experiment for hours and hours and read books and webpages over and over
again and it drives my crazy. This had been going on for years and I'm
getting pretty depressed. So thanks for trying but I don't understand
what you've written.

Sorry that I have failed. It was my best shot.
Hopefully the stuff I wrote above will make sense.

--
Gus

Gus Richter wrote:

red wrote:

I used your code exactly to finish my page- you can see it
here:http:cartdini.tv/newindex.php That was very helpful.


http://cardini.tv/newindex.php is the correct one.
It looks very nice, congrats.

Thank you, That's encouraging.

It works good but in my last post I was just trying to figure out why
it was the way it was. I still don't get it. I just don't understand
divs.


Your question was about floats, which I skipped over. I'll try to help:
A floated item will float to the extreme left (I'll use left, although
it may also be right), out of flow, of whichever is the parent block,
but at the vertical point of its inclusion. If it is not inside a div,
it will flow to the left of the viewport. If it is within a div, it
flows, out of flow, to the extreme left edge of this container div. Out
of flow means that it presents no width/height to its container. A
subsequent (non-floated) element to the floated item, will flow around
the floated item. This is evident when the subsequent element is
paragraph (<p>) text. The subsequent element will attempt to place
itself into the leftover space/width of the parent block less the width
of the floated item. If the subsequent element is a div (or an image,
etc.) with extended height beyond the height of the floated item, this
div will not flow around the floated item, but continue to extend
downward. If the div has a width greater than the available width beside
the floated item, the div will flow to the point where it will fit which
will be below the floated item and to its left edge.

That sounds pretty informative but I'm gonna have to read it like ten
times. I recognize the example you posted as the way to do columns. I
used to know that but I didn't realize I was making columns, strictly
speaking. Its more of a data table. I'm trying to do
http://cardini.tv/articles only with data from a database. I'm pretty
sure it can be done with divs.
Thanks everyone for the links and the info, I think I can figure it
out from the info you have posted.

I write a couple divs, and they never do what I expect them to do.
Even when I think I understand them, then next page I write will act
totally different from my understanding. This has happened over and
over again. I switch my understanding back and forth, and just when I
think it makes sense, I write another page and I'm totally baffled
again. I experiment for hours and hours and read books and webpages
over and over again and it drives my crazy. This had been going on for
years and I'm getting pretty depressed. So thanks for trying but I
don't understand what you've written.


Sorry that I have failed. It was my best shot.
Hopefully the stuff I wrote above will make sense.

Its not you, its me. I'm in a fog. I just need to focus on this once and
for all, and you've really been a big help.