Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to place image & text in nested DIVs

    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.
    Attached Thumbnails Attached Thumbnails How to place image &amp; text in nested DIVs-problem.jpg  

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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.

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by coolygreen; 05-08-2011 at 04:41 AM. Reason: typo

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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.

  • #5
    New Coder
    Join Date
    May 2010
    Posts
    79
    Thanks
    15
    Thanked 2 Times in 2 Posts
    after the image, try putting this:
    Code:
    <div style="display:inline; vertical-align:middle;">
    Enter some text here.
    </div>

  • #6
    New Coder
    Join Date
    May 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @KENSHN111
    I tried that, but except for the .content div (border box) and the picture, else everything vanished.
    Attached Thumbnails Attached Thumbnails How to place image &amp; text in nested DIVs-problem3.jpg  

  • #7
    New Coder
    Join Date
    May 2010
    Posts
    79
    Thanks
    15
    Thanked 2 Times in 2 Posts
    Can't you just put the text after the <img> tag? Like what DanInMa said.

  • #8
    New Coder
    Join Date
    May 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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....ss3_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.

  • #9
    New Coder
    Join Date
    May 2010
    Posts
    79
    Thanks
    15
    Thanked 2 Times in 2 Posts
    I downloaded the page, along with the css.
    and found out that ".content" has "overflow:hidden;"
    Code:
    .content {width:996px;
    		border:double;
    		height:190px;
    		background:#2F8AE0;
    		overflow:hidden;
    		margin:30px auto;
    		padding:0px 0px 0px 0px;}
    This is your custom.css
    Code:
    
    .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:
    Code:
    	<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:
    Code:
    	<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:
    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. :/

  • Users who have thanked kenshn111 for this post:

    coolygreen (05-09-2011)

  • #10
    New Coder
    Join Date
    May 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @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.
    Last edited by coolygreen; 05-09-2011 at 08:03 AM.

  • #11
    New Coder
    Join Date
    May 2010
    Posts
    79
    Thanks
    15
    Thanked 2 Times in 2 Posts
    Oh, it came along when I saved your page.

  • #12
    New Coder
    Join Date
    May 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The same page faulters in IE. The third from left, goes downward. Any ideas?
    Attached Thumbnails Attached Thumbnails How to place image &amp; text in nested DIVs-problem5.jpg  


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •