SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Confused over positioning

    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.
    Code HTML4Strict:
    <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>
    All those who wander aren't lost.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Just float them:
    Code:
    <!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

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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,
    All those who wander aren't lost.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ahh ok

    You would absolutely position them like this:
    Code:
    <!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.

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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... 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
    All those who wander aren't lost.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by emaarkhan View Post
    i wish i could have a very in depth study of positioning coz many of times in my work.
    Just keep practising and testing things out like you are doing and eventually it will fall into place.

    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.

  7. #7
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    here
    All those who wander aren't lost.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks - fixed

  9. #9
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Thanks - fixed
    Off Topic:

    no problem

    btw i was looking into expand/collapse div thingy. i see it involve some JS. not fully css based.right?
    All those who wander aren't lost.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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).


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •