Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Prevent text overlap in div with left and right positioned elements?
23 views
Skip to first unread message
Tuxedo
Apr 12, 2013, 2:42:41 PM4/12/13
to
The below makes a div in which the words "Ice Cream" appears on the left
and the words "Sign In" on the right.
<!DOCTYPE html>
...
#tidbits{
position:relative;
}
#right{
position: absolute;
right: 0;
}
#left{
/* ??? */
}
<div id="tidbits">
<span id="left">Ice Cream</span>
<span id="right">Sign In</span>
</div>
When narrowing the viewport to a bare minimum, the texts on left and right
will overlap each other, or actually, the right will overpal the left, due
to the absolute position of the right element.
Is there a way the right part can be made to drop below the left part just
before they would overlap, expanding the containing block vertically? In
other words, can the line be made to break at the point where the right
edge of the "...m</span>" would hit the left edge of the "<span
id="right">Sig.."?
Is it even possible, or could it be better done by some other HTML method?
Many thanks for any ideas!
Tuxedo
and the words "Sign In" on the right.
<!DOCTYPE html>
...
#tidbits{
position:relative;
}
#right{
position: absolute;
right: 0;
}
#left{
/* ??? */
}
<div id="tidbits">
<span id="left">Ice Cream</span>
<span id="right">Sign In</span>
</div>
When narrowing the viewport to a bare minimum, the texts on left and right
will overlap each other, or actually, the right will overpal the left, due
to the absolute position of the right element.
Is there a way the right part can be made to drop below the left part just
before they would overlap, expanding the containing block vertically? In
other words, can the line be made to break at the point where the right
edge of the "...m</span>" would hit the left edge of the "<span
id="right">Sig.."?
Is it even possible, or could it be better done by some other HTML method?
Many thanks for any ideas!
Tuxedo
Philip Herlihy
Apr 12, 2013, 2:50:57 PM4/12/13
to
In article <kk9kj1$nna$1...@news.albasani.net>, tux...@mailinator.com
says...
I had to solve that problem here:
http://www.focal-architecture.co.uk/
Look especially at the block containing the red words "focal
architecture" and that containing the white text beginning "A small
architectural design practice".
Note that this site was my first attempt to solve other problems, and if
I was doing it again I'd code it differently. But if it ain't broke...
--
Phil, London
says...
http://www.focal-architecture.co.uk/
Look especially at the block containing the red words "focal
architecture" and that containing the white text beginning "A small
architectural design practice".
Note that this site was my first attempt to solve other problems, and if
I was doing it again I'd code it differently. But if it ain't broke...
--
Phil, London
Tuxedo
Apr 12, 2013, 5:23:26 PM4/12/13
to
Philip Herlihy wrote:
[...]
>
> I had to solve that problem here:
> http://www.focal-architecture.co.uk/
>
> Look especially at the block containing the red words "focal
> architecture" and that containing the white text beginning "A small
> architectural design practice".
>
> Note that this site was my first attempt to solve other problems, and if
> I was doing it again I'd code it differently. But if it ain't broke...
>
Thanks, looks good! I will try your method.
Tuxedo
[...]
>
> I had to solve that problem here:
> http://www.focal-architecture.co.uk/
>
> Look especially at the block containing the red words "focal
> architecture" and that containing the white text beginning "A small
> architectural design practice".
>
> Note that this site was my first attempt to solve other problems, and if
> I was doing it again I'd code it differently. But if it ain't broke...
>
Tuxedo
dorayme
Apr 12, 2013, 5:38:21 PM4/12/13
to
In article <kk9kj1$nna$1...@news.albasani.net>,
If you don't want overlap of such a couple of not very long words, you
can use a min-width on the div (or body). Can't see how anyone would
have a viewport that would not contain two such small words
horizontally.
If you really needed such left and right to wrap but not overlap, mark
up differently.
#tidbits {
position:relative;
}
#right {
float: right;
}
with
<div id="tidbits">
Ice Cream
it itself will still be aligned to the right of the albeit narrow
viewport.
--
dorayme
can use a min-width on the div (or body). Can't see how anyone would
have a viewport that would not contain two such small words
horizontally.
If you really needed such left and right to wrap but not overlap, mark
up differently.
#tidbits {
position:relative;
}
#right {
float: right;
}
with
<div id="tidbits">
Ice Cream
<span id="right">Sign In</span>
</div>
will get you the right dropping under the left on narrow viewport but
</div>
it itself will still be aligned to the right of the albeit narrow
viewport.
--
dorayme
tlvp
Apr 12, 2013, 8:51:43 PM4/12/13
to
On Fri, 12 Apr 2013 19:50:57 +0100, Philip Herlihy wrote:
> I had to solve that problem here:
> http://www.focal-architecture.co.uk/
Lovely :-) ... kudos! May I borrow those techniques? Cheers, -- tlvp
> I had to solve that problem here:
> http://www.focal-architecture.co.uk/
--
Avant de repondre, jeter la poubelle, SVP.
Philip Herlihy
Apr 13, 2013, 8:19:59 AM4/13/13
to
In article <ia1d830fzz4b.a0cikaxy7t33$.d...@40tude.net>,
mPiOsUcB...@att.net says...
Remember the warning that some things are done in what now seems a
slightly eccentric way, which I'd change if I had to re-do the page, so
be on the lookout for simplifications.
--
Phil, London
mPiOsUcB...@att.net says...
>
> On Fri, 12 Apr 2013 19:50:57 +0100, Philip Herlihy wrote:
>
> > I had to solve that problem here:
> > http://www.focal-architecture.co.uk/
>
> Lovely :-) ... kudos! May I borrow those techniques?
Certainly - I learned about them here!
> On Fri, 12 Apr 2013 19:50:57 +0100, Philip Herlihy wrote:
>
> > I had to solve that problem here:
> > http://www.focal-architecture.co.uk/
>
> Lovely :-) ... kudos! May I borrow those techniques?
Remember the warning that some things are done in what now seems a
slightly eccentric way, which I'd change if I had to re-do the page, so
be on the lookout for simplifications.
--
Phil, London
tlvp
Apr 13, 2013, 8:53:10 PM4/13/13
to
On Sat, 13 Apr 2013 13:19:59 +0100, Philip Herlihy wrote:
> In article <ia1d830fzz4b.a0cikaxy7t33$.d...@40tude.net>,
> mPiOsUcB...@att.net says...
>>
>> On Fri, 12 Apr 2013 19:50:57 +0100, Philip Herlihy wrote:
>>
>>> I had to solve that problem here:
>>> http://www.focal-architecture.co.uk/
>>
>> Lovely :-) ... kudos! May I borrow those techniques?
>
> Certainly - I learned about them here!
Thanks! ...
> In article <ia1d830fzz4b.a0cikaxy7t33$.d...@40tude.net>,
> mPiOsUcB...@att.net says...
>>
>> On Fri, 12 Apr 2013 19:50:57 +0100, Philip Herlihy wrote:
>>
>>> I had to solve that problem here:
>>> http://www.focal-architecture.co.uk/
>>
>> Lovely :-) ... kudos! May I borrow those techniques?
>
> Certainly - I learned about them here!
> Remember the warning that some things are done in what now seems a
> slightly eccentric way, which I'd change if I had to re-do the page, so
> be on the lookout for simplifications.
0 new messages