Limiting CSS borders to width of text

Hi,

I'm trying to upgrade my knowledge to be table-free.

Here's what I want to do.

I'm writing a guide to how to use an electronic item that has a 2-line LCD screen.

I'm trying to use CSS functions to draw what is on the LCD screen on the webpage - with a set monospace font, and a border around it to mark the edge of the screen. This will mean I can just input the raw text each time, and let the CSS do the work of making it look like the screen.

How can I make the border the same width as the longest line of text?

I've tried various arrangements of <div> and <br>, but none seem to stop the CSS border from spreading to fill the whole width of the screen.

I tried specifying the CSS width in pixels, but it is inconsistent from browser to browser.

Is there a function/method I'm missing that will make the border snuggle up around the longest line of text?

Here is the relevant code, if anyone can help...

CODE

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

body {
background-color: #ffffff;
margin: 5%;
}

.lcd {
font-family: monospace;
font-size: 16px;
font-weight: bold;
background-color: #bfe2f9;border-style: ridge;
border-width: 8px;
border-color: #000000;
padding: 2px;
position: relative;
left: 10px;
}

.main {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}

h1 {
font-size: 16px;
}

</style>

</head>

<body>

<div class="main">
<h1>Power On</h1>
<p>When the power is connected, the charger will initially display a screen showing the model and version.<br>The first usable screen will show the last charge setting you used, and look a little like this...</p>
<div class="lcd">
<div>CHARGE MODE</div>
<div>NiMH1050mAh  6CL</div>
</div>
</div>

</body>

</html>

/CODE

Thanks

Limiting CSS borders to width of text

Trying not to use tables

sosidge

john_k

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week