Forum Moderators: not2easy
Is it possible to have the content of one Div class to float around another one.
I may be misunderstanding what you're after here. Are you saying you want a navigation div in the upper left corner, and you want the text content in the remainder of the div to not be overlapped by the navigation div?
As in...
t = text
n = navigation div.
nnnnn ttttttttttttttttt
nnnnn ttttttttttttttttt
nnnnn ttttttttttttttttt
nnnnn ttttttttttttttttt
nnnnn ttttttttttttttttt
ttttttttttttttttttttttt
ttttttttttttttttttttttt
tttttttttttttttttttttttIf this is what you are after, it is VERY easy to do. Create a div to hold the navigation... <div id="nav></div>
Create a div to hold the text...<div id="text"></div>
Place the nav <div> inside of the text <div> BEFORE the actual text and style it as below...
html:
<div id="text>
<div id="nav">
<p>nnnnn</p>
<p>nnnnn</p>
<p>nnnnn</p>
</div>
<p>ttttttttttttttttttttttt</p>
<p>ttttttttttttttttttttttt</p>
<p>ttttttttttttttttttttttt</p>
<p>ttttttttttttttttttttttt</p>
<p>ttttttttttttttttttttttt</p>
<p>ttttttttttttttttttttttt</p>
</div>
css:
#nav {
float: left;
width: WHATEVER;
}
That's it. If there's any chance that the text will not be as long as the navigation div, you'll need to apply a float:left and a width to the #text div, too. If the text will ALWAYS be longer, it's not necessary.
cEM
Let me add one more little peice of advice: put the text inside of it's own div, too. As in...
<div id="container">
<div id="nav">
<p>nnnnnn</p>
<p>nnnnnn</p>
<p>nnnnnn</p>
</div>
<div id="text">
<p>ttttttttttttttttttttt</p>
<p>ttttttttttttttttttttt</p>
<p>ttttttttttttttttttttt</p>
<p>ttttttttttttttttttttt</p>
</div>
</div>
Then style it like this...
#container {
float:left;
width: WHATEVER;
}
#nav {
float:left;
width: WHATEVER;
}
It doesn't look like much of a difference, and in this simple example it doesn't make any difference at all, but real world applications tend to be more complicted than WebmasterWorld examples. But giving the nav and the text their own divs, then nesting them inside of a container, you give yourself the ability to exercise far more control when/if you need it.
cEM
</div>
<div id="content">
<br>tester<BR><BR>
<br><br>now
<br><br><br>now
<br><br>end<br><br>
<br>now<br>
<br>test
<br><br>Yahoo<br>i hope<br><br><br>One
<br><br>two<br><br>tree
</div></div>
Your requirements here are as follows:
By using the skeleton code I posted earlier, you should have exactly what you want. Here it is again with your widths in it. Cut and paste this directly into a txt editor, save it as an html file and view in your browser. It'll give you an idea of what I'm talking about...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Basic Floated Nav Bar</title>
<style type="text/css">
#main{
float:left;
width: 96%;
background: #aaa;
}
#left{
float:left;
width: 17.5%;
background: #ccc;
}
#content{
/*style this div however you need for appearance, but it doesn't require any styling to acheive the basic float demonstrated*/
}
</style>
</head>
<body>
<div id="main">
<div id="left">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div id="content">
<h3>Content</h3>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</body>
</html>
cEM
