?
Solved

Text floating around two div layer boxes?

Posted on 2012-09-09
9
Medium Priority
?
567 Views
Last Modified: 2012-09-10
Hi experts,

I have 3 div layer. Two of them suppose to float inside the third one. One at the top left and one at the bottom right. The rest of the first layer I want to fill with text which I load from the DB but I want this text to float around the two smaller div boxes.

Demo Image
I got the first part working but I dont get the box at the bottom wokring. I tried all kinds of css combinations but no success yet. I would be happy if somebody can help me out.

So far I use:

<div>
 <div style="float: left; padding: 10px;" >BANNER</div>
<span class="normtxt">{article_body}</span>
</div>

Open in new window


Of course this only gives me the top left box and the text around but I need the same type of box at the bottom, which is my problem.

Thanks for your help in advance.
0
Comment
Question by:Oliver2000
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 38381655
Just add the following code where you want to add the div ( bootom right)

<div style="float:right; padding:10px;"> BANNER </div>

Open in new window


You might also have to add the float:left to the span with class normtxt.....
0
 

Author Comment

by:Oliver2000
ID: 38381696
Thank you IshaanRawat, i tried this already before but this solution does not help. The result is that the lower Div box appaer BELOW the entire main Div. The text does not float around the second lower box like in the demo image I embed in my original message abouve.

I tried now your tip and end up with this code example.
<div style="width: 400px; text-align:left;">
 <div style="float: left; padding: 10px; width: 100px; height: 100px;">BANNER</div>
ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDEBC ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE ABCDE<br />
<div style="float:right; padding:10px; width: 100px; height: 100px;"> BANNER </div>
</div>

Open in new window


but as I said not working as I want (to have the text float around box boxes.

Results with the tip from Ishaan
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 38381742
I don't see any way to do this without a little jquery or javascript to determine on page load (and page resize) how much space the text will take up.

Here's an example of what I am suggesting. It still is not exact. Depending on the browser window size the bottom banner could still be a little off.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#spacer').height($('#normtxt').height() - ($('#banner2').height() + 20));
  $(window).bind("resize", function(){
    $('#spacer').height($('#normtxt').height() - ($('#banner2').height() + 20));
  });
});
</script>
</head>
<body>
<div>
 <div style="float: left; padding: 10px;border:1px solid red" >BANNER</div>
 <div id="spacer" style="width:0;float:right"></div>
 <div id="banner2" style="clear:both;float:right; padding: 10px;border:1px solid green" >BANNER</div>
<span id="normtxt" class="normtxt">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</span>
</div>
</body>
</html>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38383770
Instead of <span> use <p> and insert the bottom right div into the middle of the text.

An example of the technique

Cd&
0
 

Author Comment

by:Oliver2000
ID: 38384045
@tommyboy: it is partly working but in the end your green box is just floating below the red box and the main text goes until the bottom. Like this the second div is not at the bottom or not even close to the bottom because the text is sometimes very big. I load the text from DB and can be as much as one entire site. What I want is that I have at the beginning and at the bottom the two ads but the text always float around.

@COBOLdinosaur: I am sorry, I did not understand your idea or example. Can you help me a little bit more detailed? (PS: Great article at the example site, I agree 100%)
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38384125
Banners top left and bottom rightDon't know what you are looking at. I tested in Safari, Firefox and Chrome. They all render like this.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38384145
The right floated element will float at the point in the page where it is inserted.  If you wait until after the text, it will float right but it will be below the text because that is where it is inserted.  

What you have to do id put the right floated element inside of the text, just like you would put an icon or link inline.  However because it is right floated, the text following the insertion point will flow around it.

However the text should not be in a span, it needs to be in a block element like a p or div.  Using a span would make the code invalid and the result would be unpredictable.

The code needs to take this form:

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Cras a lacus vel nisl varius tincidunt. Curabitur rhoncus posuere risus non rutrum. 
Sed at viverra metus. Sed vel urna turpis, eu tempus turpis. 
Nulla lectus metus, molestie ac tristique ac, suscipit dapibus ipsum. 
orbi vel libero id mauris tincidunt ullamcorper.<div style="float:right">YOUR ADD HERE
 AND OTHER STUFF</div> Duis sit amet dapibus lorem. 
Aliquam eget urna eget est fringilla blandit. Vestibulum aliquam hendrerit bibendum. Sed at libero id dui bibendum fringilla.</p>

Open in new window



Cd&
0
 

Author Closing Comment

by:Oliver2000
ID: 38384287
It works perfect! I apologize, because the first time when I checked, it did not work for me and I guess I made something or left something out. How ever now it is working perfect and this was exactly what I needed. Thank you for your help.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38384342
Glad it worked out for you. Thanks for the points. I'm fairly certain that using javascript/jquery is required in this instance because there are too many variables, i.e. window size, lack of a pre-defined text area, text size, lack of a pre-defined banner size. A pure html/css solution does not exist as far as I know. Putting a div in the middle of the text as @COBOLdinosaur suggests will work well if the div is floating somewhere in the middle of the text so that the text wraps under it. Trying to get the div exactly at the bottom will inevitably produce inconsistant results. Too close to the end of the text and the div will hang below. Too far up from the bottom and the text will wrap under the div. You can get it to look good with the browser window at one size but it will be wrong again when you resize. It's unfortunate that you have to resort to scripting for something that should be easy to do. Some folks still turn scripting off in their browsers.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

755 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question