css positioning problem

Page 1 of 1

12 Replies - 1047 Views - Last Post: 30 August 2010 - 12:45 PM

#1 Guest_Barda*

Reputation:

css positioning problem

Posted 30 August 2010 - 06:09 AM

Hey!

I'm a beginner in writing sites in html/css and I've run into a problem.
I posisioned my div's on my site, but when I scale down the broser, 1 div ( the showcase) slides of the screen.

Here's a picture to understand my problem:
Posted Image

And when I scale down the browser:
Posted Image

And here is the code that I used:
Html:

<html>

<head>

<title>Welcome at SlackBoom.com !  -  The Best Place to Play Free Online Flash Games !</title>
<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>
<center>
<div id"container">
<div id="header">This is a header</div>
<div id="showcase">This is a  showcase</div>
<div id="poll">This is a poll</div>
<div id="footer">This is a footer</div>
</div>
</center>
</body>
</html>

and the css code:

#container {
    width: 900px;
   }

#header { 
   background-color: red;
   width:900px;
   height: 100px;
   }

#showcase { 
   background-color: green;
   position:relative;
   right:150px;
   width: 600px;
   height: 100px;
   }

#poll { 
   background-color: blue;
   position:relative;
   left:300px;
   bottom:100px;
   width: 300px;
   height: 100px;
   }

#footer { 
   background-color: purple;
   position: relative;
   bottom: 100px;
   width:900px;
   height: 100px;
   clear:both;
   }

thanks

Is This A Good Question/Topic? 0

Replies To: css positioning problem

#2 PhunkRabbit

D.I.C Regular

Reputation: 81

Posts: 406
Joined: 23-August 10

Re: css positioning problem

Posted 30 August 2010 - 06:48 AM

You should be floating your div's not positioning them.

Was This Post Helpful? 0

#3 drhowarddrfine

D.I.C Regular

Reputation: 39

Posts: 275
Joined: 28-July 10

Re: css positioning problem

Posted 30 August 2010 - 08:54 AM

The reason is you have positioned it 150px from the right of where it normally would be. As you zoom in, the div gets larger but will still be 150px from the right side and expands beyond where it normally would be end.

PhunkRabbit, on 30 August 2010 - 06:48 AM, said:

You should be floating your div's not positioning them.

BS if I ever heard it.

This post has been edited by drhowarddrfine: 30 August 2010 - 08:53 AM

Was This Post Helpful? 0

#4 guru_freak

New D.I.C Head

Reputation: 3

Posts: 2
Joined: 30-August 10

Re: css positioning problem

Posted 30 August 2010 - 09:06 AM

<html>
<head>
<style type="text/css">
#container {
width: 900px;
margin:0 auto;
}
#header {
background-color: red;
width:900px;
height: 100px;
}
#c1{width:900px;
display inline;}
#showcase {
background-color: green;
float:left;
width: 600px;
height: 100px;
}
#poll {
background-color: blue;
float:left;
width: 300px;
height: 100px;
}
#footer {
clear:both;
background-color:yellow;
width:900px;
height: 100px;
}
</style></head>

<body>

<div id"container">
<div id="header">This is a header</div>
<div id="c1">
<div id="showcase">This is a showcase</div>
<div id="poll">This is a poll</div></div>
<div id="footer">This is a footer</div>
</div>

</body>
</html>

use this

This post has been edited by guru_freak: 30 August 2010 - 09:16 AM

Was This Post Helpful? 1

#5 guru_freak

New D.I.C Head

Reputation: 3

Posts: 2
Joined: 30-August 10

Re: css positioning problem

Posted 30 August 2010 - 09:20 AM

<html>
<head>
<style type="text/css">
#container {
width: 100%px;
margin:0 auto;
}
#header {
background-color: red;
width:100%;
height: 100px;
}
#c1{width:100%;}
#showcase {
background-color: green;
float:left;
width: 60%;
height: 100px;
}
#poll {
background-color: blue;
float:left;
width: 40%;
height: 100px;
}
#footer {
clear:both;
background-color:yellow;
width:100%;
height: 100px;
}
</style></head>

<body>

<div id"container">
<div id="header">This is a header</div>
<div id="c1">
<div id="showcase">This is a showcase</div>
<div id="poll">This is a poll</div></div>
<div id="footer">This is a footer</div>
</div>

</body>
</html>

u can also use dis to dynamically change the content according to browsers width.

Was This Post Helpful? 2

#6 PhunkRabbit

D.I.C Regular

Reputation: 81

Posts: 406
Joined: 23-August 10

Re: css positioning problem

Posted 30 August 2010 - 09:52 AM

drhowarddrfine, on 30 August 2010 - 02:54 PM, said:

PhunkRabbit, on 30 August 2010 - 06:48 AM, said:

You should be floating your div's not positioning them.

BS if I ever heard it.

Floating is better than positioning unless there is a specific need for positioning.

Was This Post Helpful? 0

#7 drhowarddrfine

D.I.C Regular

Reputation: 39

Posts: 275
Joined: 28-July 10

Re: css positioning problem

Posted 30 August 2010 - 10:05 AM

PhunkRabbit, on 30 August 2010 - 09:52 AM, said:

Floating is better than positioning unless there is a specific need for positioning.

And positioning is better than floating unless there is a specific need for floating.

Most people abuse the float property.

Was This Post Helpful? 0

#8 PhunkRabbit

D.I.C Regular

Reputation: 81

Posts: 406
Joined: 23-August 10

Re: css positioning problem

