471,605 Members | 1,459 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,605 software developers and data experts.

simple aligning of text on two different sides of a div

realin
254 100+
hi guys,

i know i am really bad at CSS .. i just cant ever get things, the way i want to .. so in the end i have to compromise :(

but i am asking you this question.. cause i cannot compromise in this..
Well i want to adjust texts in to extreme sides of a div
the source of the page is ::

Expand|Select|Wrap|Line Numbers
  1. <div class='info'>
  2.     <img src=./ask/img/cup.gif width=50 height=50 id='uio' />
  3.         <div id='dateinfo'><ul><li>July12,2009</li><li>kok</li></ul>
  4.             </div>                    
  5.                     <div class='data'>admin<br>
  6.                 39&nbsp;posts
  7.                     </div>
  8. </div>    
  9.  
The CSS for this ::

Expand|Select|Wrap|Line Numbers
  1. .info{
  2. padding:5px 0px 0px 3px;
  3. background:#F3F6FB;
  4. height:70px;
  5. margin-top:2px;
  6. border-bottom:1px solid #CDDAEF;
  7.  
  8. }
  9.  
  10. #dateinfo ul{
  11. float:right;
  12. position:relative;
  13. }
  14. #dateinfo li{
  15. list-style:none;
  16. }
  17.  
  18. .data{
  19. margin-left:10px;
  20. float:left;
  21.  
  22. }
  23.  
  24.  
  25.  
It shows perfect in IE but messed in FFx..
there must be something to do with position and stuff..
can you jus guide me.. thanks :)


AND yeah here is the doctype which i am using
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
Oct 1 '07 #1
14 1474
drhowarddrfine
7,435 Expert 4TB
The problem is IE, as always. While IE may be showing what you want, it is actually displaying a bug. Elements are NOT to expand to contain floated elements. Firefox is performing correctly.

Just add 'overflow:auto' to #info and give it a little more height to accomodate the content. Also, don't forget quotes around your src for the image.
Oct 1 '07 #2
realin
254 100+
The problem is IE, as always. While IE may be showing what you want, it is actually displaying a bug. Elements are NOT to expand to contain floated elements. Firefox is performing correctly.

Just add 'overflow:auto' to #info and give it a little more height to accomodate the content. Also, don't forget quotes around your src for the image.
hello,

thanks for the reply.. now my info looks like


Expand|Select|Wrap|Line Numbers
  1. .info{
  2. padding:5px 0px 0px 3px;
  3. background:#F3F6FB;
  4. height:100px;
  5. margin-top:2px;
  6. border-bottom:1px solid #CDDAEF;
  7. overflow:auto;
  8.  
  9. }

but the problem is still there.. i have even enclosed the image name along with its path in single quotes, as it was left by chance.. but still no luck ..

What do i do now ??

