Aligning Text
Kaushal Shah
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>
</html>
Nisse Engström
> 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?
/Nisse
Matthew Winn
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
[If replying by email remove the "r" from "urk"]
Kaushal Shah
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.
Kaushal
Kaushal Shah
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.
Kaushal
Tim Altman
<news.NOSPA...@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.
Indeed, that may be the case. The problem appears to be resolved in
Kestrel, which renders the page just like Mozilla AFAICT.
--
Tim Altman
Core QA
Opera Software
Remove NO SPAM from e-mail address to reply