5 replies [Last post]
polarpro
polarpro's picture
Offline
newbie
Last seen: 8 years 45 weeks ago
Timezone: GMT+2
Joined: 2011-09-18
Posts: 2
Points: 3

Hey there,

I wonder if it is possible to arrange several div elements in a way that they float around another div element like we know it from text that wraps around a div element.

As you can see in the attached image the text wraps nicely around the orange div element. The blue lines are the top and bottom borders of a row of div elements (and, as I haven't used any margin-right expressions, they reach until the very right end).

The thing is I cannot use any fixed declarations (like margin-right:50px), as I want the text containing div elements to be flexible.

To give you an idea of what I am trying: The whole thing represents a record in a library system, the orange box contains a thumbnail of the cover; and the div elements on the left contain data about the book (author, title, ISBN, keywords,...)

Any idea is appreciated; also, if somebody knows a better approach than mine.

float_text_2.png

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Div Problem</title>
<style type="text/css">
 
  div.Cover {
    float: right;
    width: 250px;
    height: 350px;
    margin: 10px;
    padding: 10px;
    border: 3px solid orange;
  }
 
  div.Content {
  	border-bottom: 1px solid blue;
  	border-top: 1px solid blue;
  	padding: 5px;
  }
 
</style>
</head>
 
<body>
 
<div class="Cover"></div>
 
<div class="Content">text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text text text text</div>
<div class="Content">text text text text text text text text text text text text text text text text text text text text text text </div>
 
</body>
</html>

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 7 weeks 4 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

I'm not sure I understand the

I'm not sure I understand the problem. What is it that you need to change?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 45 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Welcome to the forum.If I'm

Welcome to the forum.

If I'm guessing correctly as to what you want, give div.cover a background color, e.g. .cover {background-color: white;}. Its default transparent background allows the div.content borders to show through.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 7 weeks 4 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

gary.turner wrote: If I'm

gary.turner wrote:

If I'm guessing correctly as to what you want, give div.cover a background color, e.g. .cover&nbsp;{background-color:&nbsp;white;}. Its default transparent background allows the div.content borders to show through.

Ah, I couldn't glean that from the information given. If there were an image of a book cover there then the lines wouldn't show through as well.

polarpro
polarpro's picture
Offline
newbie
Last seen: 8 years 45 weeks ago
Timezone: GMT+2
Joined: 2011-09-18
Posts: 2
Points: 3

Hey guys, Thank you for the

Hey guys,

Thank you for the replies. I am sorry to have been wordy, but not precise.

Here is what I try to reach:

I need the div elements on the left and below (the ones with the blue lines) to reach not further than the left border of the orange div element on the right (just like the text wraps around the orange div element I want the div boxes to wrap around the orange div element.) With my solution, they reach until the very right end of the window.

I've just tried the suggestion given by gary.turner. As I work with horizontal lines only on my layout, this might be an option.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 45 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

variation on a theme

You may want to put the .cover box in its own container, so you can simulate the right margin without the blue lines showing.

<div class="cover">
  <div><img url="sample.jpg"
            alt="A photo of the cover">
  </div>
</div>
 
<div id="content">
  <p>text text text text text text text text text text text text
     text text text text text text text text text</p>
  <p>text text text text text text text text text text text text
     text text text text text text text text text</p>
  <p>text text text text text text text text text text text text
     text text text text text text text text text</p>
  <p>text text text text text text text text text text text text
     text text text text text text text text text</p>  
  <p>text text text text text text text text text text text text
     text text text text text text text text text</p>
</div>
=========================
.cover {
    float: right;
    width: 250px;
    height: 350px;
    margin: 10px 0 10px 10px;
    padding: 0 10px 0 0;
    }
 
.cover div {
    border: 3px solid orange;
    padding: 10px;
    }
 
#content p {
    border: 1px solid blue;
    border-width: 1px 0;
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.