Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Wrap Text Around A Div...

This is a discussion on Wrap Text Around A Div..., within the CSS section. This forum and the thread "Wrap Text Around A Div..." are both part of the Designing Your Website category.

 
 Reply to this topicStart new topic
> Wrap Text Around A Div...
paintingtheweb
post May 16 2008, 06:51 PM
Post #1


Squeezing
***

Posts: 76
Joined: 14-February 08
From: Las Vegas, NV
Hey all. I'm not sure if this can be done the way I want it to. If so, I'm sure it would be kind of tricky. Either that or I'm not as good as I thought I was wink.gif - no surprise there. Anyway, if you see the attached file, what I'm trying to do is wrap the blog text around the left nav div (it's the pinkish one). I though about just putting it into two different divs and separate it through code, but the problem is I don't know how tall the left nav div will be as it expands with it's content. Is there a way to keep the text in only one div and just wrap the text around that div according to how tall the div is? I've attached the html page I've gotten done so far so you can look at the structure I'm using. Keep in mind, I'm using absolute positioning for everything as of the moment (seemed the best way to get the tricky overlap stuff I needed to happen the way I wanted it to). Let me know if there's anything else you need.

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>A Day Without Pain. A Book By Dr. Mel Pohl, M.D., FASAM</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="javascript/text" src="js/functions.js"></script>
    </head>
    <body>
        <div id="wrapper_outer">
            <div id="wrapper_inner">
                <div id="leftnav">
                    <div class="leftnavhighlight">
                    
                    </div>
                </div>
                <div id="header">
                    <img class="book" src="images/book.png" width="187" height="261" />
                    <div id="nav">
                        <ul>
                        <li class="inactive"><a class="inactivetab" href="#">Home</a></li>
                        <li class="active"><a class="activetab" href="#">Blog</a></li>
                        <li class="inactive"><a class="inactivetab" href="#">Forum</a></li>
                        <li class="inactive"><a class="inactivetab" href="#">Author</a></li>
                        </ul>
                    </div>
                </div>
                <div id="content">
                    test
                </div>
                <div id="links">
                    Links
                    <br />
                    <a href="#"><img src="images/purchase_button.png" width="151" height="211" border="0" /></a>
                    <br /><br />
                    <a href="#"><img src="images/crp.png" width="127" height="51" border="0" /></a>
                    <br /><br />
                    <a href="#"><img src="images/ffr.png" width="141" height="139" border="0" /></a>
                </div>
            </div>
        </div>
    </body>
</html>

Attached File(s)
Attached File  Blog.png ( 266.49K ) Number of downloads: 11
 


--------------------
http://www.infoonmike.com

"Always program as if the person who will be maintaining your program is a violent psychopath that knows where you live." Martin Golding
Go to the top of the page
 
+Quote Post
MikeHopley
post May 17 2008, 04:48 AM
Post #2


Squeeze Machine
Group Icon

Posts: 677
Joined: 15-February 08
From: UK
QUOTE
Keep in mind, I'm using absolute positioning for everything as of the moment


Then you are doomed to failure. tongue.gif

You need to apply float: left to the navbar. This will allow the text to wrap around it; but you also need to remove the content from its <div> containers.

The structure should look like this:

CODE
<div>This is your navbar</div>

<p>This is your content</p>

<p>This is your second paragraph of content, and so on...</p>


This post has been edited by MikeHopley: May 17 2008, 04:51 AM
Go to the top of the page
 
+Quote Post
« Next Oldest · CSS · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   2 jackfranklin 199 25th March 2008 - 05:26 PM
Last post by: Linda
No New Posts   11 jamesicus 454 12th April 2008 - 01:48 PM
Last post by: jamesicus
No New Posts   3 Jason 224 2nd April 2008 - 01:41 PM
Last post by: karinne
No New Posts   6 Jason 385 25th May 2008 - 05:45 AM
Last post by: velo
No New Posts   7 Popje 264 31st May 2008 - 04:05 AM
Last post by: MikeHopley