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