simple aligning of text on two different sides of a div

**drhowarddrfine** · Oct 1 '07, 08:23 PM

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.

**realin** · Oct 2 '07, 02:40 AM

Originally posted by drhowarddrfine

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

[CODE=css].info{
padding:5px 0px 0px 3px;
background:#F3F 6FB;
height:100px;
margin-top:2px;
border-bottom:1px solid #CDDAEF;
overflow:auto;

}[/CODE]

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 :)

**drhowarddrfine** · Oct 2 '07, 03:26 AM

Are you clearing your cache? It works for me.

**realin** · Oct 2 '07, 04:59 AM

Originally posted by drhowarddrfine

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 ..

**drhowarddrfine** · Oct 2 '07, 05:05 AM

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".

**realin** · Oct 2 '07, 05:19 AM

Originally posted by drhowarddrfine

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..

**drhowarddrfine** · Oct 2 '07, 01:31 PM

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'.

**realin** · Oct 2 '07, 02:16 PM

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..

ImageShack - Best place for all of your image hosting and image sharing needs

http://img231.imageshack.us/my.php?image=voidhc3.gif

Unlimited space to host images, easy to use image uploader, albums, photo hosting, sharing, dynamic image resizing on web and mobile.

thanks

**recordlovelife** · Oct 2 '07, 02:28 PM

it's the image on the left, try reversing these two lines...

[HTML]
<div id='dateinfo'>< ul><li>July12,2 009</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.

**drhowarddrfine** · Oct 2 '07, 02:45 PM

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>
[code=css]
.info{
padding:5px 0px 0px 3px;
background:#F3F 6FB;
height:70px;
margin-top:2px;
border-bottom:1px solid #CDDAEF;

}

#dateinfo ul{
float:right;
position:relati ve;margin-right:10px;
margin:0
}
#dateinfo li{
list-style:none;
}

.data{
margin-left:10px;
float:left;

}
.info img{
float:left
}[/code]

**realin** · Oct 2 '07, 02:45 PM

Originally posted by recordlovelife

it's the image on the left, try reversing these two lines...

[HTML]
<div id='dateinfo'>< ul><li>July12,2 009</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 :(

**realin** · Oct 2 '07, 02:48 PM

Originally posted by drhowarddrfine

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>
[code=css]
.info{
padding:5px 0px 0px 3px;
background:#F3F 6FB;
height:70px;
margin-top:2px;
border-bottom:1px solid #CDDAEF;

}

#dateinfo ul{
float:right;
position:relati ve;margin-right:10px;
margin:0
}
#dateinfo li{
list-style:none;
}

.data{
margin-left:10px;
float:left;

}
.info img{
float:left
}[/code]

hey wow this just worked
much of thanks :)

**recordlovelife** · Oct 2 '07, 02:49 PM

Originally posted by realin

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'.

**recordlovelife** · Oct 2 '07, 02:56 PM

#dateinfo ul{
float:right;
margin:0;
padding:0;
}

that fixed it for me in Safari and FF

simple aligning of text on two different sides of a div

simple aligning of text on two different sides of a div

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment