|
| Aligning Text |
 |
Mon, 16 Apr 2007 15:35:50 -040 |
hi,
I have the following code but the text won't align on the left hand side
. Works fine on IE7 and FF.
Any help would be appreciated. Thanks in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title</title>
<script type="text/javascript">
function hide() {
var tag = document.getElementById("top3");
tag.style.display="none";
}
</script>
<style type="text/css">
div#container
{
width: 1024px;
border: 1px black solid;
margin-left: auto;
margin-right: auto;
height: 100%;
}
div#inside
{
float: left;
}
div#top1
{
border: 1px black solid;
height: 100%;
width: 100px;
background-color: red;
float: left;
margin: 5px;
}
div#top2
{
border: 1px black solid;
height: 100px;
width: 100px;
background-color: green;
float: left;
clear: left;
margin: 5px;
}
div#top3
{
border: 1px black solid;
height: 100px;
width: 100px;
background-color: blue;
float: left;
clear:left;
margin: 5px;
}
div#bottom1
{
border: 1px black solid;
height: 100px;
width: 100px;
background-color: red;
float: left;
clear: left;
margin: 5px;
}
div#bottom2
{
border: 1px black solid;
height: 100px;
width: 100px;
background-color: green;
float: left;
clear: left;
margin: 5px;
}
div#bottom3
{
border: 1px black solid;
height: 100px;
width: 100px;
background-color: blue;
float: left;
clear: left;
margin: 5px;
}
div.left
{
float: left;
}
div.right
{
margin-left: 112px;
padding: .5em;
}
</style>
</head>
<body>
<div id="container">
<div class="left">
<div id="top1" onclick="hide();">
Top 1
</div>
<div id="top2" onclick="show();">
Top 2
</div>
<div id="top3">
Top 3
</div>
<div>
<div id="bottom1">
Bottom 1
</div>
<div id="bottom2">
Bottom 2
</div>
<div id="bottom3">
Bottom 3
</div>
</div>
</div>
<div class="right">
TextTextTextTextTextTe TextTextTextTextTextText
TextTextTextTextTextText TextTextTextTextText TextTextTextTextTextxt
TextTextTextTextTextTe TextTextTextTextTextText
TextTextTextTextTextText TextTextTextTextText TextTextTextTextTextxt
TextTextTextTextTextTe TextTextTextTextTextText
TextTextTextTextTextText TextTextTextTextText TextTextTextTextTextxt
TextTextTextTextTextTe TextTextTextTextTextText
TextTextTextTextTextText TextTextTextTextText TextTextTextTextTextxt
</div>
</div>
</body>
|
| Post Reply
|
| Re: Aligning Text |
 |
