School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Programming Help

Web Development



What's Here?

  • Members: 307,172
  • Replies: 841,965
  • Topics: 140,717
  • Snippets: 4,468
  • Tutorials: 1,165
  • Total Online: 1,575
  • Members: 92
  • Guests: 1,483

Welcome to Dream.In.Code
Become an Expert!

Join 307,172 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,575 people online right now. Registration is fast and FREE... Join Now!




wierd viewing issue

 

wierd viewing issue
ghqwerty

30 Jun, 2009 - 08:46 AM
Post #1

if($spareTime > 0){ $this->writeCode(); }
Group Icon

Joined: 8 Aug, 2008
Posts: 748



Thanked: 24 times
Dream Kudos: 25
My Contributions
ive just recently got this new css for my site

CODE
#pstats{
    position: absolute;
    top: 0;
    left: 15;
}
#staffedit{
    position: absolute;
    top: 37.5%;
    right: 20%;
}

/*
      Created by CSS Portal Layout Generator
      
      http://www.cssportal.com
            
*/

{ padding: 0; margin: 0; }

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
}

p{
padding: 10px;
}

#wrapper {
margin: 0 auto;
width: 100%;
}

#content {
float: left;
color: #333;
background: #C8C8C8;
height: 100%;
width: 92%;
display: inline;
}

#header {
color: #333;
width: 100%;
float: left;
height: 125px;
background: #669900;
}

#leftcolumn {
color: #333;
background: #669900;
height: 100%;
width: 125px;
float: left;
}


/*
      Created by CSS Portal Layout Generator
      
      http://www.cssportal.com
            
*/


and it works fine at a certainsetting however change this setting or change the browser size and then the content dissapears, any ideas why this happens ??

it actually just goes below the other stuff, and in ie it shows up completely differant :S

This post has been edited by ghqwerty: 30 Jun, 2009 - 08:51 AM

User is offlineProfile CardPM
+Quote Post


neit

RE: Wierd Viewing Issue

30 Jun, 2009 - 11:25 AM
Post #2

D.I.C Head
**

Joined: 13 Feb, 2009
Posts: 138



Thanked: 12 times
My Contributions
I am assuming you are trying to create a header and left and right column that fills the whole screen.

Although your header width is at 100% which is fine both
the content which I assume will be on the right side and the
the left column cannot be 100% in width, the combination of both should
add up to 100% eg. left column 20% content 80%.
Also only both do not need to be set to float to the left.
User is offlineProfile CardPM
+Quote Post

ghqwerty

RE: Wierd Viewing Issue

30 Jun, 2009 - 11:48 AM
Post #3

if($spareTime > 0){ $this->writeCode(); }
Group Icon

Joined: 8 Aug, 2008
Posts: 748



Thanked: 24 times
Dream Kudos: 25
My Contributions
problem is that i want the eft column to be a fixed width and then the right content section to be the rest of the page

how would i do this then ?
User is offlineProfile CardPM
+Quote Post

neit

RE: Wierd Viewing Issue

30 Jun, 2009 - 12:27 PM
Post #4

D.I.C Head
**

Joined: 13 Feb, 2009
Posts: 138



Thanked: 12 times
My Contributions
CODE

<html>
<head>
<title>test</title>
<style>

#header {width: 100%;  height: 150px; background-color: #ffcc99;}
#leftcolumn {width: 200px; background-color: #cccccc; height: 300px; float: left;}
#content {background-color: #333333; height: 300px;}
</style>

</head>

<body>
<div id="header"></div>
<div id="leftcolumn"></div>
<div id="content"></div>
</body>
</html>


Heres a quick example, obviously the colours are and heights are just so you can see what it looks like
User is offlineProfile CardPM
+Quote Post

ImportedNoob

RE: Wierd Viewing Issue

30 Jun, 2009 - 02:08 PM
Post #5

New D.I.C Head
*

Joined: 29 Jun, 2009
Posts: 7



Thanked: 1 times
My Contributions
header:
height: 10%
width: 100%

leftcolumn
height: 90%
width: 10%

content
height: 90%
width: 90%
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/21/09 07:02PM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month