Text wont wrap around side bar

**AngryRobboto** · 02-13-2007, 07:44 AM

okay, so I have my webpage kinda working out so far, but I have a rather annoying problem, the text won't wrap around the side bar.

heres the image of the website:

Now here is the HTML (or XHTML) of the website:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Chris Reynold's art</title>
<style type="text/css" title="currentStyle" media="screen">
@import "cr.css";
</style>
</head>
<body>
<div id="container">

<div id="header">

</div>

<div id="maincontent">

<div id="bio">

<h2>Night muse: Painter's inspiration comes from dreams</h2>

<h5>By staff reporter</h5>

<p>It was a lesson, she wrote in a memoir, that she refused to
accept........
</p>
<p>But the job also comes with sharp scrutiny from a distinguished
faculty and relentless pressure to meet fundraising benchmarks.</p>

</div>
<div id="sidebar">

<ul>
<li> <a href="index.html">news</a> </li>
<li> <a href="events.html">events</a> </li>
<li> <a href="bio.html">bio</a> </li>
<li> <a href="links.html">links</a> </li>
<li> <a href="gallery.html">gallery</a> </li>
<li> <a href="contact.html">contact</a> </li>
</ul>
</div>
</div>

<div id="footer">

</div>
</div>

</body>
</html>

Here is the CSS file of it:

/* This style sheet is for Blahs art page */
/* http://www.example.com/ */
/* website design and layout by John Doe
Johndoe@DoeJohn.net */
/* artwork, photography and such © by Mr Cool Guy
Mr Cool Guy's email goes in this comment*/

html {
padding: 0px;
margin:0px;
}

body {
padding: 0px;
margin:0px;
border:0px;
background:#ffffff;
}

/*
==Page Layout==
*/

#container {
width:778px;;
margin: 0px auto 0px auto;
/*border: 3px solid #000000;*/
background: url(images/fill.jpg) #66cccc;
}

#header {

position:relative;
margin-top:0px;
background: url(images/header1.jpg) no-repeat;
width:778px;
height: 111px;
}

#maincontent {

position: relative;
margin-top:0px;
background: url(images/body.jpg) no-repeat;
margin:0px;
left:0px;
width:778px;
min-height:1000px;
}

#footer {
position: relative;
margin-top:0px;
background: url(images/footer.jpg) no-repeat;
width:778px;
height:14px;
}

/*
===menu displays===
*/
#news {
margin-left: 230px;
padding: 20px 95px 0px 0px;
}

#sidebar {
position:absolute;
width: 170px;
height: 400px;
top:0px;
left:0px;
padding: 20px;
float: left;
/*border: 1px solid black;*/
}

#bio {
margin-left: 230px;
clear: right;
padding: 20px 95px 0px 0px;
}

/*
===fonts text styles===
*/

/*
====#news styles====
*/

#news h2 {
font: bold 25px Georgia, arial, serif;
margin:25px 0px 0px 0px;
}

#news h3 {
margin:0;
}

#news p, ul {
font: 12px Georgia;
}

/*
====#bio styles====
*/

#bio h2 {
font-family: Georgia, arial, serif;
font-size: 25px;
margin:25px 0px 0px 0px;
}

#bio h5 {
margin-top: 10px;
text-align: right;
}

#bio p {
font-family: georgia;
font-size: 12px;
}
/*
====#sidebar styles====
*/

#sidebar ul {
list-style: none;
text-align:center;
font-family: Comic Sans MS, arial;
font-size: 12px;
font-weight: 700;
margin-top: 10px;
padding: 0px 40px 0px 0px;
}

#sidebar ul a:link{
text-decoration: none;
color:black;
}

#sidebar ul a:visited{
text-decoration: none;
color:#663300;
}

#sidebar ul a:hover{
text-decoration: none;
color:#006699;
}

#sidebar li {
line-height: 42px;
}

#sidebar h3 {
text-align:center;
font-family: georgia;
font-size: 15px;
margin:0px;
}

/* End of css file */

Now I tried fixing the problem, here is what I get :

