Confused over positioning

HTML & CSS
1

hey folks,
i been trying to get positioning right as paul said in sticky but i can’t make it work. coz different browser render it differently. now in paul css sticky about position. he says relative positioning will be rarely used. so it got me thinking of using absoulte. to place each column next to each other. using left and top position. but it didn’t work. so now i am stuck to find how to make a 3 column work next to eachother. i know in floats its easy but how do i do it in position. here is my html code.

<html> 
	<head> 
		<title>CSS</title> 
	<style type="text/css"> 
	#wrapper{
	margin:auto;
	border:1px solid pink;
	<!-- height:500px; -->
	}
	.div1{
	background:#f3f;
	width:200px;
	height:500px;
	}
	.div2{
	background:#777;
	width:200px;
	height:500px;
	left:200px;
	position:absoulte;
	top:0;
	border:1px solid blue;
	}
	.div3{
	background:#505;
	width:200px;
	height:500px;
	top:0px;
	left:400px;
	position:absoulte;
	}
	.div1,div2,div3{float:left;}
	</style> 
	</head> 
	
	<body> 
	<div id="wrapper"> 
		<div class="div1"></div> 
			<div class="div2"></div> 
				<div class="div3"></div> 
	</div> 
	<body> 
</html>
2
Off Topic:

no problem

btw i was looking into expand/collapse div thingy. i see it involve some JS. not fully css based.right?

3

Thanks - fixed :slight_smile:

4

lately i been too cranky about spells, as i write much of code by on notepad. anyhow. the purpose of my this demonstration was ro get a grip on positioning. though i am clear about floats (thanks to u) but i wanna be clear about positioning. like you said practice and play to see what happens where abd why,

5

Ahh ok :slight_smile:

You would absolutely position them like this:


<!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>CSS</title>
<style type="text/css">
#wrapper {
    margin:auto;
    position:relative;
    width:100&#37;;
}
.div1, .div2, .div3 {
    border:1px solid blue;
    width:200px;
    height:500px;
    position:absolute;
    left:0;
    top:0;
}
.div1 {
    background:#f3f;
}
.div2 {
    background:#777;
    left:205px;
}
.div3 {
    background:#505;
    left:410px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</div>
<body>
</html>

The wrapper has position:relative added which serves as a starting point for the absolute children. They are then placed at top:0 and the left position shifted across for each.

6

thanks paul! your the best. btw what i was doing before was making the wrapper absolute and then making each of div inside wrapper relative. as to what i thought was. what should be div relative to. so i though to myself to the other relative element. just like the word suggest, relative which is each block of element is relative to other. but its the other way around… :lol: i wish i could have a very in depth study of positioning coz many of times in my work. its like i created a square and i want its corner to have rounded edges and i can do that by overlapping the the corners with rounded images. etc etc…

Off Topic:

your link to 3 column basic on your website isn’t working

7
Off Topic:

here

8

Just keep practising and testing things out like you are doing and eventually it will fall into place.:slight_smile:

Off Topic:

your link to 3 column basic on your website isn’t working

Do you have a link to the missing page in question. My site got hacked with hidden spam links and I had to delete most of the pages and upload new ones so I may have missed some out.

9

Just float them:


<!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>CSS</title>
<style type="text/css">
#wrapper {
    margin:auto;
    border:1px solid pink;
    overflow:hidden;
}
.div1 {
    background:#f3f;
}
.div2 {
    background:#777;
}
.div3 {
    background:#505;
}
.div1, .div2, .div3 {
    float:left;
    border:1px solid blue;
    margin:0 5px 0 0;
    display:inline;
    width:200px;
    height:500px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</div>
<body>
</html>

You don’t want to use absolute positioning because that will remove the elements from the flow and make it awkward to have any following content.

Also usually you would not want height on the elements either or they can’t expand with content.

Run your code through the css validator as you have spelled “absolute” incorrectly and have a lot of other typos in there also :slight_smile:

10

Any hide and show that is persistent is done with javascript (apart from the in-page link effect tricks which aren’t generally suitable for common use).