[RESOLVED] CSS - Two columns, in a curved box - huh?!

**invision** · 04-09-2008 02:14 PM

Hello,

Now I want to have two very small columns of text in the one curved box.

Perhaps best to view the attached image at this stage: http://www.webdeveloper.com/forum/at...9&d=1207768436

I can store text ok(as per the first div), but as soon as I bring in two div's, the curves disappear

I have the following code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<style type="text/css">

#briefbiowrapper {
background-color:#caebfe;
width:539px;
}

.leftside {
float:left;
height:96px;
width:49%;
}

.rightside {
float:right;
height:96px;
width:49%;
}

.bl {background: url(bl.jpg) 0 100% no-repeat}
.br {background: url(br.jpg) 100% 100% no-repeat}
.tl {background: url(tl.jpg) 0 0 no-repeat}
.tr {background: url(tr.jpg) 100% 0 no-repeat; padding:5px}

</style>

</head>

<body bgcolor="#FFFFFF" text="#000000">

<div id="briefbiowrapper">
	
<div class="bl"><div class="br"><div class="tl"><div class="tr">
		leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside
</div></div></div></div>
	
</div>


<br />

<div id="briefbiowrapper">

<div class="bl"><div class="br"><div class="tl"><div class="tr">

<div class="leftside">

leftside baby

</div>

<div class="rightside">

rightside baby

</div>

</div></div></div></div>

</div>


</body>
</html>

Now the first part works a dream, see the first of the 2 in the attached image.

But the second part doesn't work. I'd like to have it split it into two columns, and still have the curvy bottom(who doesn't?!)

Please help.

Thank you!!!

**WebJoel** · 04-09-2008 03:23 PM

May not solve the immediate problem, but you are re-using a ID, -which you cannot do:

Change these to class="" and " . " and see if that helps

**invision** · 04-09-2008 03:36 PM

Yeh, I understand, just for quickness sake at the the time I used it, to show two versions.
I plan to just use one on each page

Can't think of why it isn't working

**ray326** · 04-09-2008 11:03 PM

Float clearing. Give briefbiowrapper an overflow:hidden.

**invision** · 04-10-2008 12:48 AM

OK. Thank you for your response.

Please see attached image having added 'overflow:hidden' to the wrapper with leftside and rightside in it.

I had this problem before where the bottom left and right curves don't work

Any ideas?

**WebJoel** · 04-10-2008 06:36 AM

Originally Posted by invision

....
I had this problem before where the bottom left and right curves don't work

Any ideas?

Focus on this:

.bl {background: url(bl.jpg) 0 100% no-repeat}
.br {background: url(br.jpg) 100% 100% no-repeat}

Based upon point 0,0 of the image (top, left), the image(s) for BOTTOM-LEFT and BOTTOM-RIGHT are being positioned off of the container ("100%" means exactly that).

Maybe try:.

bl {background: url(bl.jpg) bottom left no-repeat}
.br {background: url(br.jpg) bottom right no-repeat}

to position the image 'inside' of the container, not "100%" of it...

**invision** · 04-10-2008 07:37 AM

Hmm, I tried that in the CSS.

I think the problem is that the main 'briefbiowrapper' doesn't seem to think of the two div's in it, and just wraps up early.

Please see attachment to see change.

**WebJoel** · 04-10-2008 07:58 AM

Post your images so I can try this on my desktop. What you're trying to do, has been done before so something isn't working correctly.

**invision** · 04-10-2008 01:06 PM

Sorry, for such a late reply.

OK, here we go: http://www.michaelmcg.co.uk/webjoel/...iowrapper.html

**WebJoel** · 04-10-2008 02:47 PM

Your floated DIVs "leftside" and "rightside" were covering-up the 'background DIV' thus, -the curvy-corners were not visible.

If you want TWO divs in a contgainer DIV-with-curvy-corners, place the LEFT-BOTTOM and the TOP-LEFT corner image on the "leftside" DIV, and the "RIGHT-TOP and the BOTTOM-RIGHT" corner image on the "rightside" DIV:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

* {padding:0; margin:0;}
#briefbiowrapper, #briefbiowrapper2 { background-color:#caebfe; width:539px; margin:10px;}
#briefbiowrapper p, #briefbiowrapper2 p {padding:15px;}

.leftside {float:left; width:49%; margin:0;}
.rightside {float:right; width:50%; margin:0;}
.leftside p, .rightside p {padding:10px;}

.tl {background: url(tl.jpg) 0 0 no-repeat}
.tr {background: url(tr.jpg) 100% 0 no-repeat;}
.bl {background: url(bl.jpg) 0 100% no-repeat}
.br {background: url(br.jpg) 100% 100% no-repeat}

</style>

</head>
<body bgcolor="#ffffff" text="#000000">
<div id="briefbiowrapper">

<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
<p>leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside</p>
</div>
</div>
</div>
</div>

</div>

<br />

<div id="briefbiowrapper2">

<div class="leftside">
<div class="bl">
<div class="tl">
<p>leftside baby</p>
</div>
</div>
</div>

<div class="rightside">
<div class="tr">
<div class="br">
<p>rightside baby</p>

</div>
</div>
</div>

</div>

</body>

</html>

This is a buit unweildy, but this works. A simpler way to do this surely exisits...

**invision** · 04-10-2008 02:56 PM

Aaaah of course.

Seems so obvious now.

Many thanks for your efforts with this. I'm delighted

Thread: [RESOLVED] CSS - Two columns, in a curved box - huh?!

Thread Tools

Display

[RESOLVED] CSS - Two columns, in a curved box - huh?!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions