I have two divs. The left div is floated left and the right div is floated
right. If the left div contains a single line, the left and right divs are
on the same line (obviously). But...the left div content is dynamic and its
content can occupy two or three lines, When it contains more than one line,
the right div is positioned on the top line of the left div content. I need
(want) it to be positioned on the last (lowest) line of the left div
content. How do I do it?
Example:
I get:
|Left div| |right div|
| |
I want:
|Left div|
| | |right div|
--
Ed Jay (remove 'M' to reply by email)
Win the War Against Breast Cancer.
Knowing the facts could save your life. http://www.breastthermography.info 7  1466 
On 2008-08-27, Ed Jay <ed***@aes-intl.comwrote:
I have two divs. The left div is floated left and the right div is floated
right. If the left div contains a single line, the left and right divs are
on the same line (obviously). But...the left div content is dynamic and its
content can occupy two or three lines, When it contains more than one line,
the right div is positioned on the top line of the left div content. I need
(want) it to be positioned on the last (lowest) line of the left div
content. How do I do it?
Example:
I get:
|Left div| |right div|
| |
I want:
|Left div|
| | |right div|
clear: left and margin-top: -1.1em on the right hand div.
Ben C wrote:
>On 2008-08-27, Ed Jay <ed***@aes-intl.comwrote:
>I have two divs. The left div is floated left and the right div is floated
right. If the left div contains a single line, the left and right divs are
on the same line (obviously). But...the left div content is dynamic and its
content can occupy two or three lines, When it contains more than one line,
the right div is positioned on the top line of the left div content. I need
(want) it to be positioned on the last (lowest) line of the left div
content. How do I do it?
Example:
I get:
|Left div| |right div|
| |
I want:
|Left div|
| | |right div|
clear: left and margin-top: -1.1em on the right hand div.
Thank you. Very much!
Your solution almost worked, but the lines didn't quite align. Ended up with
setting the right margin to +1em, without the clear left, and it lined up
OK. This works fine for two lines of content, but what if the content
occupies three or more lines?
--
Ed Jay (remove 'M' to reply by email)
Win the War Against Breast Cancer.
Knowing the facts could save your life. http://www.breastthermography.info
On 2008-08-27, Ed Jay <ed***@aes-intl.comwrote:
Ben C wrote:
>>On 2008-08-27, Ed Jay <ed***@aes-intl.comwrote:
>>I have two divs. The left div is floated left and the right div is floated
right. If the left div contains a single line, the left and right divs are
on the same line (obviously). But...the left div content is dynamic and its
content can occupy two or three lines, When it contains more than one line,
the right div is positioned on the top line of the left div content. I need
(want) it to be positioned on the last (lowest) line of the left div
content. How do I do it?
Example:
I get:
|Left div| |right div|
| |
I want:
|Left div|
| | |right div|
clear: left and margin-top: -1.1em on the right hand div.
Thank you. Very much!
Your solution almost worked, but the lines didn't quite align.
I thought you might ask that.
Ended up with setting the right margin to +1em, without the clear
You mean the top margin on the right div :)
left, and it lined up OK. This works fine for two lines of content,
but what if the content occupies three or more lines?
Better to go with the original negative margin, but also set line-height:
1.1em on the right div.
Ben C wrote:
>On 2008-08-27, Ed Jay <ed***@aes-intl.comwrote:
>Ben C wrote:
>>>On 2008-08-27, Ed Jay <ed***@aes-intl.comwrote:
I have two divs. The left div is floated left and the right div is floated
right. If the left div contains a single line, the left and right divs are
on the same line (obviously). But...the left div content is dynamic and its
content can occupy two or three lines, When it contains more than one line,
the right div is positioned on the top line of the left div content. I need
(want) it to be positioned on the last (lowest) line of the left div
content. How do I do it?
Example:
I get:
|Left div| |right div|
| |
I want:
|Left div|
| | |right div|
clear: left and margin-top: -1.1em on the right hand div.
Thank you. Very much!
Your solution almost worked, but the lines didn't quite align.
I thought you might ask that.
>Ended up with setting the right margin to +1em, without the clear
You mean the top margin on the right div :)
Yup. :-)
>
>left, and it lined up OK. This works fine for two lines of content,
but what if the content occupies three or more lines?
Better to go with the original negative margin, but also set line-height:
1.1em on the right div.
I finally grasped the logic. Because of a 5px bottom margin on both divs, I
ended up with clear:left;marg in-top:-0.5em; Works great. Thanks.
--
Ed Jay (remove 'M' to reply by email)
Win the War Against Breast Cancer.
Knowing the facts could save your life. http://www.breastthermography.info
Ed Jay wrote:
>Ben C wrote:
>>On 2008-08-27, Ed Jay <ed***@aes-intl.comwrote:
>>Ben C wrote:
On 2008-08-27, Ed Jay <ed***@aes-intl.comwrote:
I have two divs. The left div is floated left and the right div is floated
right. If the left div contains a single line, the left and right divs are
on the same line (obviously). But...the left div content is dynamic and its
content can occupy two or three lines, When it contains more than one line,
the right div is positioned on the top line of the left div content. I need
(want) it to be positioned on the last (lowest) line of the left div
content. How do I do it?
>
Example:
>
I get:
>|Left div| |right div|
>| |
>
I want:
>|Left div|
>| | |right div|
clear: left and margin-top: -1.1em on the right hand div.
Thank you. Very much!
Your solution almost worked, but the lines didn't quite align.
I thought you might ask that.
>>Ended up with setting the right margin to +1em, without the clear
You mean the top margin on the right div :)
Yup. :-)
>>
>>left, and it lined up OK. This works fine for two lines of content,
but what if the content occupies three or more lines?
Better to go with the original negative margin, but also set line-height:
1.1em on the right div.
I finally grasped the logic. Because of a 5px bottom margin on both divs, I
ended up with clear:left;marg in-top:-0.5em; Works great. Thanks.
Errr....time for more coffee. I meant -1.5em.
Thanks again.
--
Ed Jay (remove 'M' to reply by email)
Win the War Against Breast Cancer.
Knowing the facts could save your life. http://www.breastthermography.info
On 2008-08-27, Ed Jay <ed***@aes-intl.comwrote:
[...]
>>I finally grasped the logic. Because of a 5px bottom margin on both divs, I
ended up with clear:left;marg in-top:-0.5em; Works great. Thanks.
Errr....time for more coffee. I meant -1.5em.
That only works though if 0.5em = 5px, i.e. the font-size is 10px. Users
often override the font-size even if you set it, especially if you set
it to something as small as 10px.
Specifying the bottom margin as 0.5em will be more robust.
Ben C wrote:
>On 2008-08-27, Ed Jay <ed***@aes-intl.comwrote:
[...]
>>>I finally grasped the logic. Because of a 5px bottom margin on both divs, I
ended up with clear:left;marg in-top:-0.5em; Works great. Thanks.
Errr....time for more coffee. I meant -1.5em.
That only works though if 0.5em = 5px, i.e. the font-size is 10px. Users
often override the font-size even if you set it, especially if you set
it to something as small as 10px.
Specifying the bottom margin as 0.5em will be more robust.
I'm one step ahead...already changed the bottom margin to .5em. :-)
--
Ed Jay (remove 'M' to reply by email)
Win the War Against Breast Cancer.
Knowing the facts could save your life. http://www.breastthermography.info This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Ney André de Mello Zunino |
last post by:
Hello.
The issue is quite known: you have a block-level container holding a
set of floated elements and you need that the container's content
height take the floated elements' dimensions into consideration. E.g.:
<div class="images">
<div class="image"><img src="example1.png" width="160" height="120"
alt=""></div>
<div class="image"><img src="example2.png" width="160" height="120"
|
by: Mike Kozlowski |
last post by:
I have an absolutely positioned block on the top of my page, a block
floated left, and a third block in the normal flow. IE6 and Mozilla
1.4 disagree on where the floated block should be placed -- IE thinks
its top margin should be relative to the containing block (i.e., the
body), while Mozilla thinks it should be relative to the bottom of the
absolutely positioned block.
My instincts, of course, are to assume that Mozilla's correct --...
|
by: glutinous |
last post by:
I've looked at manuals and experimented until my brain's oozing out of
my ears, and I still can't figure out what I anticipate will prove to
be fairly basic css layout knowledge.
I'd be amazed if this was the first (or even if only the 100th) time
someone has asked about this sort of situation. So I apologise, not
least for the awkwardness of my attempt below to illustrate my
ignorance.
I could produce a table such as this...
|
by: Joy |
last post by:
Hi guys, I am in a tricky situation, I really really hope someone will help
me.
I got a layout with a main container and three colums inside.
Main container: 100% height; 90% width; float: left
First colum: 100% height; 200px width; float: left
Second colum: 100% height; 200px width; float: right
Third colum: 100% height
And here I stop, because nothing seems to work in order to set correctly
|
by: theo |
last post by:
Please,
Why is this wide 6px border showing up where it is. It's supposed to be
at the bottom of the page, inside of base div. I'm positioning wrong,
something needs to cleared or x-index specified, or something. HELP???
http://wholives.com/temp/cssr.htm
Thanks,
| | |
by: pasdecrap |
last post by:
The following code will produce similar results in IE6 and firefox
1.0.4
however the left margin in FF is 4 pixels and in IE it is 5.
Can anyone see why this is happening? I can't seem to figure it out!
TIA
Jeff
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
by: Eric Lindsay |
last post by:
I seem to be running into problems when I try viewing pages at my site
http://site.sheltersrus.com.au/ using this stylesheet
http://site.sheltersrus.com.au/sheltersrus.css in Internet Explorer 6.
While I still have several problems with the CSS, the one that mainly
concerns me is the sidebars on the left hand side overlay the main
content of the page. These are divs that float the sidebar left and the
main content right. I thought I had...
|
by: Bill Norton |
last post by:
I've been experimenting with floats, positioning and offsets (top, left, etc.) to see what happens when you mix the properties together.
All this may be old news to most of you, but it was extremely helpful to me. The results are summarized in this chart. In all these tests I was using a single child element inside a containing block. (I hope the formatting doesn't fall apart too badly when it's uploaded to a newsgroup.)
| Do Floats | Do...
|
by: aljamala |
last post by:
Hi,
I have a group of 5 tables laid out of the web page. 2 go on the left
side and 3 on the right. These tables retrieve data from the database
so the number of records (rows) returned varies.
So the problem I am having at the moment is that if the table gets
longer by one or two rows, all my alignment goes of out whack for the
other tables. Is there a way for example to place table #2 right after
table#1 ends?
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |
