problem to write text in a fixed position
I am just a beginner here. I want to make a simple web page using html and css. I have made the header, left content, as well as right content and footer.
In left content, I want to write some normal descriptive text. I have used ul and li tags using text-align:justify. But the problem is this: texts are over the right content of the page. I want them to be on a new line rather then over to the right side. What should I do now?
Here's the HTML:
<body>
<div id="header"></div>
<div id="wrap">
<div id="left">
<div id="left_content">
<ul>&l开发者_高级运维t;li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat.</li></ul>
<a href="#"> Read More</a>
<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo consequat.</li></ul>
<a href="#"> Read More</a>
</div>
</div>
<div id="right">
<div id="right_content"></div>
</div>
</div>
<div id="footer"></div>
</body>
and css code :
#left_content ul li {
padding:10px 0 0 0px;
font:Tahoma, Geneva, sans-serif;
font-size:11px;
color:#000000;
font-weight:bold;
text-align:justify;
}
I would give your #left_content a width
#left_content{
width:200px;
}
Example: http://jsfiddle.net/jasongennaro/p3ApG/
Why not give the li an explicit width ?
#left_content ul li {
padding:10px 0 0 0px;
font:Tahoma, Geneva, sans-serif;
font-size:11px;
color:#000000;
font-weight:bold;
width: 100px;
}
Here's a fiddle
加载中,请稍侯......
精彩评论