Left Para text forced to bottom from Right li float?

Question

So the intent for this snippet is to allow the paragraph on left to display a right border spanning the height of the parent container, which it manages to do under display:table for both the container article and paragraph if said rules are set. The ul following it is meant to be placed right to it, that too is working. The list entities are preferably allowed to float such that more than one bullet can be on a single line.

Now, when float:left is added to the li tags... the para text goes from starting up top in its cell, to starting below the last line of bulleted entries.

I know float:left is the problem since removing it rectifies the issue, but it then makes the list 1 bullet/line... something I'd rather not do.

Why is the float for the li tag repositioning the text on an item it isn't written to affect? I tried inspecting elements and I don't see any text-alignment being calculated afaik.

The HTML:

<article class="foo" id="bar">
        <p> List on right causes my text to move down?</p>

<ul>
    <li>why</li>
    <li>yes</li>
    <li>we</li>
    <li>do!</li>
    <li>why</li>
    <li>yes</li>
    <li>we</li>
    <li>do!</li>
</ul>

The CSS:

.foo {
    display:table;
    width: 20em;
}
.foo p {
    text-align: right;
    padding: 0 1em 0 0;
    border-right: 1px solid #999;
    display: table-cell;
    width: 10em;
}

#bar ul
{
    width: 10em;
}
#bar li {
    float: left;
    width:2em;
    margin-right:3em;
}

The JSFiddle snippet can be seen here: http://jsfiddle.net/U39ab/1/

What structure exactly you want ?? – dipak_pusti Jan 23 '14 at 12:46 — dipak_pusti, Jan 23 '14 at 12:46
It's the `float:left;` on the `li` elements. – Albzi Jan 23 '14 at 12:47 — Albzi, Jan 23 '14 at 12:47

score 2 · Answer 1 · edited Jan 29 '14 at 21:55

2

Change

float:left;

to

display:inline;

JSFiddle

Answer 2

Keep float:left; in #bar li

but .foo p should have

vertical-align:top;

in its properties.

Then you can change padding to: (optional)

padding: 20px 1em 0 0;

to align it with the rest.

JSFiddle 2

edited Jan 29 '14 at 21:55

hichris123

10,145
15
56
70

answered Jan 23 '14 at 12:48

Albzi

15,431
6
46
63

Solves the main problem I had, but apparently introduced another. Removed the bullet points. Suppose I could rectify it by using a :before selector and adding custom bullets at that point. – CodeXCDM Jan 23 '14 at 16:02
Well, that would definitely be a second way to solve it! Well, vertical-align, which is what you have on the JSFiddle, versus text-align... which didn't seem to work. Thanks. I forget, can you mark more than one answer as a solution here? Been a while since I've used SO... I know, I should be ashamed. – CodeXCDM Jan 23 '14 at 16:34
Haha, I hope it helped! And no haha, you can only accept one person. However feel free to accept @SajadLfc as I got 2 votes on mine, and he only got the 1. It's not how it's meant to work but oh well! :-) – Albzi Jan 23 '14 at 16:35
And I meant `vertical-align:top;` I just wrote it wrong when updating answer :/ @CodeXCDM – Albzi Jan 23 '14 at 16:36

score 1 · Accepted Answer · edited May 23 '17 at 12:21

1

just add position:absolute in

#bar ul
{
    width: 10em;
    position:absolute
}

DEMO

OR BeatAlex's answer

check display:inline here CSS display: inline vs inline-block

edited May 23 '17 at 12:21

Community

1
1

answered Jan 23 '14 at 12:49

Sajad Karuthedath

14,987
4
32
49

Hm... well this version leaves the bullets in. Still curious as to why the lack of either "position:absolute" or "display:inline" causes the format issue here though. Seemed consistent across the four browsers I have installed too. Thanks very much though! This was bugging me for a good while. – CodeXCDM Jan 23 '14 at 16:06

Left Para text forced to bottom from Right li float?

2 Answers2