Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

[CSS]Not positioning right

  • 24-10-2007 01:54AM
    #1
    Seachmall
    Registered Users, Registered Users 2 Posts: 7,041 ✭✭✭


    I have a number of divs and only #contact is positioning correctly. They should be 1cm below the one above but instead they're all 0cm. Any help? 
    body{
	margin: 0px;
	padding: 0px;
	text-align: center;
}
#wrap{	
	text-align: left;
	position: relative;
	margin: auto;
	width: 19cm;
	height: 26cm;
	padding: 0px;
	border: 1px solid #000000;
}
#header{
	position: relative; 
	top: 0cm;
	left: 0cm;
	width: 19cm;
	height: 4cm;
	border: 1px solid #000000;
}
#header #dateId{
	position: relative; 
	bottom: 0cm;
	right: 0cm;
	width: 5.5cm;
	height: 2cm;
	border: 1px solid #000000;
}
#contact{
	position: relative;
	top: 1cm;
	left: 0cm;
	width: 9cm;
	height: 3cm;
	border: 1px solid #000000;
}
#fault{
	position: relative;
	top: 1cm;
	left: 0cm;
	width: 9cm;
	height: 3cm;
	border: 1px solid #000000;
}
#details{
	position: relative;
	top: 1cm;
	left: 0cm;
	width: 14.5cm;
	height: 7cm;
	border: 1px solid #000000;
}
#signatures{
	position: relative;
	top: 1cm;
	right: 0cm;
	width: 10.5cm;
	height: 2cm;
	border: 1px solid #000000;
}
#plugtest{
	position: relative;
	top: 1cm;
	left: 0cm;
	width: 10.5cm;
	height: 1cm;
	border: 1px solid #000000;
}
    HTML 
    <div id="wrap">

<div id="header">rr
	<div id="dateId">rr</div>
</div>
<div id="contact">rr</div>
<div id="fault">rr</div>
<div id="details">rr</div>
<div id="signatures">rr</div>
<div id="plugtest">ff</div>

</div>


Comments

  • #2
    ianhobo
    Registered Users, Registered Users 2 Posts: 413 ✭✭ianhobo


    This will fix it, I added it below and it works (added a 1cm margin)

    body{
	margin: 0px;
	padding: 0px;
	text-align: center;
}
#wrap{
	text-align: left;
	position: relative;
	margin: auto;
	width: 19cm;
	height: 26cm;
	padding: 0px;
	border: 1px solid #000000;
}
#header{
	position: relative;
	top: 0cm;
	left: 0cm;
	width: 19cm;
	height: 4cm;
	border: 1px solid #000000;
}
#header #dateId{
	position: relative;
	bottom: 0cm;
	right: 0cm;
	width: 5.5cm;
	height: 2cm;
	border: 1px solid #000000;
}
#contact{
	position: relative;
	top: 1cm;
	left: 0cm;
	width: 9cm;
	height: 3cm;
	border: 1px solid #000000;
}
#fault{
	position: relative;
	top: 1cm;
	left: 0cm;
	width: 9cm;
	height: 3cm;
	border: 1px solid #000000;
	margin-top: 1cm;
}
#details{
	position: relative;
	top: 1cm;
	left: 0cm;
	width: 14.5cm;
	height: 7cm;
	border: 1px solid #000000;
	margin-top: 1cm;
}
#signatures{
	position: relative;
	top: 1cm;
	right: 0cm;
	width: 10.5cm;
	height: 2cm;
	border: 1px solid #000000;
	margin-top: 1cm;
}
#plugtest{
	position: relative;
	top: 1cm;
	left: 0cm;
	width: 10.5cm;
	height: 1cm;
	border: 1px solid #000000;
	margin-top: 1cm;
}


  • #3
    Evil Phil
    Registered Users, Registered Users 2 Posts: 7,468 ✭✭✭Evil Phil


    I'll move this over to the webmaster forum.


  • #4
    squibs
    Closed Accounts Posts: 975 ✭✭✭squibs


    As a general comment, I find CSS indispensible for most things, but am thinking about ditching it for positioning for all but the simplest of projects. The complex ones invariably turn out to be a long twisting journey on the quest to find hacks to get all the browser versions to work.

    Table positioning rules. There - I said it....


Advertisement