0

Hi, how to make that div "left and "rigth" would have 50% empty window. And div "center" always be the center.
Now div make one after another

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div.body{
margin:0;
padding:0;
}
div.left{
float: left;
width: 50%;
height: 686px;
background-color: #336699;
}
div.center{
float: left;
width: 700px;
height: 686px;
background-color: #5292d9;
}
div.banner{
height: 200px;
}
div.right{
float: left;
width: 50%;
height: 686px;
background-color: #336699;
}

</style>

</head>
<body>
<div class = "left">
</div>
<div class = "center">
    <div class = "banner">
	    <img src="banner.jpg" />
	</div>
</div>
<div class = "right">
</div>
</body>
</html>
3
Contributors
4
Replies
5
Views
8 Years
Discussion Span
Last Post by ko ko
0

I'm not sure if understand the question, but i'm guessing you want 3 columns, if that's so, you can try....

div.left{

float: left;

width: 25%;

height: 686px;

background-color: #336699;

}

div.center{

float: left;

width: 50%;

height: 686px;

background-color: #5292d9;

}

div.banner{

height: 200px;

}

div.right{

float: left;

width: 25%;

height: 686px;

background-color: #336699;

}

Hi, how to make that div "left and "rigth" would have 50% empty window. And div "center" always be the center.
Now div make one after another

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div.body{
margin:0;
padding:0;
}
div.left{
float: left;
width: 50%;
height: 686px;
background-color: #336699;
}
div.center{
float: left;
width: 700px;
height: 686px;
background-color: #5292d9;
}
div.banner{
height: 200px;
}
div.right{
float: left;
width: 50%;
height: 686px;
background-color: #336699;
}

</style>

</head>
<body>
<div class = "left">
</div>
<div class = "center">
    <div class = "banner">
	    <img src="banner.jpg" />
	</div>
</div>
<div class = "right">
</div>
</body>
</html>
0

Your theory is wrong. Left and right were 50% of width, so the total width of these two elements is the full size of the window, and there is no space for center element. The point is you need the center element has the fixed width and the left and right were decided by the resolution. So, you must give standard width for the center. How much width do you want for the center? And how much resolution is the standard to use?For example, you design based on 1024 resolution, you give the center element width to 600px wide. It means it has 60% of the browser width. So you can give the left and right half of 40%, each has 20% width. But this is not good. You should set all element width for percentage value. Or try with absolute position. Here is the example.

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	margin: 0;
	padding: 0
	}
div.body{
    margin:0;
    padding:0;
    }
div.left{
	position: absolute;
	left: 0;
	top: 0;
    width: 20%;
    height: 686px;
	background-color: #336699;
    }
div.center{
    width: 600px;
    height: 686px;
	margin: 0 auto;
    background-color: #5292d9;
    }
div.banner{
    height: 200px;
    }
div.right{
    position: absolute;
	top: 0;
	right: 0;
    width: 20%;
    height: 686px;
    background-color: #336699;
    }
</style>
</head>
<body>
<div class = "left">
</div>
<div class = "center">
<div class = "banner">
<img src="banner.jpg" />
</div>
</div>
<div class = "right">
</div>
</body>
</html>

It would help a little. But not the good solution too. Try with percentage values for all, that is the best solution I think.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.