Is there any way of doing this:

 

 

Without doing this:

 

 

??

 

Basically I have a simple layout I'd like to implement, but am mixed up with how to position them to allow text to wrap around them.

 

 

Div1 is the main div.

Div2 is a menu that is nested inside Div1 and is permanently positioned to the top-left of Div1.

I have lots of pages to do, so the "Image" (height, size, and vertical position and alignment) changes each time for each page, as different images are used.

 

The main body of text will be entered into Div1, and should wrap around both Div2 and the Image, so the result is similar to this:

 

.

 

... Because the image and content change for each page, I would love the freedom of being able to position an image anywhere inside Div1 and have the text automatically wrap around both the image and Div2.

 

This is what I have (purely for testing. not actual real dimensions):

 

<html>
<head>
<style>
#Div1 img {
height: 300px;
width: 200px;
border: 0px;
}
#Div1 #Div2 {
float: left;
}
</style>
</head>

<body>
<div id="Div1" style="width: 800px; background-color:#ffffff"> <!-- Main Div --> 
 <div id="Div2" style="width:200px; height:300px; background-color:#888888;"> <-- Div for left hand menu -->
Div2
 </div> <!-- End Div2 -->

 Div1 content. Insert text for main body here.   

 <img height="300" width="200"/> <!-- Image -->
<!-- End Div1 -->
</body>
</html>

 

Which gives me a deservedly retarded:

 

 

So, my questions:-

 

1) How do I position the Image in the Div1? Say, on the right hand side, but 400 pixels down? "Float: Right;" is a given, but how to place it vertically? I thought of putting the Image inside a new Div and floating this Div to the right, but again how do I push it down the page as required?

 

2) How do I get the text to start back up the top again, as opposed to after the Div2 and the Image? (Hopefully this should work ok if both the Div(s) and/or Image are managed to be floated yet still positioned.)

 

3) How do I then get the text to wrap around both Div2 and the Image? (Ideally I'd need to put both the Div and the Image into their places first, so the text then fills in the gaps. Again hopefully this should work ok if both the Div(s) and/or Image are able to be floated and positioned.)

 

4) Styling the <p> tag for the main body text inside Div1 as normal would hopefully give me automatic "padding", when the text wraps around everything (the sides, Div2, and the image)?

 

Crumbs of advice and heckles of noobdom welcome,

 

Thnx, Tímo

Ok, so I've got this far:

 

 

<style>
#Div1 {
width: 800px;
background-color: #ffffff;
}
#Div1 img {
height: 300px;
width: 200px;
float: right;
clear: none;
}
#Div2 {
background-color: #888888;
width: 200px;
height: 300px;
float: left;
}
</style>


<body>

<div id="Div1">
<div id="Div2">

 Div2 <!-- Div2 content goes here -->

</div> <!-- End Div2 -->

<img alt="Image" width="200" height="300"/> 

 Div1 content. Insert text for main body here.
 Div1 content. Insert text for main body here.
 Div1 content. Insert text for main body here.
 Div1 content. Insert text for main body here.
 Div1 content. Insert text for main body here.
 Div1 content. Insert text for main body here.
 Div1 content. Insert text for main body here.
			 ....etc	
</div> <!-- End Div1 -->

 

Now how do I push that Img (or Div, if I need to put the image in a div) down, keeping it floated to the right?

Give the image an id and position it?

 

html:

img id="right_image1 src=".....

 

CSS:

#right_image1 {

display:block;

float:right;

top:200px;

}

 

something like that perhaps?

Give the image an id and position it?

 

html:

img id="right_image1 src=".....

 

CSS:

#right_image1 {

display:block;

float:right;

top:200px;

}

 

something like that perhaps?

 

Thanks, I've added it to my code, but unfortunately it doesn't appear to do anything?

 

 

<style>
#Div1 {
width: 800px;
background-color: #ffffff;
}
#Div2 {
background-color: #888888;
width: 200px;
height: 300px;
float: left;
}
#right_image1 {
width: 200px;
height: 300px;
display: block;
float: right;
top: 200px;
}
#Div1 #Div2 {
float: left;
}
</style>

<body>

<div id="Div1">
 <div id="Div2">
Div2
 </div> <!-- End Div2 -->

 <img id="right_image1" alt="Image" /> 

 Div1 content. Insert text for main body here.
 Div1 content. Insert text for main body here.
 Div1 content. Insert text for main body here.
 Div1 content. Insert text for main body here.
 etc....

</div>
<!-- End Div1 -->
</body>

 

I've even put the image in a new Div and tried to position the Div using the same CSS style as its former right_pic1, but no worky as yet. In my own code I do actually have a proper "src" and image in my img code.

Figured it out. Sometimes the simplest techniques work the best (when you've found them, that is)!

 

To anyone else who may want to do this:-

 

I simply inserted a 1-pixel wide DIV floated to the right-hand side, with a height of my choosing, which pushes the image downwards. An Image (or Div) can then be floated to the same side, and set to clear the invisible Div. I've heard this is also referred to as the "sandbag" technique elsewhere.

 

I've highlighted the invisible Div (aka the "sandbag") in the dashed red box, on the right hand side, pushing the Image of the girl down from the top of the Main div:-

 

 

The 'sandbag' div being so narrow at 1-pixel wide minimises impact to the rest of the main content.

 

Here's the basic CSS and HTML code:-

 

<style>

#Main {
width: 800px;
min-height: 600px;
} 

#Main img { 
float: right; 
clear: right; 
} 
#LeftMenu{
width: 200px;
float: left;
}
#Sandbag { 
float: right; 
width: 1px; 
height: 150px; 
} 

</style>

 

 

<div id="Main">

<div id="LeftMenu">
Insert code for left menu/div here
</div>

<div id="Sandbag">
</div>

<img src="image.jpg" height="300" width="200"> 

<p> Insert all your text content here </p>
<p> Insert all your text content here </p>
<p> Insert all your text content here </p>

</div>

 

You can, of course, specify margins around images (or divs) in your CSS to push the text away from them neatly accordingly. For the interests of simplicity I left that out here.

 

Hope others may find this useful!

 

Timo

Try This ....

 

 

Step 1 : Add float : right as highlighted below

 

#Div1 IMG {

float: right;

height: 300px;

width: 200px;

border: 0px;

}

 

 

Step 2 :

 

Insert image inside the <p> </P> and position it within the paragraphs where you want it in relation to your text. as shown below :

 

 

 

<div id="Main">

 

<div id="LeftMenu">

Insert code for left menu/div here

</div>

 

<div id="Sandbag">

</div>

 

 

 

<p> Insert all your text content here <img src="image.jpg" height="300" width="200"> Insert all your text content here </p>

<p> Insert all your text content here </p>

<p> Insert all your text content here </p>

 

</div>

 

 

 

This is the only simple way I know. If you spend some time learning absolute positioning you might be able to achieve better results.

 

Hope this was of any help......Good luck

 

 

Pointze