Position div according to screen resolution

Forum Moderators: not2easy

Message Too Old, No Replies

Position div according to screen resolution

prasanth_v

2:40 am on Aug 26, 2012 (gmt 0)

Hi, I have the following div ids.

#left{
width:150px;
height:500px;
background:#00FFCC;
float:left;}

#right{
width:150px;
height:500px;
background:#993333;
float:left;}

#middle{
height:500px;
background:#FF0000;
float:left;}

What I need is, I want to keep the left and right width constant. I want the middle div expands or shrinks according to the screen resolution so that the outputs fits perfectly to any screen.

Can anybody help me?

birdbrain

9:32 am on Aug 26, 2012 (gmt 0)

Hi there prasanth_v,

and a warm welcome to these forums. ;)

Try it like this...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Untitled Document</title>

<style type="text/css">
#left {
   float:left;
   width:130px;
   height:480px;
   padding:10px;
   background-color:#0fc;
   text-align:center;
  }
#right {
   float:right;
   width:130px;
   height:480px;
   padding:10px;
   background-color:#933;
   text-align:center;
  }
#middle {
   height:480px;
   padding:10px;
   margin:0 150px;
   background-color:#f00;
   text-align:center;
  } 
</style>

</head>
<body>

<div id="left">left</div>

<div id="right">right</div>

<div id="middle">middle</div>

</body>
</html>

birdbrain

lucy24

11:06 am on Aug 26, 2012 (gmt 0)

I couldn't get past

background:#00FFCC;
and
background:#993333;
and
background:#FF0000

on the same page. Just thinking about it makes my eyes hurt :(

birdbrain

11:28 am on Aug 26, 2012 (gmt 0)

Hi there Lucy,

unlike you girls, I am not colour coordinated. ;)

birbrain

prasanth_v

1:45 am on Aug 27, 2012 (gmt 0)

Hi Lucy, the colors are just given for a demonstration only....

lucy24

4:32 am on Aug 27, 2012 (gmt 0)

Whew. I was hoping you'd say that. I've used some pretty garish colors that way myself ;)