CODEWITHSUNDEEP
htmlcsswidth
76987
76987

Reputation: 523

CSS styling, float:right and keeping the left text to a restricted width

I'm trying to replicate the following table of contents:

You can see my attempt here and see the problem: I don't know how to keep the chapter titles restricted to a specific width so that they don't wander over to the page numbers. I've tried things like width:250px and margin-right:30px; and padding-right:30px;, but to no avail.

Here's some of the code:

.conts {
    font-size:80%;
    text-align:justify;
    text-indent:-1em;
    margin-left:1em;
    margin-bottom:1.5em;
}

    <div style="text-align:center;font-size:80%">CHAP. IX.</div>
    <div class="conts"><span><em>Of the different Degrees of Virtue and Vice</em>, <em>and the methods of estimating them</em>. <em>Of Difficulties attending the practice of Virtue the use of Trial and Discipline in forming reasonable Beings to Virtue</em>, <em>and the Essentials of a good and bad Character</em>.</span><span style="float:right;">p. 200</span>
    </div>

Any help would be appreciated.

Upvotes: 2

Views: 3049

Answers (4)

Ben
Ben

Reputation: 1

wrap all of the chapters up into one main div. Float that left, width 80% (or whatever works). then wrap your page numbers into a second div, and float that right with a width of 20% or less, depending on your margins. MAKE SURE YOU GIVE YOUR WRAPPER DIV (or whatever div you wrapped the entire code in) A WIDTH OR THE WIDTHS YOU ASSIGN TO INSIDE DIVS WILL NOT WORK.

Upvotes: -1

David Millar
David Millar

Reputation: 1878

Try adding a padding-right:100px; to the contents and margin-right:-100px; to the floated page number. That should make sure the full contents are correctly made to stay a certain width while pulling your page numbers out of that space and into the right margin.

Upvotes: 0

EdiSainer
EdiSainer

Reputation: 112

First. change all this code <span style="float:right;"> Page number here </span> into <p>Page number</p>. then change your CSS like this.

.entry {
    width: 450px;
    padding-left: 90px;
}
strong {
    font-variant:small-caps;
    font-weight:normal;
}
.conts {
    width:100%;
}
.conts span {
    float:left;
    width:80%;
    font-size:80%;
    text-align:justify;
    text-indent:-1em;
    margin-left:1em;
    margin-bottom:1.5em;
}

.conts p {
    float:right;
    width:10%;
    font-size:80%;
    margin-top: 0px;
}

Last, add <br clear="all"/> after <p>Page Number</p>. hope this help :)

See Demo Here

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157314

You should use p to wrap the text instead of a span element, assign some fixed width to p and float that to the left

Demo

.conts {
    font-size:80%;
    text-align:justify;
    text-indent:-1em;
    margin-left:1em;
    margin-bottom:1.5em;
    width: 600px;
}

.conts p {
    float: left;
    width: 500px;
}

.conts span {
    margin-top: 10px;
}

If you want to position the number at the end of the line, use position: absolute; wrapped inside position: relative; container.

Demo 2

Upvotes: 2

Related Questions