Member Avatar for Lolalola

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
  • 72 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by ko ko

Recommended Answers

All 4 Replies

Member Avatar for ticalico

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>
Member Avatar for ko ko

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.