|
CSS - Get Sidebar/column To Fill Vertical Container Space
Argh. Tried a number of variations on this probably simple task. Nonetheless:
In this example how do I get the 'sidebar' to fill the vertical space of the container, and ensure the 'footer' remains positioned at the bottom (which it currently does) http://www.mandgweb.net/css_test/css_test.html Thank you Similar TutorialsI have read and read through the CSS2 spec and I am unable to figure out if this is possible. Hopefully I can describe it well enough for somebody to help out. Okay, what I want to accomplish seems simple. I want a div, lets call this one "container", with a calculated height/width relative to the document (in terms of percentage). Inside this div will be another div, lets call it "header", whos width will span the length of the containing div (100%) and height is fixed, lets say 30px. Now here comes the tricky part... a third div, lets call it "content" should sit right underneath "header" and its width will also be 100% of the containing div, but the height should fill the remainder of the containing div. I can't seem to get the "content" div to fill the remainder of "container" and scroll when needed. If I specify a calculated height, the offset of the "header" div is not taken into account so "content" div does not fit properly. Thanks a ton if you can help me out. Please let me know if this doesn't make sense. Hi all, The easiest way to see the problem is to look at this demo in firefox. (I haven't patched it to work in IE yet.) The menu items in the 1st 2 menu's don't expand to fill the available area. Any ideas? I'm trying to create an image that will adjust to fit the screen size and always be at least 100% of the screen. Basically, I'm looking to have the "trunk" image in the LeftBody div, always stretch to reach the image in the banner and the footer. If I have enough content, the image will repeat just fine and fill my needs, but if there is no content, how can i make the image fit the page? My code is accessible via the /Samples/ directory. Thanks so much... midcitybrewery.com/Samples/sample.html I have a question which I had trouble finding the answer to. I have a div with a width of 100% (which works out to be about 800px give or take), I then have several other div elements inside of that div. For example: Code: <div id='outer'> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> Each inside div has an identical, fixed width. What I need is for each of those inside divs to be spaced evenly so that It fills up the entire outer div. That could mean, depending on the content, that the space between each inner div is 5px, 20px, etc. Hope that makes sense. I am pretty close, but not quite there. Hi, I have a sidebar that's getting a little cramped and I would like to space them out by about 5-10px. Am using wordpress widgets for most of them so am unsure about where to find them in the code.. www.leehughes.co.uk #content #sidebar { float: right; width: 25%; } #content #sidebar p { font-size: 15px; /* dontate button) */ line-height: 22px; color: #FFFFFF; } #content #sidebar p a { color: #FFFFFF; /* dontate button) */ text-decoration: none; } #content #sidebar p a:link { color: #FFFFFF; text-decoration: none; } #content #sidebar p a:hover { color: #003366; text-decoration: none; } #content #sidebar h2 { color: #FFFFFF; /* categories button) */ font-size: 15px; } #content #sidebar h3 { font-size: 15px; color: #FFFFFF; } #content #sidebar h3 a { color: #FFFFFF; font-size: 17px; text-decoration: none; } #content #sidebar h3 a:hover { color: #003366; text-decoration: none; } #content #sidebar h2 a { color: #FFFFFF; font-size: 15px; /* Subscribe button) */ text-decoration: none; } #content #sidebar h2 a:hover { color: #003366; font-size: 15px; text-decoration: none; } #content #sidebar li { color: #0000FF; /* Bullet point of posts button) */ line-height: 20px; } #content #sidebar li a { color: #FFFFFF; /* posts button) */ font-size: 15px; text-decoration: none; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #content #sidebar li a:link { font-size: 15px; color: #FFFFFF; /* seconds posts button) */ text-decoration: none; } #content #sidebar li a:hover { color: #003366; text-decoration: underline; } #content #sidebar a { color: #000000; } http://www.ilumos.co.uk/site/ http://www.ilumos.co.uk/site/styleDefault.css Ok, I'm trying to make a page layout for my site, and on the left I have a navigation bar (#sidebar), which I'd like to fill the whitespace between it and the footer (#footer) (but not dissapear behind the footer, height: 100%). I'd also like to fill the whitespace between the left of the main (#main) div and the edge of the page, and the whitespace under the div too. If there's a non-hacky solution to this I'd love to hear it, but if there isnt, and there's a way to change my CSS/HTML to get the same result I'd still be interested. Thanks loads, ilumos Hi Folks, I'm having problems with some of the divs on my site. Here is the site with the problem areas colorized to highlight the issue... example I have 3 columns, but the problem arises in the area marked "panel2". I want the div containing this text to stretch to fill the remaining available space so that the border-left attribute reaches the footer, encapsulating the text in the middle column. I can't use the border-right attribute of the middle column because of the small indent between panels 1 and 2. I've scoured forums and googled till my fingers hurt, but can't seem to come up with a satisfactory explanation as to why I can't do this. the CSS is he styles.css Any help/suggestions or comments would be appreciated more than I can describe!! Thanks in advance!! I can't seem to pin down why I have extra space to the right of my containing DIV on my home page. All of the sub-pages (similar page layout) render fine, but the home page displays a bunch of space to the right. Any ideas? You can see what I mean at www . deepwaterchurch . com Hey guys, I have a site where I have a 3 column layout in the middle of the site. What I did to get it to work was made a container for the three column div with a relative position then gave the three column div an absolute position within it to position it correctly in the site. I want a border across all three columns to appear at the bottom of the page. Unfortunately though, because all three columns will differ in height depending on content the border appears at different places across the bottom. My quick solution was giving the container div a border bottom and give it a definite height (like 300px). That works fine, as long as any of the three column divs don't have more content that that, then the content will overlap the container div border. Okay Okay, I know you're probably tired of reading, so here's the css and markup that I have to help... The CSS: Code:
/*-- three column container --*/
#tcontent {
position: relative;
width: 758px;
height: 350px;
margin: 0 0;
padding: 0 0;
border-bottom: solid 1px #9E5459;
/*-- the three column div --*/
#leftcontainer {
position: absolute;
left: 0;
top: 0;
width: 175px;
height: auto;
}
#centercontainer {
margin-left: 175px;
margin-right: 215px;
height: auto;
}
html>body #centercontainer {
margin-left: 175px;
margin-right: 215px;
height: auto;
}
#rightcontainer {
position: absolute;
right: 0;
top: 0;
width: 215px;
text-align: left;
height: auto;
}
/*-- the divs that hold the content for each of the three columns --*/
#tleftcontent {
width: 175px;
height: auto;
margin: 30px 0 0 0;
padding: 0 0;
}
#centercontent {
float: left;
width: 327px;
height: auto;
margin: 27px 0 0 0;
padding: 0 15px 0 0;
voice-family: "\"}\"";
voice-family: inherit;
width: 342px;
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 80%;
letter-spacing: 0em;
line-height: 1.5em;
}
#rightcontent {
float: left;
width: 215px;
height: auto;
margin: 28px 0 0 0;
padding: 0 0;
}
And now the markup: Code: <div id="tcontent"> <div id="leftcontainer"> <div id="tleftcontent"> left content here </div> </div> <div id="centercontainer"> <div id="centercontent"> center content here </div> </div> <div id="rightcontainer"> <div id="rightcontent"> right content here </div> </div> If I make the height in the #tcontent div "auto", the bottom border shoots up to the top. If I give it a definite height, the copy from either of the three column content div's overlaps it. Does anyone have any ideas on how I might be able to solve this? Thanks, I know this was a long question! -B My site I am redesigning this site for a theater camp company. I want to create the effect of stage lights shining with a image rollover and am partly there. I am stuck now because I want to use an HR as the cross beam with images of stage lights directly below (take a look at the site to understand). I do not know how, or if it's possible, to line up the images directly below the HR (bar) so there is no space at all. Any help? I have a region with a div, an image and another div stacked vertically. For some reason, there are a few pixels of blank space between the image and the bottom div. http://www.brucethorn.com/index.php...maritime-sunday On another page, I have regions with a "line-height + vertical-align:middle" centering of an image that make up thumb nails. There too is a few pixels of blank space, but at the top and images, pushing them down and slightly outside of the div that contains each of them. http://www.brucethorn.com/index.php/paintings I suspect these are the same problem, but I could be wrong. The issue is most visable in FF, and noticable in Opera. I only see something sporadic for the second occurence in IE Code: body {background-color:#999999; margin:0px; padding:0px; border:0px; text-align:center; font-family:"Courier New", Courier, mono;}
h1.header {height:16px; width:800px; _width:776px; font-size:100%; font-weight:bold; margin:0px 0px 0px 24px; text-align:left; background-color:#333333;}
h2.header {margin:0px; font-size:90%; font-weight:bold;}
div {text-align:left;}
h2.infoleft {text-align:left; height:16px; width:576px; font-size:90%; margin:0px 0px 0px 24px; _margin:0px 0px 0px 12px;float:left;}
h2.inforight {text-align:right; height:16px; width:176px; font-size:90%; margin:0px 24px 0px 0px; _margin:0px 0px 0px 0px;float:left;}
div.black {background-color:#000000; color:#999999;}
div.block {margin:8px 24px 8px 24px; text-align:justify; font-size:90%;}
div.block2 {margin:8px 0px 8px 12px; _margin:0px 0px 0px 4px;}
div.block3 {margin:8px 0px 0px 12px;}
img {border:0px; margin:0px; padding:0px;}
img.left {float:left;}
img.right {float:right;}
div.bar {height:16px; width:auto; text-align:center;}
div.title {height:48px; width:800px; margin:auto;}
div.content {height:392px; width:800px; margin:auto; text-align:center;}
div.subbar {height:16px; width:800px; background-color:#333333;}
div.menu {height:18px; width:480px; float:left; margin:30px 0px 0px 20px;}
div.copyright {height:16px; width:800px; margin:auto; text-align:right; font-weight:bold; font-size:75%;}
div.scroll {height:344px; width:800px; margin:8px 0px 0px 0px; overflow:auto;}
div.filmunit {height:128px; width:128px; border:4px; border-style:solid; border-color:#000000; background-color:#999999; margin:8px; padding:0px; float:left; text-align:center; line-height:128px;}
img.filmimage {vertical-align:middle;}
This is my first css based site...i'm having a nightmare time and wonder why this is so much better than tables when its taking me 4 hours in css what takes me 5 minutes with tables? that being said if you go he www . chhs . unh . edu / v3 . html on the right side here is the issue: in FF the contained divs are larger than the containing div in IE there is like 20 pixels of space at the top of the first containted div here is the code for this section, the sidebar is the container and the other 2 are the divs inside, quicklinks is the first one. Code:
.twoColFixRtHdr #sidebar1 { width: 300px; float:right; text-align:left; background-color:#00F; padding:0px; display:inline; line-height:100%; }
div#quicklinks{
display:block;
width:300px;
margin: 0px 0px 0px 0px;
background-image:url(/images/v2/quicklinks_bg.png);
background-position:top right;
background-repeat:no-repeat;
background-color:#AEAE5D;
padding: 5px;
color:#FFF;
vertical-align:top;
}
div#photo_gallery_links{
width: 300px;
margin: 10px 0px 0px 0px;
background-image:url(/images/v2/photosbg.png);
background-position:top right;
background-repeat:no-repeat;
background-color:#283C6F;
padding: 5px;
color:#FFF;
}
can anyone help me? i haven't used a board like this in like 8 years so i'm sorry if i'm doing it wrong. thanks! i have two divs on top of eachother with images in each. there is a space i can't get rid of in IE..looks perfect in firefox. i've tried cutting out the margins and padding to no avail. seems like ie regularly has spacing problem from google searches but none of their fixes have worked yet. say you have a page with 2 main columns inside a container. the right column is a sidebar. both are supplied content dynamically. i'd like the container (inclusive) to be the height of the content column (as determined by its children), and the sidebar should scroll (vertically) its content based on that size. there's a (non-functional) example attached. if you run it you can see the container takes the height of the sidebar - it (the bordered container) should end at the bottom of the content div, and the sidebar should scroll. it's laid out using floating divs, but tables would be fine; javascript is not (per client). any ideas would be welcome. tyia. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.container {
border : 1px solid #F90; /* just to show container height */
}
.content {
float : left;
width : 400px;
height : 100%;
}
.sidebar {
float : left;
width : 400px;
height : 100%;
}
.scroller {
overflow : scroll;
height : 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
</div>
<div class="sidebar">
<div>Sidebar</div>
<div class="scroller">
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
</div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
Hey everyone, I am just touching up an old design I made, and I just noticed that Firefox has a weird white-space next to the top menu. Not sure what is causing it, but it is there. Here is a screenshot of what is happening in Firefox. Also, in IE, the container doesn't extend past the bottom menu. Here is a screenshot of what is happening in IE. So far I am just testing in Firefox 2.0.0.11 and IE7. Here is my code: html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title></title> <style type="text/css">/* <![CDATA[ */ * { padding: 0; margin: 0; } body { background-color: #6AB2DA; color: #000000; text-align: center; font-size: 13px; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; /* Thank you, Kravvitz */ } a { color: #6AB2DA; } a:focus { outline: 0 none; } #container { margin: 0 auto; text-align: justify; width: 50%; } #page { background-color: #FFFFFF; } #header { background-image: url( http://img443.imageshack.us/img443/8114/bg1bp4.jpg ); background-position: bottom left; height: 120px; width: 100%; } #header span { padding-left: 150px; padding-top: 50px; font-size: 21px; font-weight: bold; letter-spacing: -0.1em; color: #666666; display: block; } #menu { background-color: #6DC3DE; width: 100%; } #menu li { float: left; padding-top: 10px; padding-bottom: 11px; list-style-type: none; } #menu a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; } #news { clear: both; margin-top: 34px; overflow: auto; padding: 15px; height: 100px; border-bottom: 1px solid #0AA; } #news h1 { color: #6DC3DE; font-size: 21px; } #content { margin-top: 15px; padding: 15px; } #content h2 { padding-top: 10px; float: left; color: #6DC3DE; padding-right: 25px; font-size: 31px; border-right: 3px solid #6DC3DE; } #content .info { padding-top: 10px; padding-left: 25px; float: left; font-size: 11px; height: 31px; } #content p { text-indent: 45px; clear: both; border-bottom: 1px dotted #6DC3DE; padding-top: 10px; padding-bottom: 10px; } #bottom { border-top: 1px solid #6DC3DE; margin-top: 10px; padding: 5px; } #bottom ul#one { float: left; } #bottom ul#two { float: right; } #bottom li { padding-top: 10px; padding-bottom: 11px; list-style-type: none; display: block; } #bottom a { background-color: #6DC3DE; padding: 10px 20px; boreder: 2px solid transparent; color: #000000; display: block; width: 250px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* ]]> */ </style> </head> <body> <div id="container"> <div id="page"> <div id="header"><span>i.love.summer</span></div> <div id="menu"> <ul> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> <li><a href="">asdfasf</a><li> </ul> </div> <div id="news"> <h1>welcome</h1> Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. Some gibberish to make the news/etc part extend. </div> <div id="content"> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> <h2>I rock</h2> <div class="info"> author: BlackNine<br /> date: Today<br /> cat: eventually, right now I want a horse </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras felis. Aliquam erat volutpat. Nunc sapien. Nunc ante felis, convallis eget, viverra sit amet, porttitor mollis, odio. Maecenas ut lorem sed eros pharetra euismod. Fusce quis est ac erat posuere elementum. Praesent id libero. Phasellus aliquet. Suspendisse pharetra sapien vitae mi. Suspendisse enim lectus, condimentum in, dictum sed, convallis in, sapien. Pellentesque mollis, quam sit amet tincidunt lacinia, urna erat interdum diam, vel aliquam enim nisl vitae velit. Nam sagittis tristique ipsum. Sed auctor eros non tortor. Vestibulum eros mauris, ultrices in, pulvinar ut, placerat in, metus. Nullam est odio, ullamcorper vitae, consequat a, laoreet non, sem. Mauris porttitor diam vel nisl. Curabitur vitae mauris a sem ornare congue. Morbi eu nibh sed enim molestie aliquet. Mauris auctor auctor mi. Nunc ultricies sem eget ipsum. Maecenas risus. Mauris pharetra, quam at luctus nonummy, diam magna porta urna, in fermentum massa enim vel augue. Morbi elit. Quisque posuere tincidunt ipsum. Integer vel metus ac risus venenatis vehicula. Duis lacus. In pellentesque diam at dui. Nunc feugiat elementum nisi. Phasellus auctor viverra sem. Pellentesque erat. Pellentesque mauris velit, posuere a, facilisis ac, gravida in, augue. Vestibulum at sem eu nulla nonummy ultricies. Ut a dui. Aenean sem. Etiam adipiscing, mauris nec mollis congue, quam dolor pretium nisi, vitae adipiscing urna diam a velit. In pellentesque massa vel massa. </p> </div> <div id="bottom"> <ul id="one"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> <ul id="two"> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> <li><a href="">asf</a></li> </ul> </div> <div class="clearfix"></div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Any suggestions would be great. Hi, I'm trying to avoid using absolute positioning (and using a margin or padding) to vertically place two divs. clear:both seems to be close but it clears double the amount of space that I want. 1. What determine's how much space is cleared? 2. Is it a problem that neither of the divs is floated? http://www.sabahseaside.com/sti/testindex.php Code: #homecontent {
position:relative;
margin:10px;
}
#homecontent p {
text-align:justify;
margin:0 1em 2em;
}
.hometop {
margin:0; padding: 0;
border: 1px solid black;
}
.homebottom {
margin:0; padding: 0;
border: 1px solid black;
clear:both;
/*margin-top:4em;*/
}
http://www.sabahseaside.com/sti/layout.css Oh yeah, and the images in those divs are floated! AHHH! I am trying to style a css layout. I keep getting a vertical space between two different block containers. here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="menu"> </div> </div> </div> </body> </html> Here is the CSS: Code:
#wrapper{
margin: 0 auto;
width: 977px;
}
#header {
margin: 0;
background: url(images/header_01.jpg) no-repeat 0 0;
width: 977px;
height: 198px;
}
#menu{
margin: 0;
background: url(images/header_02.jpg) no-repeat 100% 0;
float: left;
width: 977px;
height: 44px;
position:relative; top: 100%
}
My theory: the top part of the header is 154 px tall. The bottom part is 44px tall. That makes 198px height. so with header being 198px tall, and the smaller image with a relative position 100% down from the top should correctly line up the two images. But yet I have a HUGE gap?!?! Why? Even if I put 154px instead of 100% for top ... it will not line up correctly. I'm going through hell trying to make a site look the same in IE and Firefox. The biggest problem is the gaping spaces IE adds between elements. What is the best way to fix this? Example at patrolmag.com/new. Any advice or help would be most appreciated. P.S. How the page looks in Firefox 3 is ideal. I just need to make at least IE7 come somewhere close to matching it. |
|||||||