Announcement

**flyingfisch** · Sep 1, 2011, 03:28 PM

try using this code:

HTML:

Code:

<span class="bracket">{</span>
<div id="motto">Experience that delivers</div>
<div id="paragraph">paragraph text</div>
<span class="bracket">}</span>

CSS:

Code:

.bracket {
float: left;
padding-left: 3%;
}

#motto {
float: left;
padding-left: 3%;
width: 60%;
}

paragraph {
float: left;
padding-left: 3%
width: 35%
}

**olepix** · Sep 2, 2011, 12:11 AM

Still doesn't work

the right hand bracket keeps on dropping. I've spent all day trying to get this to work. I don't even know what to do anymore.

Thanks for your help

**vikram1vicky** · Sep 2, 2011, 01:07 PM

Try to adjust width, padding and margin.... it will solve your issue surely....

**Stardog** · Sep 2, 2011, 02:03 PM

Im guessing you're chopping up an image from PS? That's not really the way to do it. I would only make the two brackets images (or just text if you have the right font).

HTML

Code:

<body>

	<div id="site-width">

		<div class="bracket-left">
		<div class="bracket-right">
		
			<div id="content">
				<div id="title">Experience that delivers</div>
				<div id="paragraph">Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah .</div>
			</div>
		
		</div>
		</div>
		
	</div>

</body>

CSS

Code:

body {
	font-family:Arial, Helvetica, sans-serif;
}

#site-width {
	margin:auto;
	width:900px
}

.bracket-left {
	/* LEFT BRACKET IMAGE */
	background:url(bracket.jpg) no-repeat left;
}
.bracket-right {
	/* RIGHT BRACKET IMAGE */
	background:url(bracket.jpg) no-repeat right;
}

#content {
	/* HEIGHT = BRACKET IMG HEIGHT */
	height:100px;
}
#title {
	float:left;
	width:50%;
	border:1px solid black;
	/* MARGIN = BRACKET IMG WIDTH */
	margin-left:60px;
	font-size:2.5em;
}
#paragraph {
	float:right;
	width:30%;
	border:1px solid black;
	/* MARGIN = BRACKET IMG WIDTH */
	margin-right:60px;
	font-size:.7em;
}

Announcement

Can't get this text layout to work

Can't get this text layout to work

Comment

Comment

Comment

Comment