here is the CSS of THAT one

/* This style sheet is for Blahs art page */
/* http://www.example.com/ */
/* website design and layout by John Doe
Johndoe@DoeJohn.net */
/* artwork, photography and such © by Mr Cool Guy
Mr Cool Guy's email goes in this comment*/

html {
padding: 0px;
margin:0px;
}

body {
padding: 0px;
margin:0px;
border:0px;
background:#ffffff;
}

/*
==Page Layout==
*/

#container {
width:778px;;
margin: 0px auto 0px auto;
/*border: 3px solid #000000;*/
background: url(images/fill.jpg) #66cccc;
}

#header {

position:relative;
margin-top:0px;
background: url(images/header1.jpg) no-repeat;
width:778px;
height: 111px;
}

#maincontent {

position: relative;
margin-top:0px;
background: url(images/body.jpg) no-repeat;
margin:0px;
left:0px;
width:778px;
min-height:1000px;
}

#footer {
position: relative;
margin-top:0px;
background: url(images/footer.jpg) no-repeat;
width:778px;
height:14px;
}

/*
===menu displays===
*/
#news {
margin-left: 230px;
padding: 20px 95px 0px 0px;
}

#sidebar {
position:absolute;
width: 170px;
height: 400px;
top:0px;
left:0px;
padding: 20px;
float: left;
float: clear;
/*border: 1px solid black;*/
}

#bio {
/*margin-left: 230px;*/
clear: right;
padding: 20px 95px 0px 0px;
}

/*
===fonts text styles===
*/

/*
====#news styles====
*/

#news h2 {
font: bold 25px Georgia, arial, serif;
margin:25px 0px 0px 0px;
}

#news h3 {
margin:0;
}

#news p, ul {
font: 12px Georgia;
}

/*
====#bio styles====
*/

#bio h2 {
font-family: Georgia, arial, serif;
font-size: 25px;
margin:25px 0px 0px 0px;
}

#bio h5 {
margin-top: 10px;
text-align: right;
}

#bio p {
font-family: georgia;
font-size: 12px;
}
/*
====#sidebar styles====
*/

#sidebar ul {
list-style: none;
text-align:center;
font-family: Comic Sans MS, arial;
font-size: 12px;
font-weight: 700;
margin-top: 10px;
padding: 0px 40px 0px 0px;
}

#sidebar ul a:link{
text-decoration: none;
color:black;
}

#sidebar ul a:visited{
text-decoration: none;
color:#663300;
}

#sidebar ul a:hover{
text-decoration: none;
color:#006699;
}

#sidebar li {
line-height: 42px;
}

#sidebar h3 {
text-align:center;
font-family: georgia;
font-size: 15px;
margin:0px;
}

/* End of css file */

The changes are in bold font

Here is how I want the text to wrap, the red area is where I want the text to be:

okay, I don't know what I'm doing wrong

I've tried taking the text out of the <div bio> tag, and putting it within the "maincontent" div tags. THat didn't work, I've tried putting the "div sidebar" tag in the "div bio" tag, that didn't work either. I've tried bio from id to class, nill. I don't know what I'm doing wrong. I know I have to do some restructuring, but I don't know how. What should I do?

**jscheuer1** · 02-13-2007, 09:50 PM

A link to your page would be much more useful in diagnosing this. However, generally the floated content should not be positioned absolutely, in fact its position property should not be set. There is no such thing as float:clear; and the HTML markup for the floated division (sidebar) should come before the non-floated content that you want wrapping around it. The content that you wish to be wrapping should have no width set (a container around both elements may constrain its width though). After all floats and all content that you wish to have wrap with the floats you should have an element that clears the float(s):

clear:left;

or:

clear:right;

or:

clear:both;

In this case it looks like clear:left; would do. You only need to clear the direction that was previously floated. If you clear right after floating left, it is meaningless.

Thread: Text wont wrap around side bar

Thread Tools

Search Thread

Text wont wrap around side bar

Bookmarks

Bookmarks

Posting Permissions