Forums

hoven002

Hello there,

I hope somebody can help me with a 'width' problem I am facing with my layout.

I put an example on the website www.werkstuk.com
If you make the screen smaller you can see that the blue 'content-div' is moving
beneath the 'index-div'! I can't figure out what the right css code is to solve this problem.
In IE7 and FF it works great.

See the code here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>MM Masterpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<head>

<style type="text/css">
* {
margin: 0;
padding: 0;
}
#banner {
position: relative;
height: 100px;
width: 100%;
background-color: red;
}
#wrappermain {
float: left;
width: 100%
}
#index {
float: left;
width: 200px;
height: 400px;
background-color: orange;
/*display: none;*/
}
#content {
/*float: left;*/
width: auto;
margin-left: 200px;
height: 400px;
overflow: auto;
background-color: silver;
}
* html #content { /* Star HTML patch for IE6 */
width: 80%; /* Why can I not use value 'auto' */
background-color: blue;
}
#footerend {
clear: both;
width: 100%;
height: 25px;
background-color: green;
}
</style>

</head>
<body>
<div id="banner">BANNER</div>
<div id="wrappermain">
<div id="index">INDEX</div>
<div id="content">
CONTENT<br />
<img src="pixel2000breed.gif" />
<img src="pixel2000hoog.gif" />
</div>
</div>
<div id="footerend">FOOTEREND</div>
</body>
</html>

Best regards,
Kenneth

Ramesh

check out this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MM Masterpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
* {
margin: 0;
padding: 0;
}

#banner {
position: relative;
height: 100px;
width: 100%;
background-color: red;
}
#wrappermain {
float: left;
width: 100%
}
#index {
float: left;
width: 200px;
height: 400px;
background-color: orange;
clear:left;
/*display: none;*/
}
#content {
/*float: left;*/
width: auto;
margin-left: 200px;
verflow: auto;
height:400px;
background-color: silver;
clear:right;
}

#footerend {
clear: both;
width: 100%;
height: 25px;
background-color: green;
}
</style>

</head>
<body>
<div id="banner">BANNER</div>
<div id="wrappermain">
<div id="index">INDEX</div>
<div id="content">
CONsdfsdfsdfdsfsdfsdfsdfsdfsdfsdfsdfsdfsd sdfsd sdf s df sd dsf sdfsd df sfsfsdfsdfsdfsdfsdfsdfsdfsdfsdTENT<br />
<img src="pixel2000breed.gif" />
<img src="pixel2000hoog.gif" />
</div>
</div>
<div id="footerend">FOOTEREND</div>
</body>
</html>

hoven002

Ramesh, thanks for helping me, but adding the 'clear: right' atrribute doesn't solve my problem!
If this isn't what you meant, what am I doing wrong?

Regards,
Kenneth

Ramesh

not only clear i have add many things u just copy the html code and check it out

hoven002

Hello Ramesh,

If you look in IE6 with the following link: http://www.werkstuk.com/ramesh.html
you will see your code. Do you see that the layout is still not in place...
Other suggestions?

Ramesh

its coming fine for me in ie6

ikthius

@ramesh,

it looks fine on your IE but did you change your screen resolution for your test as the original poster said, it happens on smaller screens

@hoven

I will have a look at this later dude, if you don't get it fixed soon

hoven:
I checked out your code in firebug, I played about, but I think having a % and pixel values is causing you problems, so I changed a few things, if you don't mind

before the code, here is a question 100% - 200px does that leave 80%??

I think thats why your code was not behaving how you wanted it to, so I made it 100% - 20% = 80%

full code for you to test:


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">

<head>
<title>MM Masterpage</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />
</head>
<head>

<style type=\"text/css\">
* {
margin: 0;
padding: 0;
}
#banner {
position: relative;
height: 100px;
width: 100%;
background-color: red;
}
#wrappermain {
float: left;
width: 100%
}
#index {
float: left;
width: 20%;
height: 400px;
background-color: orange;
/*display: none;*/
}
#content {
position:absolute;
float: right;
width: auto;
top:100px;
left:20%;
right:0px;
bottom:0px;
height: 400px;
overflow: auto;
background-color: silver;
}
* html #content { /* Star HTML patch for IE6 */
width: 80%; /* Why can I not use value 'auto' */
background-color: blue;
}
#footerend {
clear: both;
width: 100%;
height: 25px;
background-color: green;
}
</style>

</head>
<body>
<div id=\"banner\">BANNER</div>
<div id=\"wrappermain\">
<div id=\"index\">INDEX</div>
<div id=\"content\">
CONTENT<br />
<img src=\"pixel2000breed.gif\" />
<img src=\"pixel2000hoog.gif\" />
</div>
</div>
<div id=\"footerend\">FOOTEREND</div>
</body>
</html>

tested on IE6, FF in resolutions 1024x768 & 800x600

hoven002

Thanks Ikthius,

This works for me partially! Thanks.
I have to make different website with this layout where each leftdiv
has a different widht (in pixels). I will play with this a bit more.

Regards,
Kenneth

ikthius

"hoven002" said:
Thanks Ikthius,

This works for me partially! Thanks.
I have to make different website with this layout where each leftdiv
has a different widht (in pixels). I will play with this a bit more.

Regards,
Kenneth

so your trying to make your own template then???

does it have to fill in the whole page as in 100%?

hoven002

Yes I am trying to make a template! You have some tips I can use?

ikthius

"hoven002" said:
Yes I am trying to make a template! You have some tips I can use?

no not really, I am not a big fan of templates, cause not all sites end up the same.

I don't think you will get all browsers to see it the same, unless you go for tables.

ik

treehouse : what would you like to learn today?

Forums

Widht problem in IE6