CSS - 2 Columns Layout, Help Clear:left Jpg In Col #2 Without Clearing Col #1
Hi,
Creating a Wordpress theme. I need help to clear:left JPG thumbnails in my 2nd-column div, but WITHOUT clearing the 1st-column div that is floated:left. In other words, I want these two columns to work independently, just like <TD> in html. Here is my setup -- it is a 2-column layout, with the left column being a navigational sidebar (navigation content automatically generated by wordpress), and the Right Column is the "real content" div. Wordpress generates the content in the right column, also. And since Wordpress generates the content based upon what the reader selects, I cannot assign any HEIGHT attributes to the Divs, because I do not know whether the selections have a lot of content, or very little. ----------------- HEADER DIV------------------------------------------ -- Sidebar Div-- __________ --- RIGHT DIV (not floated) ----------------- FOOTER DIV ---------------------------------------- (property of footer is set to clear:both) SIDEBAR DIV is float:left; width 160px RIGHT DIV is not floated, and contains all the content. 600px; Problem I need to solve: In column #2 -- the right div, I want to float-left small thumbnail jpgs, and write text flowing along the right side of the thumbnail. If the text does not naturally drop below the jpg, I want to clear:left to drop down to a new line and start the process over (new thumbnail, new text beside it). *** The problem is that when I clear:left on the jpg, it NOT ONLY clears the JPG, but also clears:left on the whole Sidebar DIV, thereby dropping the next line WAY DOWN on the page. So it looks like this: ___ HEADER ____ Sidebar __________________ Thumbnail #1: Text text text (clear:left clears everything....) __________________________ Thumbnail #2: Text ---- FOOTER --- Attempted solution: If I set the sidebar div to position:absolute, it works ok EXCEPT (and big except) that if there is not much content in the RIGHT DIV, then the FOOTER DIV is not low enough on the page, thereby overlapping the Sidebar Div. Obviously, this whole design could be EASILY accomplished with TABLES, but those are blasphemy these days, so I would like a more "modern" solution. I have googled this all day, and have not seen a solution. Help is appreciated. Similar TutorialsI always seem to run into this problem and somehow get it fixed but this time I am stuck. I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE .. The main CSS: Code: * { margin: 0; padding: 0; } body { margin:0; padding:0; background-color:#e5e5e5; } #wrapper { width: 640px; height: 720px; margin-left:0; margin-top:0; border: 2px solid gray; border-bottom: 0px solid gray; background-image:url(../images/banner.jpg); background-repeat:no-repeat; background-color:#c0c0c0; float:left; } #navigation { width: 640px; height: 22px; background-color:#c9c9c9; margin-top: 88px; } #insidewrapper { height:auto; width:99%; margin: 6px 1px 4px 1px; } /* Begin Left Side Info Boxes */ #sidebar { width:150px; height:600px; margin-left:2px; float:left; border:1px solid #666666; border-bottom:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#666666; background-color:#ffffff; } .infobox { height:123px; font:Verdana, Arial, Helvetica, sans-serif; font-size:9px; padding:3px; border-top:0px; border-left:0px; border-right:0px; } .infopic { margin-top:9px; } .infobutton { height:20px; border-bottom:1px solid #666666; padding-left:3px; } /* Begin Main Content */ #maincontent { width:465px; height:593px; margin-left:158px; border:1px solid; border-color:#666666; font:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333333; padding:3px; background-image:url(../images/background_trans2.gif); background-repeat:no-repeat; background-position:center; background-color:#ffffff; } /* Main Content for pages with textual content */ #content { width:97%; height:auto; padding:5px; } /* Main Content for pages with products */ #productWrapper { height:auto; width:100%; margin-top:10px; } #productLeft { height:auto; width:115px; float:left; } #productMiddle { height:auto; width:200px; margin-left:1px; float:left; } #productRight { height:auto; width:auto; } /* Begin Footer */ #footerlinks, #footer { width:640px; height:auto; text-align:center; float:left; } #footerlinks { border-right: 2px solid gray; border-bottom: 1px solid gray; border-left: 2px solid gray; background-color:#c0c0c0; font:Verdana, Arial, Helvetica, sans-serif; font-size:9px; letter-spacing:1px; color:#555555; padding-bottom:4px; } #footer { margin-left:0; margin-top:0; margin-bottom:15px; padding-top:8px; border-top: 0px; border-right: 2px solid gray; border-bottom: 2px solid gray; border-left: 2px solid gray; font:Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#555555; background-color:#a9a9a9; } /* Begin Rightside Column */ #right { border: 1px solid orange; width:195px; margin-left:650px; padding-top:111px; } So i've got a dillema where I have a page that has a div floating to the left of multiple story divs. I'll start off by giving source code: http://graffetto.com/chops/float.html 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>Floating Divs</title> </head> <body> <div class="floatLeft"> this content is to float left this content is to float left this content is to float left this content is to float left this content is to float left this content is to float left this content is to float left this content is to float left </div> <hr /> <div class="storyBlock"> this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa </div> <hr /> <div class="storyBlock"> this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa </div> <hr /> <div class="storyBlock"> this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa </div> <hr /> <div class="storyBlock"> this is a story block fds afds af dsa fdsa </div> <hr /> <div class="storyBlock"> <img src="story_image3.jpg" alt="" title="" /> this is a story block fds </div> <hr style="clear: both;" /> <div class="storyBlock"> this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa </div> <hr /> <div class="storyBlock"> <img src="story_image2.jpg" alt="" title="" /> this is a story block fds afds af dsa fdsa </div> </body> </html> CSS: Code: body {margin: 10px;} .floatLeft { float: left; width: 200px; height: 600px; margin: 0 10px 10px 0; border: 1px solid red; padding: 10px; } .storyBlock { width: 400px; margin: 0 0 5px 0; } .storyBlock img { float: left; margin: 0 5px 5px 0 } The fifth 'storyBlock' div has an image that is taller than that of the text within that div. I need to clear that div around the floating image to the left, but I can't use clear:left because it will clear the entire 'floatLeft' div. This is what happens: http://graffetto.com/chops/float_cleared.html Idealy, it would look like this (note that these 'storyBlock' divs are generated dynamically): http://graffetto.com/chops/float_ideal.html Also - this issue is only apparent in FireFox - IE automatically clears the div. I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.). Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left". What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it? OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)? Here's some example HTML: html4strict Code: Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!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" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>
And the CSS: css Code: Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }
Hello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER --> <!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"> <head> <link href="template.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="template.js" /> </head> <body onload="onloadprocedures()"> <div id="main_container"> <div id="template_header"> <div id="tl_outerborder"></div> <div id="t_outerborder"></div> <div id="tr_outerborder"></div> <div id="l_outerborder_h"></div> <div id="header_content"> <div id="logo"><img src="img/logo.png" alt="" /></div> <div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div> </div> <div id="r_outerborder_h"></div> </div> <!-- END TEMPLATE HEADER --> <!-- BEGIN TEMPLATE BODY --> <div id="template_body"> <div id="l_outerborder_b"></div> <div id="body_content"> <div id="body_content_text"> <p>TEST</p> </div> </div> <div id="r_outerborder_b"></div> </div> <!-- END TEMPLATE BODY --> <!-- BEGIN TEMPLATE FOOTER --> <div id="template_footer"> <div style="clear:both"></div> <div id="l_outerborder_f"></div> <div id="footer_content"></div> <div id="l_outerborder_f"></div> <div id="bl_outerborder"></div> <div id="b_outerborder"></div> <div id="br_outerborder"></div> </div> </div> </body> </html> <!-- END TEMPLATE FOOTER --> and CSS: Code: @charset "utf-8"; /* CSS Document */ body { background-color:#FFFFFF; font-family:Tahoma, Verdana, "Times New Roman", Arial; font-size:12px; } a:link {text-decoration: none} /* unvisited link */ a:visited {text-decoration: none} /* visited link */ a:hover {text-decoration: none} /* mouse over link */ a:active {text-decoration: none} /* selected link */ #main_container { position:relative; margin:auto; width:960px; height:auto; } #template_header { float:left; position:relative; width:960px; height:300px; } #header_content { float:left; position:relative; width:900px; height:270px; } #logo { width:310px; height:130px; position:relative; float:left; top:0px; left:0px; } #slogan { width:580px; height:100px; position:relative; float:left; top:0px; left:0px; } #tl_outerborder { float:left; position:relative; background-image:url(img/tl_outerborder.png); width:30px; height:30px; } #t_outerborder { float:left; position:relative; background-image:url(img/t_outerborder.png); width:900px; height:30px; } #tr_outerborder { float:left; position:relative; background-image:url(img/tr_outerborder.png); width:30px; height:30px; } #l_outerborder_h { float:left; position:relative; background-image:url(img/l_outerborder.png); background-repeat:repeat-y; width:30px; height:270px; } #r_outerborder_h { float:right; position:relative; background-image:url(img/r_outerborder.png); background-repeat:repeat-y; width:30px; height:270px; } #body_content { float:left; position:relative; width:900px; overflow:hidden; } #body_content_text { float:left; position:relative; width:600px; margin: auto; overflow:hidden; } #l_outerborder_b { float:left; position:relative; background-image:url(img/l_outerborder.png); background-repeat:repeat-y; width:30px; height:inherit; } #r_outerborder_b { float:right; position:relative; background-image:url(img/r_outerborder.png); background-repeat:repeat-y; width:30px; height:inherit; } #l_outerborder_f { float:left; position:relative; background-image:url(img/l_outerborder.png); background-repeat:repeat-y; width:30px; height:inherit; } #r_outerborder_f { float:right; position:relative; background-image:url(img/r_outerborder.png); background-repeat:repeat-y; width:30px; height:inherit; } #template_body { float:left; position:relative; width:960px; overflow:hidden; } #bl_outerborder { float:left; position:relative; background-image:url(img/bl_outerborder.png); width:30px; height:30px; } #b_outerborder { float:left; position:relative; background-image:url(img/b_outerborder.png); width:900px; height:30px; } #br_outerborder { float:left; position:relative; background-image:url(img/br_outerborder.png); width:30px; height:30px; } Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg I have the following: Quote: <div class="video"> <h1>Header</h1> <p><a href="#" title="title"><img src="images/01.jpg" alt="alt" width="150" height="150" class="img-left border"/></a></p> <div class="redBG border" style="margin-left:180px;"> <p><strong>Content</strong></p> </div> </div> <div class="video"> <h1>Header</h1> <p><a href="#" title="title"><img src="images/01.jpg" alt="alt" width="150" height="150" class="img-left border"/></a></p> <div class="redBG border" style="margin-left:180px;"> <p><strong>Content</strong></p> </div> </div> Not the nicest of code but it'll do for now. I want each div with class=video to come under one another but at the moment, the 2nd div starts just after the text in the first div and not actually under it. This is in the middle column of a 3 column CSS layout. The bottom is what the .video class has. Quote: .video { margin-bottom:10px; } Any help? Hi i am trying to display small divs next to each other on one row, when i put clear left on the div that i want on the left, so that it puts it on the next line, the 3 divs then jump right down the page, putting a massive gap between this and the content above, is there a way to stop this happening? the code i have is html Code: <div id="arrow1">arrow1</div> <div id="arrow2">arrow2</div> <div id="arrow3">arrow3</div> Code: #arrow1 { background-image:url(images/arrow.gif) ; background-position:top left; background-repeat:no-repeat; width:176px; height:96px; float:left; display:inline; clear:left; } #arrow2 { background-image:url(images/arrow.gif) ; background-position:top left; background-repeat:no-repeat; width:176px; height:96px; float:left; display:inline; } #arrow3 { background-image:url(images/arrow.gif) ; background-position:top left; background-repeat:no-repeat; width:176px; height:96px; float:left; display:inline; } Hello, I'm trying to float an image inside a content div that is inside a wrapper div that already has a float left (nav) div earlier in the html. I know that this means that the floated image div will not be cleared until after the already floating nav div, since this is the one that comes earlier in the html and is quite large. It leaves a large gap until it clears the nav div. I have tried a couple of things, here is the page I'm working on and this is the css file This hasn't been tested on Windows, so I have no idea how it looks. It has been tested on the Mac: Safari, Opera, Netscape and Firefox display as described above, but IE Mac is way off whack. The current setup of the page is this: HTML: Code: <div id="content"> <div id="breadcrumb"><a href="http://www.huntacular.com/">Homepage</a></div> <div class="image1"> <img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150"> <p class="red">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> <div class="image2"> <img class="right" src="./images/pic.png" alt="Mystery Image" width"260" height="150"> <p class="orange">Donec accumsan. Pellentesque ac est vitae sapien scelerisque auctor. Nunc pede diam, interdum vel, dictum ut, egestas eget, metus. Maecenas eget sapien.</p> </div> <div class="another3"> <img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150"> <p class="blue">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vulputate. Nulla ac leo sollicitudin mauris fringilla consectetuer.</p> </div> CSS: Code: img.left { float: left; border: solid 1px black; padding: 10px; margin-right:10px; margin: bottom: 10px; } img.right { float: right; border: solid 1px black; padding: 10px; margin-left:10px; } .image1 { border: red 1px solid; padding : 0px; } .image2 { border: orange 1px solid; padding : 0px; } .image3 { border: blue 1px solid; padding : 0px; } /* Trying to sort the float problem - this sends IE Mac nuts, not checked on IE Win */ .another:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; } .another {display: inline-table;} /* Hides from IE5/Mac \*/ * html .another {height: 1px;} .another {display: block;} /* End hide from IE5/Mac */ /* .clearer { clear: both; } */ p.red { color: red; } p.orange { color: orange; } p.blue { color: blue; } Is there a work around? I thought I'd found one in the third attempt - the one with blue text, but I'm not sure if I've implemented it correctly. Also, IE Mac isn't doing any of these correctly either (well, nearly the second one, but I haven't tested this stuff on Windows either. Is there a solution? Hi all, I've got an item like this: <div (holder)> <div (image) style="float: left;">image</div> text here <div style="clear: left;"> </div> </div> But the trouble is that In the layout, I've got the menu floated left, too, and that 'clear: left;' seems to be clearing the left menu as well... Why? Cheers Hi again , I've got one more question: when you've used a 2 or 3-col layout for your webpage (the right, possibly the middle col holds the actual content, the others are floating divs used as menus), you can no more use the clear property for the actual content? Because it clears the space until all floating elements ends - including menus , so it finally looks like here. Here are CSS used for this page: CSS_1 (used for the fotogallery only) and CSS_2 (used mainly for layout of the web). I think there is a solution, I've already thought it can be found on BonRouge's pages (very useful pages by the way), but he made the menu using absolute positioning . So has anyone any idea how to solve this? And maybe one more detail: can be pictures in this fotogallery centered in their parent <div> (red bordered)? They're all floating, so it's not so easy, if possible. Oh man, rebuild these pages without tables, it really drives me mad... I have a pretty typical three column layout with col1 floating left, col2 in the middle and col3 floating right. The HTML calls the divs in order of col1,col3,col2 and everything generally works fine with the exception of using a div in the middle column (col2) with a style that has clear:both in it. The clear:both clears all items in the sidebar columns and not just in the middle column (which is what I want). The problem can be seen at the below URLs. wwwDOTjessiekpowellDOTcom/2009/08/kristin-cavallari-filming-on-malibu-beach-for-the-hills/ and wwwDOTjessiekpowellDOTcom/2009/10/alessandra-ambrosio-bikini-photo-shoot/ As you will see the second set of images from the gallery is displayed after a huge gap of white space after it has cleared the last div in the right sidebar. What I want is to just clear the first row of images in the middle column. This does not just affect images but anything with a div style=clear:both Any suggestions will be appreciated as I've exhausted my skills on this one. Hi all, I've spent several hours to solve this problem, but found nothing working . The problem (well, there are much more problems ) is that I use 2-cols layout, so the left column (menu) is floating left. And now I need in the one page's head to get 2 images, one aligned to the left, the other to the right and actual text of the headings. I've found 2 good solution: 1) Classic, use float:left on one image, float:right on the other, and text-align: center on the headings. First thing I don't understand, why the image on the right is moved down? You can see it here. Then, the clear property should be used to force the headings to end bottom the images, but clear can't be used, because it also clears the menu (floating to the left) so the headings ends bottom the menu. 2) Using absolute/relative positioning - headigns can be made relatively positioned, images absolutely, one with left:0 and the other with right:0, but then the contents following after the headings is moved to the top, mixed with the heading. Similar problem is being solved in this thread, but I didn't found there anything working . Can anybody help, please? Here are used CSS: Web.css, Fotogalerie.css. Hi all, I'm trying to achieve the following: <div id="left">This column is of blue background, and stretches all the way to the left.</div> <div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div> <div id="right">This column is of red background, and stretches all the way to the right.</div> Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this? I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code: Code: #left { background-color: blue; float: left; margin: auto; position: absolute; } #center { background: #DFDFEB url(../images/body/top.jpg) no-repeat; width: 760px; margin: 0 auto; } #right { background-color: red; } Thanks in advance! Hello, I am looking for a CSS two fixed width columns centered layout with header and footer. Could someone recommend me a good one? Thank You, Miguel Hi ya My goal is to get this page: portfolio.modernmusicians.com/portfolio.html to have the layout like this: portfolio.modernmusicians.com/port_goal.gif Notice how "description" is squared up in the image. I'm not sure if I should make nested div's or use margins or padding or what. Any guidance would be greatly appreciated. Thanks. Hello, To make my columns have equal lengths in fixed layouts, I have employed the Faux technique successfully. What would be the best technique for liquid layouts? I know of a js that suppose to equal the columns, and someone told there is a CSS method also. Can you still use the Faux? Any suggestions? I've converted my site to a css layout http://www.mrhodges.net and it woks well for the browsers I've checked except ie5 for mac. On this browser it drops the center column below the two floated side columns. Now I know that the browser is no longer supported and all that but wouldn't you know... I work for a school board where almost all of the machines are macs and they are running os9 and you guessed it mac ie5. So of the miniscule number of people running this browser I'm smack dab in the middle of most of them. Consequently I need to figure out how to get my page to display properly as I'd like to use the template to put together the schools's web site. What is the best solution for this problem? I'd rather not have to write two sets of pages and redirect using javascript. Hello, Below is css I am trying to get to work and use as a template for a two column , header, and footer layout. I can get by with css, but an not a designer so can't figure out the exact specifics on how to do this. I've looked at many sites, make examples, javascripts included, but either they are to hard to fit into what I am looking for or just cause me to hit my head against the wall. I'm trying to get the left columns background to fill height 100% to the footer. The content's doesn't need it because the wrapper's background act's as its color. Also, if either column's height changes past the screen's height. I need the footer to move down too. Currently, I tested if the left-column and the main content goes past the screen's height it will just go past the footer. This works beacuse the css I have currently is making sure that the footer is always at the bottom. Code: <html > <head> <title>Untitled Page</title> <style type="text/css"> html { overflow-y: scroll; /* forces firefox scrollbar on */ } body { margin: 0; padding: 0; background: #F2F2F2; font: 100% Helvetica, Arial, sans-serif; height: 100%; } /* text-align: center; is so that the content will float in the center*/ div.wrapper { position: relative; width: 100%; height: 100%; text-align: left; margin-bottom: 42px; } div.header { position: relative; width: 100%; background-color: blue; border-bottom: 1px solid #CCCCCC; font-size: 1.5em; height: 42px; } div.footer { position: absolute; bottom: 0; width: 100%; background-color: blue; border-bottom: 1px solid #CCCCCC; font-size: 1.5em; height: 42px; } div.wrapper .left { width: 215px; float: left; background: yellow; height: 100%; min-height: 100%; } div.wrapper .right { width:auto; margin-left: 215px; } div.wrapper .tabs { background: green; height: 35px; } div.wrapper .mainContent { } </style> </head> <body> <div id="header" class="header">header</div> <div class="wrapper"> <div id="leftColumn" class="left">left content</div> <div class="right"> <div class="tabs">Tabs go here</div> <div class="mainContent">Main content goes here</div> </div> </div> <div id="footer" class="footer">footer</div> </body> </html> Any help would be appreciated thanks in advance. Risso Hi, Code: <div class="paginator"> <span style="float:left"><span class="prev_next"><a href="">PREV</a></span> <span class="page_links"><a href="">2</a><a href="">3</a><a href="">4</a></span> <span style="float:right"><span class="prev_next"><a href="">NEXT</a></span></span> </div> How do I create this layout? ------------------------------------ |PREV...............123..............NEXT| ------------------------------------ 123 must be in the middle. I have been trying to position it correctly but it always comes up messed up. Thank you. Hi, I have a multi-column layout where I want every column to always be the same height. Any one of the columns may be the longest on any given page, so the other columns have to automatically adjust to match that height. Usually I'd just use the faux column technique where you repeat a background image, but that won't work because of two elements on this page: 1. each column has a border all the way around it. 2. one column resizes with the page. I've read the articles on liquid layouts with faux columns, but as far as I can tell those techniques won't work if your columns have borders. Does anyone know any technique that would work here? Thanks. |