1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

div float

Discussion in 'CSS' started by yonip, Mar 30, 2011.

0
  1. #1
    hi.
    I have a title div for my site.
    the div contains image and text.
    I want the image will be in the right-bottom corner,
    and the text will be in the left-bottom corner.
    I try to set to the img float:right;
    and to the text float:left; but then, the text is in the left-top corner,
    and both the text and the img are outside on the main div.
    What can I do?
    thanks for help.
     
    yonip, Mar 30, 2011 IP
  2. style0

    style0 Peon

    Messages:
    108
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You need to put the text in a div of its own inside the main title div, and float the text div left and the img right, and then you need to clear the floats:


    <div class="my_title_div">
    <div class="my_text_div">All of my text goes in here and it will look fine</div>
    <img class="my_image" src="some_picture.gif"/>
    <div class="clear"></div>
    </div>

    and some css, seting the widths just as example:

    div.my_title_div {
    width:700px;
    }
    div.my_text_div {
    float:left;
    width:500px;
    }
    img.my_image {
    float:right;
    width:200px;
    }
    div.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    }
     
    style0, Mar 30, 2011 IP
  3. job0107

    job0107 Peon

    Messages:
    23
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Tables are mainly used to organize column style content but sometimes they can be used to organize and glue a page layout together.
    There are things that can be done easily with tables that are hard to do otherwise.
    Here I am using a table as a basic container for a more difficult layout.
    Within the inner tables you can manipulate div's, span's and other elements as you wish.
    This particular layout shows you a simple way to deal with your problem.
    
<html>
<head>
<style>
.tb1
{
 width:100%;
 height:100%;
 border-collapse:collapse;
 }
.tb2
{
 width:100%;
 height:100%;
 }
.header
{
 background:#aaf;
 }
.tdt
{
 border-top:1px solid #000;
 border-left:1px solid #000;
 border-right:1px solid #000;
 }
.tdl
{
 border-bottom:1px solid #000;
 border-left:1px solid #000;
 }
.tdm
{
 border-bottom:1px solid #000;
 }
.tdr
{
 border-bottom:1px solid #000;
 border-right:1px solid #000;
 }
.tda
{
 border:1px solid #000;
 border-top:none;
 background:#faa;
 }
#tr3
{
 height:100%;
 }
</style>
</head>
<body>
<table class="tb1" cellspacing="0" cellpadding="0">
 <tr>
  <td class="header">
   <table class="tb2" cellspacing="0" cellpadding="0">
    <tr><td colspan="3" align="center" class="tdt">Upper header content here.</td></tr>
    <tr>
     <td align="left" valign="bottom" class="tdl">Some text<br />on the left.</td>
     <td align="center" class="tdm"><br /><br /><br /><u>Text in the middle.</u><br />You could also use valign="top"<br />to position the text at the top.<br />space<br />space<br />space<br />space<br />space<br />space<br />space<br />space<br />space<br />space</td>
     <td align="right" valign="bottom" class="tdr"><img src="" alt="my image" width="100" height="100" /></td>
    </tr>
   </table>
  </td>
 </tr>
 <tr id="tr3">
  <td>
   <table class="tb2" cellspacing="0" cellpadding="0">
    <tr>
     <td class="tda" valign="top">Main content here.</td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td>
   <table class="tb2" cellspacing="0" cellpadding="0">
    <tr>
     <td class="tda" valign="top">Footer goes here.</td>
    </tr>
   </table>
  </td>
 </tr>
</table>
</body>
</html>
    HTML:
     
    job0107, Mar 30, 2011 IP
  4. yonip

    yonip Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Its work. Thanks for the help.
     
    yonip, Mar 31, 2011 IP