How To Wrap Text Around Table Of Contents
I am HTML programming newbie so I apologies if this question is too elementary. I want to wrap the contents of an article around the table of contents. Here is my HTML web-page. T
Solution 1:
You should try using css Flexbox or css floats.
HTML:
<divclass="container"><divclass="table-contents"><h3>
Table of Contents
</h3><ul><li>one</li><li>two</li><li>three</li><li>four</li></ul></div><divclass="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.</p></div></div>CSS:
.container{
display: flex;
}
.table-contents, .content{
padding: 10px;
}
.table-contents{
flex: 10 auto;
width: 150px;
}
Here is a fiddle: http://jsfiddle.net/wkszuvLm/1/ Hope this helps.
Solution 2:
body tag is already there wrapping around everything, you could use it as well as adding another div inside body to wrap everything else.
There are multiple ways to place elements within a container. Learn about using cssdisplay property set to grid or flex. Both come with their own subset of properties.
use link tag to use an external css file.
<link rel="stylesheet"type="text/css" href="css_file_url_here">
Solution 3:
You can do it by putting those in two different div and then style them as required.
.divLeft {
width:100px;
display:block;
float: left;
}
.divRight {
width:100px;
display:block;
float: right;
}
You can put the above in css file and call in your <head> tag or you can also use it as below:
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"lang="en"xml:lang="en"><head><title>How to Win Friends and Influence People</title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8" /><styletype="text/css">.divLeft {
width:100px;
display:block;
float: left;
}
.divRight {
width:100px;
display:block;
float: right;
}
</style></head><body><divid="content"><divclass="divLeft"><h1class="title">How to Win Friends and Influence People</h1><divid="table-of-contents"><h2>Table of Contents</h2><divid="text-table-of-contents"><ul><li><ahref="#sec-1">1. Introduction</a></li><li><ahref="#sec-2">2. Section 2</a><ul><li><ahref="#sec-2-1">2.1. Subsection 3</a></li></ul></li><li><ahref="#sec-3">3. Section 4</a></li></ul></div></div></div><divclass="divRight"><divid="outline-container-sec-1"class="outline-2"><h2id="sec-1"><spanclass="section-number-2">1</span> Introduction</h2><divclass="outline-text-2"id="text-1"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
</p><divclass="figure"><p><imgsrc="test-asy.svg"alt="test-asy.svg"width="600"align="right" /></p></div><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
</p></div></div></body></html>
Post a Comment for "How To Wrap Text Around Table Of Contents"