Fri, 20 Apr 2007 10:26:07 +020 |
On Mon, 16 Apr 2007 15:35:50 -0400, Kaushal Shah wrote:
> hi,
> I have the following code but the text won't align on the left hand side
> . Works fine on IE7 and FF.
[snip]
> <body>
> <div id="container">
>
> <div class="left">
Give this div a border to see what is going on:
<div class="left" style="border: thin solid
blue">
I don't know why this elements has the dimensions
it has, but I wouldn't rule out a bug in Opera. If
you set the width to 112px (the same as 'margin-left'
on the right div, it works in Opera. But considering
that all the child elements are floated, couldn't you
just remove this div?
|
| Post Reply
|
| Re: Aligning Text |
 |
Fri, 20 Apr 2007 13:39:04 +000 |
On Fri, 20 Apr 2007 10:26:07 +0200, Nisse Engström
<news.NOSPAM.gokyoZPGx@luden.se> wrote:
> On Mon, 16 Apr 2007 15:35:50 -0400, Kaushal Shah wrote:
>
> > hi,
> > I have the following code but the text won't align on the left hand
side
> > . Works fine on IE7 and FF.
>
> [snip]
>
> > <body>
> > <div id="container">
> >
> > <div class="left">
>
> Give this div a border to see what is going on:
>
> <div class="left" style="border: thin solid
blue">
>
> I don't know why this elements has the dimensions
> it has, but I wouldn't rule out a bug in Opera. If
> you set the width to 112px (the same as 'margin-left'
> on the right div, it works in Opera. But considering
> that all the child elements are floated, couldn't you
> just remove this div?
I think it might be a bug. The width of the containing div is
calculated as if the three floating top (or bottom) divs were
side by side. In other words in calculating the width Opera
appears to ignore the "clear: left" in the style.
There's also a bug in the Developer Console. When displaying the
metrics for the floated divs the size of the content includes the
width of the border.
--
Matthew Winn
|
| Post Reply
|
| Re: Aligning Text |
 |
Fri, 20 Apr 2007 22:55:24 -040 |
> On Fri, 20 Apr 2007 10:26:07 +0200, Nisse Engström
<news.NOSPAM.gokyoZPGx@luden.se> wrote:
>> On Mon, 16 Apr 2007 15:35:50 -0400, Kaushal Shah wrote:
>>
>>> hi,
>>> I have the following code but the text won't align on the left hand
side
>>> . Works fine on IE7 and FF.
>> [snip]
>>
>>> <body>
>>> <div id="container">
>>>
>>> <div class="left">
>> Give this div a border to see what is going on:
>>
>> <div class="left" style="border: thin solid
blue">
>>
>> I don't know why this elements has the dimensions
>> it has, but I wouldn't rule out a bug in Opera. If
>> you set the width to 112px (the same as 'margin-left'
>> on the right div, it works in Opera. But considering
>> that all the child elements are floated, couldn't you
>> just remove this div?
>
> I think it might be a bug. The width of the containing div is
> calculated as if the three floating top (or bottom) divs were
> side by side. In other words in calculating the width Opera
> appears to ignore the "clear: left" in the style.
>
> There's also a bug in the Developer Console. When displaying the
> metrics for the floated divs the size of the content includes the
> width of the border.
>
This is exactly what I am trying to do, i.e. To keep the floated objects
on the left hand side and start from 113th Pixel.
By the way, the border seems to be fine with the adjustments it's only
the text that seems to be misaligned.
Any way thanks for responding.
|
| Post Reply
|
| Re: Aligning Text |
 |
Fri, 20 Apr 2007 23:17:15 -040 |
Matthew Winn wrote:
> On Fri, 20 Apr 2007 10:26:07 +0200, Nisse Engström
<news.NOSPAM.gokyoZPGx@luden.se> wrote:
>> On Mon, 16 Apr 2007 15:35:50 -0400, Kaushal Shah wrote:
>>
>>> hi,
>>> I have the following code but the text won't align on the left hand
side
>>> . Works fine on IE7 and FF.
>> [snip]
>>
>>> <body>
>>> <div id="container">
>>>
>>> <div class="left">
>> Give this div a border to see what is going on:
>>
>> <div class="left" style="border: thin solid
blue">
>>
>> I don't know why this elements has the dimensions
>> it has, but I wouldn't rule out a bug in Opera. If
>> you set the width to 112px (the same as 'margin-left'
>> on the right div, it works in Opera. But considering
>> that all the child elements are floated, couldn't you
>> just remove this div?
>
> I think it might be a bug. The width of the containing div is
> calculated as if the three floating top (or bottom) divs were
> side by side. In other words in calculating the width Opera
> appears to ignore the "clear: left" in the style.
>
> There's also a bug in the Developer Console. When displaying the
> metrics for the floated divs the size of the content includes the
> width of the border.
>
This is exactly what I am trying to do, i.e. To keep the floated objects
on the left hand side and start from 113th Pixel.
Also, I can't remove the <div class="left"> as the text in IE
appears
in the middle of the page instead of starting from the top.
|
| Post Reply
|
|
|
|
|
|
|
|
|
|