Posted 30 August 2010 - 10:13 AM

drhowarddrfine, on 30 August 2010 - 04:05 PM, said:

PhunkRabbit, on 30 August 2010 - 09:52 AM, said:

Floating is better than positioning unless there is a specific need for positioning.

And positioning is better than floating unless there is a specific need for floating.

Most people abuse the float property.

How do you abuse float?

Efficient use of floats:

http://phunkrabbit.co.uk/_dev/example/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome at SlackBoom.com ! - The Best Place to Play Free Online Flash Games !</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
<center>
<div id="container">
    <div id="header">This is a header</div>
    <div id="showcase">This is a showcase</div>
    <div id="poll">This is a poll</div>
    <div id="footer">This is a footer</div>
    <p class="clear"></p>
</div>
</center>
</body>
</html>

body,div,p { padding:0; margin:0; }

body { text-align:center; }
div { text-align:left; }

.clear { clear:both; }

#container {
    width: 900px;
	margin:0 auto;
}

#header { 
   background-color: red;
   width:900px;
   height: 100px;
   float:left;
}

#showcase { 
   background-color: green;
   float:left;
   width: 600px;
   height: 100px;
   }

#poll { 
   background-color: blue;
   float:left;
   width: 300px;
   height: 100px;
   }

#footer { 
   background-color: purple;
   float:left;
   width:900px;
   height: 100px;
}

@OP - there is the = missing from the container ID declaration, also unless your intending to use HTML5 then you should be using a valid doc type.

The use of floats gives many benifits, not only is it the correct way (imo) to code your css layout unless there is a really valid reason to use positioning it also provides less cross browser issues.

Was This Post Helpful? 1

#9 drhowarddrfine

D.I.C Regular

Reputation: 39

Posts: 275
Joined: 28-July 10

Re: css positioning problem

Posted 30 August 2010 - 10:21 AM

PhunkRabbit, on 30 August 2010 - 10:13 AM, said:

The use of floats gives many benifits, not only is it the correct way (imo) to code your css layout unless there is a really valid reason to use positioning it also provides less cross browser issues.

To the contrary, there are for more issues with float than there are with positioning. It's first reasoning was for images that have text wrapping around them, for example. It was never intended for placing block level elements, as in this case. In fact, positioning makes more sense.

This post has been edited by drhowarddrfine: 30 August 2010 - 10:22 AM

Was This Post Helpful? 0

#10 barda

New D.I.C Head

Reputation: 0

Posts: 1
Joined: 30-August 10

Re: css positioning problem

Posted 30 August 2010 - 10:35 AM

thank you phunk rabbit !!! :smile2:

EDIT: also, your code and guru freaks code work well ( guru only needed to add a center tag;)

that missing '=' solves my problem (pratially)

floating doens't work for me ( or I don't get floating to work is a better description)

but by using positioning, my page is extremely long...

what can I do about that?

ps: still me but I registered, so not a guest anymore

This post has been edited by barda: 30 August 2010 - 10:46 AM

Was This Post Helpful? 0

#11 PhunkRabbit

D.I.C Regular

Reputation: 81

Posts: 406
Joined: 23-August 10

Re: css positioning problem

Posted 30 August 2010 - 11:09 AM

Welcome to the board Barda. Make sure you brouse the forum rules, its a great place to learn!

Floats are easy! Ill try and make it a bit more clear for you.

Floating an element left will make it go as far left and up as possible.

Say you have two elements within a container:

<div id="container">
     <div id="elem1"></div>
     <div id="elem2"></div>
</div>

Our container is 500 pixels wide, both our elements are 400 pixels wide.
Floating them both left will make the stack upon each other.

If both our elements are say 250 pixels wide they will float next to each other.

Think of floated elements like puzzle pieces, they only fit next to each other if the shape(size) is right.

The key to floats are generally width, margin, padding and clearing.

Providing the widths are set (some elements will defualt to 100% width), ensure your using a good CSS reset (search for eric meyers css reset (sorry for spelling)) and make sure you are clearing your floats.

http://www.w3schools...s/css_float.asp

Was This Post Helpful? 1

#12 suniahk

New D.I.C Head

Reputation: 6

Posts: 27
Joined: 22-May 10

Re: css positioning problem

Posted 30 August 2010 - 12:32 PM

As far as the float vs. positioning argument is concerned, either one works. Both have their own bugs when used in block level positioning. I prefer floating myself, but that doesn't make positioning wrong. Either way, the bickering back and forth didn't really help the OP at all.

And to clarify for the OP, it's a good idea to not use the <center> tag. No, it's not outdated (yet), but with HTML 5 approaching it's a "best practice" to use CSS methods for styling (that's what it's there for!). That's where the margin: 0 auto; line in the container comes in that has popped up here and there in the thread. You're telling the container that you want it to have no space between it and the top of the browser window, and that you want the horizontal margin on both sides to automatically be set based on the browser width.

Was This Post Helpful? 0

#13 PhunkRabbit

D.I.C Regular

Reputation: 81

Posts: 406
Joined: 23-August 10

Re: css positioning problem

Posted 30 August 2010 - 12:45 PM

suniahk, on 30 August 2010 - 06:32 PM, said:

<center> is depreciated which means it is outdated.

Quote

Deprecated

A deprecated element or attribute is one that has been outdated.

Deprecated elements may become obsolete in the future, but browsers should continue to support deprecated elements for backward compatibility.

http://www.w3schools.../tag_center.asp

Was This Post Helpful? 0

Page 1 of 1