CSS Drive forums | Help with postioning

Help with postioning

Posted: 08 June 2006 08:33 AM

[ Ignore ]

Newbie

Total Posts: 2

Joined 2006-06-08

I need some help. I’m trying to align/float the #text tag in the css to the right. For some reason the code centre aligns it! I’ve tried for ages to sort this out an am running out of ideas. See code below,

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<!-- Source: Dynamic Drive CSS Library -->
<!-- URL: http://www.dynamicdrive.com/style/ -->
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">

#blueblock{
width: 180px;
border: 1px solid;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
color: #CCCCCC;
}

* html #blueblock{ /*IE 6 only */
w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
}

#blueblock ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#blueblock li {
border-bottom: 1px solid ;
height: 20px;
margin: 0;
}

#blueblock li a{
display: block;
height: 20px;
padding: 5px 5px 5px 8px;
border-left: 10px solid 
border-right: 10px solid 
background-image: url(button_grey.gif);
width: 157px;
}

html>body #blueblock li a{ /*Non IE6 width*/
width: auto;
}

#blueblock li a:hover{
background-image: url(blue.gif);
color: white;
height: 20px;
list-style-type: disc;
}


#head {

border-style: solid;
border-color: #CCCCCC;
border-weight: 1px;
background-image: url(New_banner_1.gif);
width: 900px;
height: 200px;
float: top;
}

#text {
float: right
}

body {
background-image: url(background.gif);
background-repeat: no-repeat;
height: 700px;
width: 550px ;

}

</style>
</head>
<body>
<div id="head">

</div>
<br>
<br/>

<div id="blueblock">
<ul>
<li><a href="index.v2.htm" target="_self">Homepage</a></li>
<li><a href="About_Us.htm" target="_self">About Us</a></li>
<li><a href="Products.htm" target="_self">Products</a></li>
<li><a href="Examples.htm" target="_self">Examples</a></li>
<li><a href="Find_Us.htm" target="_self">Find Us</a></li>
<li><a href="Contact Us.htm" target="_self">Contact Us</a></li>
</ul>
</div>


<span style="FONT-SIZE: small; COLOR: #000000; FONT-FAMILY: Trebuchet MS; TEXT-DECORATION: underline">3 Warwick Close<br />
   Market Bosworth<br />
   Warwickshire<br />
   C000 099<br />
   Phone: 0116 000000<br />
   E-Mail:<br/>
   <a href="mailto:Sales@Leicestercobble.co.uk?subject=Question for Leicester Cobble&amp;body=Please type your question here">sales@leicestercoe.co.uk</a>
</span>

<p align="right">
<div id="text">
problem text. I what this on the right!!
</div>
</p>
</body>
</html> 

Any help would be gratefully received,

Thanks

Profile

soupdragon

Posted: 09 June 2006 11:09 AM

[ Ignore ] [ # 1 ]

Newbie

Total Posts: 2

Joined 2006-06-08

Finally I’ve sorted it! For anyone else who has a problem of this nature here is the fix.

body {
background-image: url(background2.gif);
background-repeat: no-repeat;
width: 500px;
height: 700px;
} 

The problem was in the body tag. I’d spesified a width for the body of the doc and therefore you could’nt right align to the extreme right because the body did’nt go that far.

To sort it out I had 2 options (I think?)

body {
background-image: url(background2.gif);
background-repeat: no-repeat;
width: 100%;
height: 700px;
} 

This would make the body as large as the image used for the background (I Think).

Second remove the width all together.

Thanks

Profile

‹‹ Nested <div> problem CSS Job ››