Pat A., Regarding the floats, such as: .column2a {width: 50%; float: left;} .column2b {width: 50%; float: left;} How do I push content below to stay down (rather than floating to the right)? Having to use 50 some paragraph tags ... because multiple br tags won't keep the rest of the page down. Tried clear but not sure I used the right wording. Ideas? Judy
Judy, I'm obviously not Pat A, but you require to clear the floats as per:- https://www.w3schools.com/css/css_float.asp Barry On 16/08/2018 07:41, JFlorian wrote: > Pat A., > > Regarding the floats, such as: > .column2a {width: 50%; float: left;} > .column2b {width: 50%; float: left;} > > > How do I push content below to stay down (rather than floating to the > right)? > > Having to use 50 some paragraph tags ... because multiple br tags won't > keep the rest of the page down. > > Tried clear but not sure I used the right wording. > > Ideas? > > Judy >
Pat A. & Barry, I had tried the clear but text was still wonky in Normal View in Frontpage2000. Same when I tried it again after you both posted. Put the page through validator. No errors. As well, though, a simple header using img float left is also off. The words beside the pic won't stay where it belongs, halfway between the height of the pic. Right now, the words. General Information are hugging the bottom right corner of the pic, both in Fp and in Browser Preview in Chrome. It's simply: <.p><.img class="imglft" src="../../general-info/5ws.jpg" width="323" height="156" ALT="5 Ws Who What When Where Why">General Information</p> <.div class="clear:left"></div> Maddening!
On 16/08/2018 13:34, JFlorian wrote: > I had tried the clear but text was still wonky in Normal View in > Frontpage2000. Same when I tried it again after you both posted. Judy, As you well know, when you are using tables, the vertical alignment of text in a cell is an easy feat, i.e. <!--// <td> some text...</td> //--> ...and the text will be in the "middle" of the cell. However, it can also be aligned using - style="vertical-align:middle" This simplicity is lost when using divs, other than when using - div { height: 200px; display: table-cell; vertical-align: middle; } When you are floating a div, it doesn't want to be told to also display: table-cell, so that functionality is not available. The next method is to wrap your text in a <p> tag and use the following styles - div p { position: relative; top: 50%; } ... which pushes the top of the text to 50% of the height in the div; still not vertically aligned in the middle. The trick that will make it do what you want is the following:- div { float: right; width: 400px; height: 200px; } div p { position: relative; top: 50%; transform: translateY(-50%); } .... which calculates the height of the contents in the <p> tag and moves the text upward by 50% of that height, i.e. the text is vertically aligned in the "middle". Now, this wont show correctly in Frontpage, but in any modern browser it will. The following example will also show you - check the source code. http://countjustonce.com/test/florian-test-float.html Barry