2 replies [Last post]
jonbon
Offline
newbie
Last seen: 13 years 35 weeks ago
Joined: 2006-11-18
Posts: 3
Points: 0

I have a little issue with my css layout. The issue I'm having is when ever I resize my browser to smaller, my layout moves off the screen. I'm using float for my positions. The resolution of my screen is 1680x1050, if anyone is wondering.

this is the html

visual pixels : beta v1

This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
2007-09-29 22:03:48
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
2007-09-29 22:02:06
asdasdasd
0000-00-00 00:00:00
asdsadasdad
0000-00-00 00:00:00
asdasdas
0000-00-00 00:00:00
ok work *beep*
0000-00-00 00:00:00
./jiljl
0000-00-00 00:00:00
kkkkkkk
0000-00-00 00:00:00
Ok i hope this works.
0000-00-00 00:00:00
asdsadasdad
0000-00-00 00:00:00

this is the css

/* CSS Document */
body {
background-color:#FFFFFF;
background-image:url(images/banner_bg.png);
background-repeat:repeat-x;
background-position:top;
}

#logo {
float:left;
width:395px;
height:139px;
margin-left:0px;
margin-top:0px;
background-image:url(images/logo.png);
background-repeat:no-repeat;
background-position:left;
}

#content {
float:left;
width:1024px;
height:auto;
margin-left:-375px;
margin-top:150px;
}

#news {
float:left;
width:500px;
height:auto;
margin-left:auto;
margin-top:auto;
border-left-color:#000000;
border-left-style:dashed;
border-left-width:thin;
border-bottom-color:#000000;
border-bottom-width:medium;
border-bottom-style:dashed;
border-right-color:#000000;
border-right-style:dashed;
border-right-width:thin;
border-top-color:#000000;
border-top-style:dashed;
border-top-width:thin;
}

.news_hdr {
width:500px;
height:22px;
margin-left:auto;
margin-top:auto;
background-image:url(images/news.png);
background-repeat:no-repeat;
background-position:left;
background-color:#000000;
}

#news_cnt {
float:left;
margin-left:10px;
margin-top:-10px;
margin-right:5px;
}

#links {
float:left;
width:250px;
height:300px;
margin-top:auto;
margin-left:50px;
border-left-color:#000000;
border-left-style:dashed;
border-left-width:thin;
border-bottom-color:#000000;
border-bottom-width:medium;
border-bottom-style:dashed;
border-right-color:#000000;
border-right-style:dashed;
border-right-width:thin;
border-top-color:#000000;
border-top-style:dashed;
border-top-width:thin;
}

.links_hdr {
width:250px;
height:22px;
margin-left:auto;
margin-top:auto;
background-image:url(images/links.png);
background-repeat:no-repeat;
background-position:left;
background-color:#000000;
}

also when I change the margin-left and margin-top to 0 in the content div, and put my browser max, it goes to the side.

I also have a link if you wanna see for yourself

http://www.86pixels.com/test

any suggestions or fixes, would be lovely.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 47 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Change #content to #content

Change #content to

#content { clear:left; }

is that what you're trying to accomplish?

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

jonbon
Offline
newbie
Last seen: 13 years 35 weeks ago
Joined: 2006-11-18
Posts: 3
Points: 0

Deuce wrote:Change #content

Deuce wrote:
Change #content to

#content { clear:left; }

is that what you're trying to accomplish?

yes thats what i was trying to do, thanks a bunch ^^