[CSS] How to make a border wrap around the contents?

**feraira** · 10-31-2006, 02:58 PM

I have ads on my website: 468 x 66 (or something similar). I want a border around it, 2px, but to fit just around the size I need.

div#ads {
border: 1px solid black;
text-align:center;
padding: 0px;
}

Can someone please add to that?

**chrishirst** · 10-31-2006, 03:25 PM

border: 2px;

**feraira** · 10-31-2006, 03:34 PM

Now theres NO border??? =/

**chrishirst** · 10-31-2006, 03:39 PM

whoops put the semi-colon there by habit

border: 2px style colour;

**feraira** · 10-31-2006, 03:47 PM

Quote:

Originally Posted by chrishirst

whoops put the semi-colon there by habit

border: 2px style colour;

No problem! Still no border though!

www.search4style.co.uk

**chrishirst** · 10-31-2006, 04:15 PM

do we get to see more code ? or a URI?

**feraira** · 10-31-2006, 04:32 PM

I gave a URI- http://search4style.co.uk/

Code:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Search4Style.co.uk # If you're going to search, seach 4 style!</title>
<style type="text/css">
body {
background: white;
color: black;
}
h3#slogan {
font-style:italic;
font-variant:small-caps;
font-size: 95%;
}
td#ttitles {
font-weight:bold;
font-variant:small-caps;
}
div#ads {
border: 2px style color;
text-align:center;
padding: 2px;
}
div#searchbox {

}
div#header {
text-align:center;
}
</style>
<body>
<div id="header" />
<a href="#"><img src="./img/logo.gif" border="0" alt="If you're going to search, search with style!"></a>
<h3 id="slogan" />If you're going to search, search with style!</h3>
</div>
<div id="searchbox" align="center"/>
<form name="qry" action="" method="post" />
<table>
	<tr>
		<td align="center" />Please enter your search criteria below:</td>
		<td align="center" />Please choose what you wish to search for:</td>
	</tr>
	<tr>
		<td /><input type="text" name="criteria" size="60" /></td>
		<td /><select name="what"><option selected="selected">Please Select</option><option>test</option><option>Test2</option></select></td>
	</tr>
	<tr>
		<td colspan="2" align="center" /><input type="submit" value="Search" />&nbsp;<input type="reset" value="Reset" /></td>
	</tr>
</table>
</form>
</div>
<div id="info" align="center" />
<table border="0" width="70%">
	<tr>
		<td class="ttitles" align="center" />5 Newest Entries</td>
		<td class="ttitles" align="center" />5 Top Rated</td>
		<td class="ttitles" align="center" />5 Last Reviews</td>
	</tr>
	<tr>
		<td><a href="#" />HDUK - Skipton</a></td>
		<td><a href="#" />MyHair - Keighley</a></td>
		<td><a href="#" />Scooby's - Bradford</a></td>
	</tr>
	<tr>
		<td><a href="#" />MyHair - Keighley</a></td>
		<td><a href="#" />Scooby's - Bradford</a></td>
		<td><a href="#" />HDUK - Skipton</a></td>
	</tr>
	<tr>
		<td><a href="#" />Scooby's - Bradford</a></td>
		<td><a href="#" />HDUK - Skipton</a></td>
		<td><a href="#" />MyHair - Keighley</a></td>
	</tr>
	<tr>
		<td><a href="#" />Bango Hair - Ilkley</a></td>
		<td><a href="#" />Top-Notch - Ingrow</a></td>
		<td><a href="#" />Ali's Hair... - Utley</a></td>	
	</tr>
	<tr>
		<td><a href="#" />Ali's Hair... - Utley</a></td>
		<td><a href="#" />Bango Hair - Ilkley</a></td>
		<td><a href="#" />Top-Notch - Ingrow</a></td>
	</tr>
</table>
</div>
<div id="ads" />

</div>
<p>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://search4style.co.uk/">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></a>
&nbsp;
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a>
</p>
</body>
</html>

**chrishirst** · 10-31-2006, 04:42 PM

the idea is to replace "style" with the style of border you wish eg: solid | dotted | dashed etc and "colour" with your choice of either colourname (red, black, yellow etc) or a colourcode (#ff0000, #000000, #ffff00 etc)

**feraira** · 04:48 PM

Quote:

Originally Posted by chrishirst

the idea is to replace "style" with the style of border you wish eg: solid | dotted | dashed etc and "colour" with your choice of either colourname (red, black, yellow etc) or a colourcode (#ff0000, #000000, #ffff00 etc)

lol...

I had that before:
border: 2px solid black;

Doesn't work.. well it does; but doesnt wrap about what i want it to. If i try specify width then it just messes up..

How do you specify how WIDE a border is?
I've just realised, width means the actualy sides of the border, not it's width!

**chrishirst** · 10-31-2006, 05:08 PM

Right, now we can see what you are getting at

What you want is for the container to take the size of the content with a border around that but be centred.

You cannot do that with a single <div>. A div is a block element, so will occupy 100% of the available width.
One way would be to wrap the adverts in a span with a 2px border rule defined, then wrap that inside a parent div with text-align: center; applied to that

like so

HTML Code:

<div style="padding-top:2px;text-align:center;"><span style="border:2px solid black;margin:2px 0px 0px 0px;">Adverts go in here</span></div>

The 2px padding on the top of the parent container is to make IE show the top border, otherwise it puts it under the non-existent border of the parent

**feraira** · 10-31-2006, 05:14 PM

Nevermind.

Problem solved with MARGIN-LEFT and MARGIN-RIGHT.