Divs in a row

hessodreamy · #1 (**permalink**) Nov 15th, 2005, 13:12

I'm trying to make some variable -length custom buttons by using a div containing text with an image background. Fair play. But to make it a rounded button I want to have another image either side of the text div. I can't figure out how to put them all in a row, with no gaps between them, and have the center div vary in length according to the length of the text.
Have a look:
http://www.aocd00.dsl.pipex.com/buttons.html

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<body>
<div style="background: white url(left.jpg) no-repeat; height:43px;"></div><div style="background-image: url(mid.jpg); height:43px;vertical-align:middle;">hello</div>
<div style="background: white url(right.jpg) no-repeat;height:43px; "></div>
</body>
</html>

hessodreamy · #2 (**permalink**) Nov 15th, 2005, 15:58

Is ok I've got it fixed now using widths and floats:

For the final touch I've brought the text into the middle of the button by putting it in a <p> with a top padding.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<body>
<div style="background: white url(left.jpg) no-repeat; height:43px; float:left; width:30px;"></div>
<div style="background-image: url(mid.jpg); height:43px;vertical-align:middle;text-align:center;float:left;color:white; font-weight:bold;"><p style="padding-top:10px">I've got a luvverly bunch of coconuts</p></div>
<div style="background: white url(right.jpg) no-repeat;height:43px;float:left; width:30px; "></div>
</body>
</html>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Having two divs which do not affect each other?	LGS	Web Page Design	11	Oct 28th, 2007 23:41
Style with DIVS	cyberseed	Web Page Design	5	Oct 31st, 2006 14:37
Divs in a row	hessodreamy	Web Page Design	5	Feb 17th, 2006 18:40

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Divs in a row