thanks :)
Oct 2 '07 #3
drhowarddrfine
7,435 Expert 4TB
Are you clearing your cache? It works for me.
Oct 2 '07 #4
realin
254 100+
Are you clearing your cache? It works for me.
yup ofcourse i cleared the 50MB cache that ffx holds.. and refreshed it.. i also tried copying the above code to a new file test.html and opened but no luck :(

it still gives the same problem ..
Oct 2 '07 #5
drhowarddrfine
7,435 Expert 4TB
Then I must misunderstand the problem. Originally you said you wanted "to adjust texts in to extreme sides of a div" which I wasn't sure what you meant, but I saw the div didn't expand to contain the floats so I thought that was the real problem. So I guess I lost sight of the real issue but I don't know what you mean by "adjust texts in to extreme sides of a div".
Oct 2 '07 #6
realin
254 100+
Then I must misunderstand the problem. Originally you said you wanted "to adjust texts in to extreme sides of a div" which I wasn't sure what you meant, but I saw the div didn't expand to contain the floats so I thought that was the real problem. So I guess I lost sight of the real issue but I don't know what you mean by "adjust texts in to extreme sides of a div".
its just like in here..
see above the post..
where the name realin is written and a pic is entitled

on the right extreme we have the date and time and the thread or post number.

so this way i wanna represent text..
Oct 2 '07 #7
drhowarddrfine
7,435 Expert 4TB
If you want the text on the right to have a margin, add 'margin-right:10px' to '#dateinfo ul'. If you do not want the margin on the left text, remove 'margin-left:10px' from '.data'.
Oct 2 '07 #8
realin
254 100+
i dont know why i am unable to explain you with the problem..
well this picture shows it all.. i want to remove the void i am showing in this pic.
this void isnt shown in IE though..
http://img231.imageshack.us/my.php?image=voidhc3.gif

thanks
Oct 2 '07 #9
it's the image on the left, try reversing these two lines...


[HTML]
<div id='dateinfo'><ul><li>July12,2009</li><li>kok</li></ul>
</div>
<img src=./ask/img/cup.gif width=50 height=50 id='uio' />
[/HTML]

im new at giving advise, normally taking it. so i hope it helps, and sorry if im wrong.
Oct 2 '07 #10
drhowarddrfine
7,435 Expert 4TB
Ah, now I see. English is not your native tongue so it wasn't quite clear what you wanted.

I didn't look at recordlovelife's solution but, yes, the image is causing the gap. An image is 'inline' so it occupies the full width of the page. You can float the image left for a partial cure but you also need to remove the margins for the <ul>
Expand|Select|Wrap|Line Numbers
  1. .info{
  2. padding:5px 0px 0px 3px;
  3. background:#F3F6FB;
  4. height:70px;
  5. margin-top:2px;
  6. border-bottom:1px solid #CDDAEF;
  7.  
  8. }
  9.  
  10. #dateinfo ul{
  11. float:right;
  12. position:relative;margin-right:10px;
  13. margin:0
  14. }
  15. #dateinfo li{
  16. list-style:none;
  17. }
  18.  
  19. .data{
  20. margin-left:10px;
  21. float:left;
  22.  
  23. }
  24. .info img{
  25.     float:left
  26. }
Oct 2 '07 #11
realin
254 100+
it's the image on the left, try reversing these two lines...


[HTML]
<div id='dateinfo'><ul><li>July12,2009</li><li>kok</li></ul>
</div>
<img src=./ask/img/cup.gif width=50 height=50 id='uio' />
[/HTML]

im new at giving advise, normally taking it. so i hope it helps, and sorry if im wrong.
hi thanks for the help.. but still its the same :(
Oct 2 '07 #12
realin
254 100+
Ah, now I see. English is not your native tongue so it wasn't quite clear what you wanted.

I didn't look at recordlovelife's solution but, yes, the image is causing the gap. An image is 'inline' so it occupies the full width of the page. You can float the image left for a partial cure but you also need to remove the margins for the <ul>
Expand|Select|Wrap|Line Numbers
  1. .info{
  2. padding:5px 0px 0px 3px;
  3. background:#F3F6FB;
  4. height:70px;
  5. margin-top:2px;
  6. border-bottom:1px solid #CDDAEF;
  7.  
  8. }
  9.  
  10. #dateinfo ul{
  11. float:right;
  12. position:relative;margin-right:10px;
  13. margin:0
  14. }
  15. #dateinfo li{
  16. list-style:none;
  17. }
  18.  
  19. .data{
  20. margin-left:10px;
  21. float:left;
  22.  
  23. }
  24. .info img{
  25.     float:left
  26. }

hey wow this just worked
much of thanks :)
Oct 2 '07 #13
hi thanks for the help.. but still its the same :(

in Safari, it fixes it. I just saw though, that in FF it doesn't. Ill keep pokin'.
Oct 2 '07 #14
#dateinfo ul{
float:right;
margin:0;
padding:0;
}

that fixed it for me in Safari and FF
Oct 2 '07 #15

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Graham Cross | last post: by
2 posts views Thread by richards1052 | last post: by
1 post views Thread by Linux Boy via .NET 247 | last post: by
73 posts views Thread by Claudio Grondi | last post: by
2 posts views Thread by Griff | last post: by
8 posts views Thread by David Barr | last post: by
unstoppablekatia
10 posts views Thread by unstoppablekatia | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by MichaelMortimer | last post: by
reply views Thread by CCCYYYY | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.