PDA

View Full Version : Liquid column with graphic border?



lpeek
Apr 24th, 2009, 06:56 PM
I'm having trouble creating a 3 column layout which includes images as the border (they must be images as its a rounded-corner layout)

The problem I'm having is that I cannot get the left and right graphics to extend the full size of the div. Obviously this is because the parent div doesn't contain a height value as its a liquid layout so height: 100%; cannot be used.

Does anyone have another solution other than using a background image within the content div? As this is not an option becuase I have many divs that are also different widths so a fixed width graphic repeated 'y' wont work.

Cheers!

BoldUlysses
Apr 24th, 2009, 07:06 PM
Can you show us what you have already? Post your full HTML and CSS (in [CODE][/CODE] tags) or a link to your test site (preferable).

VIPStephan
Apr 24th, 2009, 07:07 PM
How about nesting divs then? It’s a little nasty but it works.


<div>
<div>
<div>
<div>
content here
</div>
</div>
</div>
</div>

This would be the standard setting for a four corner layout. Each div would get a corner background image and the outermost div would get the background color in addition. The innermost div would get padding applied for the content.
You can use the same principle for graphical borders.

lpeek
Apr 24th, 2009, 07:19 PM
Can you show us what you have already? Post your full HTML and CSS (in
tags) or a link to your test site (preferable).

Yes sorry here is what i have, :)
I have simplified it slightly.

html:




<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>title</title>

</head>

<body>

<div id="wrap">

<div class="content_box">

<span class="corner_tl"></span>
<span class="side_top"></span>
<span class="corner_tr"></span>

<div>

<span class="side_left"></span>

<div class="box_cont">
CONTENT OF BOX
</div>

<span class="side_right"></span>

</div>

<span class="corner_bl"></span>
<span class="side_bottom"></span>
<span class="corner_br"></span>

</div>


</div>

</body>

</html>



and the CSS file :



/* CSS Document */

/*============================================================
Page body/font style
============================================================*/

body {
margin:0px;
background-color:#171717;
color:#c9c9c9;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:12px;
text-alight:center;
}


/*============================================================
Page Layout
============================================================*/

#wrap { width: 900px; margin: 0 auto; }


.content_box {
width:600px;
float:left;
}

.corner_tl { display:block; width:20px; height:20px; background:url(../images/box_tlc.gif) no-repeat; float:left; }
.corner_tr { display:block; width:20px; height:20px; background:url(../images/box_trc.gif) no-repeat; float:left; }
.corner_bl { display:block; width:20px; height:20px; background:url(../images/box_blc.gif) no-repeat; float:left; }
.corner_br { display:block; width:20px; height:20px; background:url(../images/box_brc.gif) no-repeat; float:left; }

.side_top { display:block; width:560px; height:20px; background:url(../images/box_ts.gif) repeat-x; float:left; }
.side_left { display:block; width:20px; height:100%; background:url(../images/box_ls.gif) repeat-y; float:left; }
.side_right { display:block; width:20px; height:100%; background:url(../images/box_rs.gif) repeat-y; float:left; }
.side_bottom { display:block; width:560px; height:20px; background:url(../images/box_bs.gif) repeat-x; float:left; }

.box_cont {
width:560px;
background-color:#171717;
float:left;
}

lpeek
Apr 24th, 2009, 07:20 PM
How about nesting divs then? Itís a little nasty but it works.


<div>
<div>
<div>
<div>
content here
</div>
</div>
</div>
</div>

This would be the standard setting for a four corner layout. Each div would get a corner background image and the outermost div would get the background color in addition. The innermost div would get padding applied for the content.
You can use the same principle for graphical borders.

I have tried nesting divs, but because the parent div doesnt contain a height value the inner divs wont expand the full height?

VIPStephan
Apr 24th, 2009, 07:35 PM
These nested divs naturally collapse to the height of the innermost div (or the height of the content of that div, respectively). Of course, if you float that inner box the outer boxes collapse to zero. You have to float the outermost box for that to work or specify a new block formatting context (http://codingforums.com/showthread.php?p=766405).

BoldUlysses
Apr 24th, 2009, 07:37 PM
Based on a quick scan of your code, the source of this page (http://www.sufferndesign.com/helping/site44.html) might interest you. Another incidental item of note is the lack of a DOCTYPE (http://www.alistapart.com/articles/doctype/) on your page--this is essential if you want your page to look the same cross-browser.

lpeek
Apr 24th, 2009, 10:10 PM
Ah I see, That link looks like it will come in handy and give me a good idea on how to achieve it! Thanks for that!

And thanks to VIPStephan too, I believe I had just nested the divs the wrong way. I had just used a <div></div> within the parent, instead of adding the content within the nested div.


Also msuffern, thanks for that about the DOCTYPE, the page has got one, I just removed it from the code posted here to simplify what I was showing, I should have really kept that in. Thanks for letting me know though!