...

View Full Version : How to place image & text in nested DIVs



coolygreen
05-08-2011, 05:02 AM
Below page header, I have a div which in turn has (i) text on left side, (ii) pic in middle and (iii) text on right. The problem is the text on right positions itself below the picture. I have used the following code:

The URL is www.accidentinsuranceforfree.com

.content {width:996px;
border:double;
height:190px;
background:#2F8AE0;
overflow:hidden;
margin:30px auto;
padding:0px 0px 0px 0px;}

.side {background:#ffffff;
float:right;
display:block;
width:460px;
padding:0px;
height:220px;
}
.inform {
float:right;
width:250px;
height:100px;

}

add_action('thesis_hook_after_header', 'add_image_header');
function add_image_header() {
?>

<div class="content">
<div class="side">
<img src="img1.png" /></div>
<h1 >Some Text</h1>
<h2 >Download the Free ebook, find out HOW?</h2>
<h3 >Some text</h3></div>
<div class="inform">Some Text.</div>

<?php
}

I have just started using Wordpress and took help from a previous post from this forum. Can someone help? Thanks.

DanInMa
05-08-2011, 05:10 AM
it's because the text is in a completely seperate div. the text you are reffering ot should be in <div class="side"> after the img element.

coolygreen
05-08-2011, 05:21 AM
I agree. Two things I tried: (1) Put the text below Img1, in the same div, but the text somehow vanished. Tried using Firebug, but could not locate. (2) Then I tried the one given above and the text moves below & right of the image.

DanInMa
05-08-2011, 05:25 AM
put the text right after the <img> element in the side div. If you want to style it with color etc, put it in a <span> instead of a div. remember divs are block elements by default. , plus"inform" has a width of 250px, most likely also part of the issue.

kenshn111
05-08-2011, 08:03 AM
after the image, try putting this:


<div style="display:inline; vertical-align:middle;">
Enter some text here.
</div>

coolygreen
05-08-2011, 11:50 AM
@KENSHN111
I tried that, but except for the .content div (border box) and the picture, else everything vanished.

kenshn111
05-08-2011, 02:15 PM
Can't you just put the text after the <img> tag? Like what DanInMa said.

coolygreen
05-08-2011, 03:33 PM
I already did that (see above) but the text vanishes. I googled it and at w3schools, I did see some code, but could not implement it. Could you help me out on it?

<style type="text/css">
div.container
{
width:30em;
border:1px solid green;
}
div.box
{
moz-box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1px solid red;
float:left;
}
</style>
</head>
<body>

<div class="container">
<div class="box">This div occupies the left half.</div>
<div class="box">This div occupies the right half.</div>
</div>

</body>
</html>

I saw it here:http://www.w3schools.com/css3/tryit.asp?filename=trycss3_box-sizing

On their site it does create two div boxes side by side, but on mine, it simply does not interpret anything. Please do not get offended.

kenshn111
05-09-2011, 07:04 AM
I downloaded the page, along with the css.
and found out that ".content" has "overflow:hidden;"

.content {width:996px;
border:double;
height:190px;
background:#2F8AE0;
overflow:hidden;
margin:30px auto;
padding:0px 0px 0px 0px;}
This is your custom.css




.content {width:996px;
border:double;
height:auto;
background:#2F8AE0;
overflow:hidden;
margin:30px auto;
padding:0px 0px 0px 0px;}

.side {background:#ffffff;
float:right;
display:block;
vertical-align:middle;
width:460px;
padding:0px;
height:220px;
}
.inform {
float:right;
display:inline;
vertical-align:middle;
position:middle;
width:auto;
height:auto;
}

This is the part where the text is located:

<div class="content">
<div class="side">
<img src="./Prevent Accidents, Injuries & Trauma Turnkey Basis Eternal Policy_files/trial-5.png"></div>
<h1 class="maaaza">Enjoy your driving on road or Race Track ... without Fear!</h1>
<h2 class="meeza">Download the Free ebook, find out HOW?</h2>
<h3 class="meeeza">The <strong>centuries-old</strong> Eternal Policy monitors our bodies in motion and protects. Recently discovered and made available through Internet.</h3></div>
<div class="inform">Take your first step towards <strong>Contributing Humanity</strong>. Click the button shown below and download the ebook.</div>

But if you turn it into like this:

<div class="content">
<div class="side">
<img src="./Prevent Accidents, Injuries & Trauma Turnkey Basis Eternal Policy_files/trial-5.png">
<div class="inform" style="vertical-align:middle;">Take your first step towards <strong>Contributing Humanity</strong>. Click the button shown below and download the ebook.</div> </div>
<h1 class="maaaza">Enjoy your driving on road or Race Track ... without Fear!</h1>
<h2 class="meeza">Download the Free ebook, find out HOW?</h2>
<h3 class="meeeza">The <strong>centuries-old</strong> Eternal Policy monitors our bodies in motion and protects. Recently discovered and made available through Internet.</h3></div>


It will look like this:http://imgur.com/k20eJ

CSS CODE:


.content {width:996px;
border:double;
height:100%;
background:#2F8AE0;
overflow:hidden;
margin:30px auto;
padding:0px 0px 0px 0px;}

.side {background:#ffffff;
float:right;
display:block;
width:460px;
padding:0px;
height:100%;
}
.inform {
float:right;
display:inline;
vertical-align:middle;
width:250px;
height:100%;
}
Still not in the center, the only thing I can think of is using tables. :/

coolygreen
05-09-2011, 08:50 AM
@KENSHN111
Yes, that does solve the problem. Thank you. BTW if you have a bit of time could you please elaborate a bit more on solving the same using Tables? (actually even I thought of using tables because when I tried making a div of 500 px, it appeared centered without reason)

BTW from where did you get this: (<img src="./Prevent Accidents, Injuries & Trauma Turnkey Basis Eternal Policy_files/trial-5.png">) Because earlier I used a readymade form having a submit button along with boxes for name & email. When I clicked on it, the browser took name+email+Prevent Accidents... as the url. And I wondered from where these values got generated.

kenshn111
05-09-2011, 12:46 PM
Oh, it came along when I saved your page. :)

coolygreen
05-09-2011, 10:51 PM
The same page faulters in IE. The third from left, goes downward. Any ideas?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum