homepage Welcome to WebmasterWorld Guest from 54.211.47.170
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Position div according to screen resolution
prasanth_v




msg:4488368
 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




msg:4488402
 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




msg:4488412
 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




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

Hi there Lucy,

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

birbrain

prasanth_v




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

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

lucy24




msg:4488559
 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 ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved