HTML - Trying To Center 3 Column Layout Within Wrap
HI all,
Pretty new to web design and I was having some trouble centering my columns, or rather having my columns evenly space between each other in my wrap and from my warp borders. Also, I'm using a background image as my wrap border and for some reason there's a gap at the top and bottom of my pages. HMTL attached Any ideas? Thanks Similar TutorialsI need a three column table in which the center column will have multiple rows, the number will vary. For exampe, this works. I need a third column that will look like the first, just one row corresponding to the seven rows in the second column. Code: <table border=1> <tbody> <tr><td rowspan=8>Dry skin</td></tr> <tr><td>46.0 </td></tr> <tr><td>9.0 </td></tr> <tr><td>35.3 </td></tr> <tr><td>12.5 </td></tr> <tr><td>20.8 </td></tr> <tr><td>27.0 </td></tr> <tr><td>4.0 </td></tr> </tbody> </table> If I do this Code: <table border=1> <tbody> <tr><td rowspan=8>Dry skin</td></tr> <tr><td>46.0 </td></tr> <tr><td>9.0 </td></tr> <tr><td>35.3 </td></tr> <tr><td>12.5 </td></tr> <tr><td>20.8 </td></tr> <tr><td>27.0 </td></tr> <tr><td>4.0 </td></tr> <tr><td>third column, same row? </td></tr> </tbody> </table> another row is started. I just want third column that has one row corresponding, correlated with the seven rows in the second column. I don't know how to do that. Hi, I have the following problem i'm trying to solve with HTML: I have a simple table with 3 columns. I want the table to have a 100% width of the screen. Furthermore the center column must ALWAYS have a width of 1000. The left and right column should just be there too fill the gaps up if you have a wider screen than 1000. Setting these left/right columns to width "100%" doesn't work because than it would just make the left column fill up the space and the right column will have a width of 0. How can I solve this? Some example could would be highly appreciated Thanks, betonboor I am building a web site for one of my friends. The address is www.lawlessbullies.com . I can't get the middle section to remain centered on both Firefox and IE. It looks perfect in IE, but not in Firefox. I'm not sure if I need to edit my html, or the css. Can someone take a look and help me out? i've been trying to find a solution for weeks and this is my last resort. Its probably something small, and easy. I'll post my index.html and my style.css I am very new to HTML and cant figure out why my 3-column layout isnt working. I cant seem to get my columns to line up side-by-side without overlapping ... HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <!-- Created with the CoffeeCup HTML Editor 2006 --> <!-- http://www.coffeecup.com/ --> <!-- Brewed on 9/9/2010 12:48:26 PM --> <head> <title>Zone Map</title> <style type="text/css"> #head { position: relative; left: 0px; width: 250px; height: 20px; font-family: times new roman; line-height: 8px; font-size: 14pt; font-weight: normal; text-decoration: none; text-align: left; color: #c3bd24;} #content { left: 0px; width: 250px; font-family: times new roman; line-height: 16px; font-size: 10pt; font-weight: normal; text-decoration: none; text-align: left; color: #938461;} #dotted{ width: 225px; border-top: 2px dotted #c3bd24; } #container { width: 800px; } #col_right { position: relative; float: right; width: 250px; } #col_center { position: absolute; float: center; width: 250px; } #col_left { position: relative; float: left; width: 250px; } </style> </head> <body> <p align="center"> <img border="0" alt="" align="left" src="support/image/ZoneMap.png" width="650" height="400"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> <div id="container"> <div id="col_left"> <p id="head"><br>ZONE 1: $750 minimum</p> <div id="dotted"></div> <p id="content"> NJ*** all,<br> NY***Long Island to Islip,<br> MD** to Salisbury,<br> PA** Pittsburgh-Williamsport-Wilkes Barre,<br> VA** Richmond-Front Royal,<br> WV* to Martinsburg, Fairmont,<br> DE** all</p> </div> <div id="col_center"> <p id="head"><br>ZONE 2: $1,500 minimum</p> <div id="dotted"></div> <p id="content"> NY** Syracuse-Albany-Long Island,<br> CT** Hartford-New Haven,<br> PA** west of Pittsburgh-Erie,<br> OH** Sandusky-Columbus, Ashland,<br> VA** south of Richmond-Roanoke,<br> WV* south and west of Fairmont to Bluefield,<br> MA* Pittsfield-Buzzards Bay-Monomet</p> </div> <div id="col_right"> <p id="head"><br>ZONE 3: $2,500 minimum</p> <div id="dotted"></div> <p id="content"> VA** south and west of Roanoke,<br> TN***Chattanooga-Nashville,<br> KY** Hopkinsville-Madisonville,<br> IN***Evansville,<br> IL***Urbana, Chicago,<br> MI</p> </div> </div> </body> </html> Hi guys, I have a problem. Whenever the left column is larger than the right column, it stretches the div, but the background doesn't go on. The content just flows out. Is there any way I can fix this? http://automata.firephoenixnet.com/74s/ Thanks in advance guys. This is both HTML and CSS-oriented. Current CSS code pertaining to the layout: Code: #listnav { background: url('../images/listnav-bg.png') top left repeat-x; width: 25%; padding: 8px; float: left; } #content { width: 75%; padding: 8px; float: right; } #footer { } #main-wrapper { width: 85%; } HTML: HTML Code: <div id="main-wrapper"> <div id="listnav"> <!-- some spacer stuff here so i can actually see stuff (no static height set) --> </div> <div id="content"> <!-- some spacer stuff here so i can actually see stuff (no static height set) --> </div> </div> The result is that the listnav box shows up on the far right side and the content box shows up below it on the left hand side. Any ideas? :| So I found this perfect layout my mathew taylor and Im dissecting it to understand the layout and css. My first questions off the bat are, how does he get the links at the top to be indented? I cant see where he placed the command so that their is an inch of indent and then the links start. Also, how does he make it so the links at the top intersect with a black line the spans the header? I really dont see this in the html where the black line is. And lastly, if i want to create a banner for my website in the header how do i go about doing that in the space above the links and spanning the header. I really want to create a clean title in photoshop and place it there but I dont know what dimension width and heighth to use. Thanks http://matthewjamestaylor.com/blog/perfect-3-column.htm Hi! This is was my blog looks like at the moment: http://neverrgrowold.blogspot.com/ I would like to add a 3rd column to my 2 column layout. I know this will mean resizing the other two columns which I know how to do.. I just have no idea to add another column to the right. 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> <title>Never Grow Old</title> <style type="text/css"> #navbar-iframe{height:0; visibility:hidden; display:none;} body {background-color: #000; font: normal 10pt Trebuchet MS; color: #e5e5e5; cursor: crosshair; line-height: 75%; scrollbar-face-color: #ddd; scrollbar-highlight-color: #fff; scrollbar-3dlight-color: #ddd; scrollbar-darkshadow-color: #ddd; scrollbar-shadow-color: #fff; scrollbar-arrow-color::#fff; scrollbar-track-color: :#ddd;} a:link, a:visited, a:active {color: #e5e5e5; text-decoration: none; text-transform: none; font: normal 8pt Trebuchet MS; cursor: normal;} a:hover {text-decoration: ; text-transform: None; font: normal 12pt Trebuchet MS; cursor: normal; color: #FF4C79;} blockquote {font: normal 8pt trebuchet ms; color:#e5e5e5; padding:5px; border-left:7px solid #ddd; background-color:#000;} blockquote:hover {-moz-border-radius:4px; padding:5px; border:2px solid #000; } blockquote:first-letter {background: #000; font: italic 15pt "Georgia"; color: #FF4C79;float: padding: 5px; text-transform: uppercase;} .head {text-align: center; font-family: impact; font-size:12pt; color:#CCFF66; text-align: left; text-transform: none; line-height: 9pt; font-style: none; background:#000; padding: 5px; } .content {font-size: 9pt; font-family: Trebuchet MS;color:#e5e5e5; background: #000; line-height: 14px; padding:10px; border: 2px solid #111; } .headline1{font:normal 30pt Courier New; color:#e5e5e5; letter-spacing:-3px; text-transform:uppercase; line-height:100%; } </style> <script type="text/javascript"> /*********************************************** * Disable select-text script- © Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ //form tags to omit in NS6+: var omitformtags=["input", "textarea", "select"] omitformtags=omitformtags.join("|") function disableselect(e){ if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1) return false } function reDisable(){ return false } if (typeof document.onselectstart!="undefined") document.onselectstart=new Function ("return false") else{ document.onmousedown=disableselect document.onmouseup=reDisable } </script> <script language=JavaScript> <!-- //Disable right click script III- By Renigade (renigade@mediaone.net) //For full source code, visit http://www.dynamicdrive.com var message=""; /////////////////////////////////// function clickIE() {if (document.all) {(message);return false;}} function clickNS(e) {if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {(message);return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;} else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;} document.oncontextmenu=new Function("return false") // --> </script> <body> <div style="position: absolute; top: 10px; left: 188px; width: 500px;"> <span class="headline1"><img src="http://i44.tinypic.com/bfoq69.png"/> </span><br> </div> </div> <div style="position: absolute; top: 440px; left: 525px; width: 600px;"> <Blogger> <div class="head">@ <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> </div> <div class="content"><$BlogItemBody$></div><p> </Blogger> </div> <div style="position: absolute; top: 440px; left: 190px; width: 310px;"> <div class="head">Welcome! </div> <div class="content"> <div><img src="http://24.media.tumblr.com/avatar_66b2c19ef795_64.png" align="left" /><font color=#e5e5e5>I believe we never truly grow old unless we let ourselves. You'll find anything and everything to do with your childhood if yyou grew up anywhere between the late 80's to the early 2000's. So sit back, enjoy your stay, and take a trip down memory lane ;) </font></div> <p> </div><p> <div class="head">Memory Lane.</div> <div class="content"> ghghghghh </div><p> <div class="head">Support</div> <div class="content"> Place your tagobard here, <a href="http://cbox.ws">Cbox</a> recommended<BR> </div><p> <div class="head">Links</div> <div class="content"> Place all your links here,<br> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> </div><p> <div class="head">Looking Backwards.</div> <div class="content"> <BloggerArchives> <BloggerArchives> <a href="<$BlogArchiveURL$>"> <$BlogArchiveName$></a> </BloggerArchives></a><br><br> </div><p> <div class="head">Credits</div> <div class="content"> Designer @<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>,<br> Basecode: <a href="http://www.blogskins.com/me/sacrificelove-">sacrifice</a><a href="http://love--bites.blogspot.com">love-</a><br> </div><p> </div> </body> I've been trying to figure it out with my basic html knowledge for a while now and I can't get it, I would be really appreciative if someone could help me out. Thanks!! Hello, I need to create a 3 -column lay out with the left and right columns having 200px each and the middle column take the rest. Here is my html markup: HTML Code: <div style="width: 100%"> <div style="width: 200px; float:left;">Left column</div> <div style="width: 100%; float:left;">Middle Column</div> <div style="width: 200px; float:left;">Right Column</div> </div> It's not working for me . Please help. Hi There, Pulling my hair out over this. For the life of me, cant make it work: http://www.cowboytuffwebsitedesign.c...cialdeals.html I've used positive padding negative margin to stretch both div's heights to match each other. But the content div, when needed to be higher than the menu div, will overflow its content past the container divs bg. As well the footer will only clear past the menu div, not the content div. HELP! PLEASE! I can copy and paste HTML right into the thread if needed. Thanks Hi all, I have a long text without any space inside it. I want that it wrapped by the browser. Which code should I use? Thanks in advance. Hi everyone. I'm new to HTML, so I've been reading a lot online and stuff but I haven't been able to find an answer to my question, so I figured I'd ask here since these forums looked really helpful. I have a mobile site where I have a link. The link is two words and I would like to force the link to wrap on to two separate lines. Am I able to do this? I haven't been able to find anything online like this. I would still like the link to work and everything. Any help and information would be greatly appreciated. Thanks Again, Hi folks, I have this menu (generated via menumatic), that needs to not wrap should users decrease the width of their browser too far (or if it does wrap..then I need the div to resize to fit the height properly which it currently does not). Any tips/suggestions welcome The website url: (click the Available Items which will show the 2nd level menu in question (located in div id='promo') http://www.borrownet.com/ the CSS is as follows (from mm2.css): /* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish * Dropdowns by Patrick Griffiths and Dan Webb. * http://carroll.org.uk/sandbox/suckerfish/bones2.html */ /* ----[ LINKS ]----*/ /* all menu links */ #nav a, #subMenusContainer a{ text-decoration:none; display:block; padding: 8px 10px; color: #000; font: 70%/90% arial; -moz-border-radius: 4px; -webkit-border-radius: 4px; } /* Just main menu links --[for non-javascript users this applies to submenu links as well]*/ #nav a{ margin:5; float:left; } /* Just sub menu links */ #subMenusContainer a, #nav li li a{ text-align:left; } /* All menu links on hover or focus */ #nav a:hover, #subMenusContainer a:hover { background-color:#90B557; color:#FFF; /* -moz-border-radius: 7px; -webkit-border-radius: 7px;*/ } /* sub menu links on hover or focus */ #subMenusContainer a:hover, #nav li a:hover { background-color:#B2D281; color:#000; } /* .subMenuParentBtn{ background: url(../img/arrow_right.gif) right center no-repeat; } .subMenuParentBtnFocused{ background: url(../img/arrow_right_over.gif) right center no-repeat; } .mainMenuParentBtn{ background: url(../img/arrow_down.gif) right center no-repeat; } .mainMenuParentBtnFocused{ background: url(../img/arrow_down_over.gif) right center no-repeat; } */ /* ----[ OLs ULs, LIs, and DIVs ]----*/ /* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */ .smOW{ display:none; position: absolute; overflow:hidden; /*the 2px left & right padding lets you have a 1px border on the ul or ol inside since overflow is set to hidden*/ padding:0px 4px; margin:0 0 0 -2px; } /* All ULs and OLs */ #nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol { padding: 0; margin: 0; list-style: none; line-height: 1em; } /* All submenu OLs and ULs */ #nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol { /*border around submenu goes here*/ -moz-border-radius: 4px; -webkit-border-radius: 4px; background-color:#90B557; border: 2px solid #C3D46A; top: 0px; left:0; z-index:8; } /* List items in main menu --[for non-javascript users this applies to submenus as well] */ #nav li { /*great place to use a background image as a divider*/ display:block; list-style:none; position:relative; float:left; } #subMenusContainer li{ list-style: none; } /* main menu ul or ol elment */ #nav{ display:block; position: absolute; list-style:none; margin:0 0 0 0; z-index: 5; text-align: center; display:block; } #subMenusContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; } /* --------------------------[ The below is just for non-javscript users ]--------------------------*/ #nav li li{ float:none; } #nav li li a{ /* Just submenu links*/ position:relative; float:none; } #nav li ul { /* second-level lists */ position: absolute; width: 11em; margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ margin-top:2.2em; } /* third-and-above-level lists */ #nav li ul ul { margin: -1em 0 0 -1000em; } #nav li:hover ul ul margin-left: -1000em; } /* lists nested under hovered list items */ #nav li:hover ul{ margin-left: 0; } #nav li li:hover ul { margin-left: 10em; margin-top:-2.5em;} /* extra positioning rules for limited noscript keyboard accessibility */ #nav li a:focus + ul { margin-left: 0; margin-top:2.2em; } #nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;} #nav li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;} #nav li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;} #nav li:hover a:focus{ margin-left: 0; } #nav li li:hover a:focus + ul { margin-left: 10em; } Hi, I'm working on an ecommerce website, my problem is that I cannot make some text in a cell wrap. Here's the details: The text in this particular cell is page numbers, and it is dynamically generated, so it changes depending on what the user selects in the shop. For example, if they are viewing a category that only has a couple pages of product, it's fine. But if they are viewing a category that has a couple hundred pages of product, the page number goes out horizontal in a straight line, and obviously causes some serious horizontal scrolling. I've tried setting a fixed width for the cell both in the <td> with width="whatever" and that didn't work, I tried setting it in the stylesheet with CSS but it still breaks the table. I just want it to wrap down a line when it gets to a certain width. Any ideas? Hi, I have a huge text that i need to display in a span tag on my page. Currently the words are breaking at the end of the line, i.e. if the word if "Understand" and there is not enough space to display the entire word, half of the word is displayed in the space available, and the remaining on the next line. However, i want that the entire word be displayed on the next line. Please suggest how this can be done. Regards, Ankit!! I am new to HTML and I need to know how to wrap code when it is too long and keeps going across the page. In VBA you use _. This will wrap the code and you can keep it looking neater. Please help!!! I want to wrap a long line of text in a table for Firefox, IE 6, 7 and 8, Chrome and Opera. I try 'style="overflow:hidden; width:50px;' but the line is cut off. i.e. I see "longllllllllllllllllllllllllllllllllllllllllllll" but not "longlllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllong". Code: <table border="1" cellpadding="2" cellspacing="0" width="600" style='table-layout:fixed'> <col width=40> <col width=97> <tr valign="top"> <td align="center"><span class="Body2"><a href="index.jsp?ID=21">21<br>(22)</a></span></td> <td style="overflow:hidden; width:50px; max-width:50px;"><a style="text-decoration: none" href="index.jsp?ID=21"><span class="bodySmall">longlllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllong<br></span><span class="Body2"></span></a></td> </tr> </table> First of all hope this is the right forum. I need to know how to wrap text so it flows around this twitter widget that I would like to place on my site in the center of page http://knowingabout.co.uk/bestinhulme/index.html. I have tried the usual way for an image but it doesnt seem to work. Below is a image and below that the actual code. <div id="twtr-search-widget"></div> <script src="http://widgets.twimg.com/j/1/widget.js"></script> <link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet"> <script> new TWTR.Widget({ search: 'Manchester', id: 'twtr-search-widget', loop: true, title: 'Who\'s tweeting about...', subject: 'Manchester', width: 250, height: 280, theme: { shell: { background: '#887640', color: '#ffffff' }, tweets: { background: '#f3d2a5', color: '#444444', links: '#1985b5' } } }).render().start(); </script> Thx in advance Problem: I have an image floated right, but my UL list appears below the image instead of next to it. I can get all text to wrap around my images except UL lists.. I have the image in a p tag & my UL list would show below it anyway .... The long way i think would be to place the image & UL list into 2 seperate divs like: 1) <div class="imgRight"><img>xxx/></div> use css to float right 2) div class="ulLeft"><ul>xxx</ul></div> use css to float left I have alot of pages with different size images & UL lists so im looking for the easy way out. here is my html <p><img class="floatRight" alt="" align="right" width="281" height="427" p="" src="...images/Photo_01.jpg" /></p> <p>SCQS Quantity Surveyors can provide full Estimating and Tendering solutions to all our clients, including Main Contractors, Sub-Contractors and Private Clients. Our coverage includes a wide variety of areas including residential, commercial, industrial, sports & recreation facilities, retail facilities and hotels etc...</p> <p>The services which we provide our clients with includes:</p> <h2>Estimating & Tendering for Main Contractors & Sub-Contractors</h2> <ul> <li>The Preparation and Submission of Competitive Tenders for Building Main Contractors and Sub-contractors for all Types & Value Ranges of Projects</li> <li>Negotiating and Tenders / Contracts with the Client's Quantity Surveyor for Agreement & Awarding of Contracts</li> </ul> <h2>Estimating & Tendering for Private Clients</h2> <ul> <li>Pre-Tender Price Estimating</li> <li>Advise on Tendering Procedures, Contractual Arrangements and Select Tenderers</li> <li>Preparation of Tender / Negotiation Documentation – (i.e. Bills of Quantities, Schedules of Rates and Contracts etc...)</li> <li>Tender Analysis</li> <li>Examination and Reporting on Tenders Received from Contractors</li> </ul> any help on the best possible way would be appreciated semaus Hi, My code: Code: <div style="width: 100px;"><table style="border-collapse: collapse;" border="0" cellpadding="4" cellspacing="0"> <tbody><tr> <td> <table border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <td> <code><span style="color: rgb(0, 0, 0);"> <span style="color: rgb(0, 0, 187);">$username </span><span style="color: rgb(0, 119, 0);">= </span><span style="color: rgb(0, 0, 187);">$_POST</span><span style="color: rgb(0, 119, 0);">[</span><span style="color: rgb(221, 0, 0);">"username"</span><span style="color: rgb(0, 119, 0);">]; <br></span><span style="color: rgb(0, 0, 187);">$password </span><span style="color: rgb(0, 119, 0);">= </span><span style="color: rgb(0, 0, 187);">$_POST</span><span style="color: rgb(0, 119, 0);">[</span><span style="color: rgb(221, 0, 0);">"password"</span><span style="color: rgb(0, 119, 0);">]; <br></span><span style="color: rgb(0, 0, 187);">$result </span><span style="color: rgb(0, 119, 0);">= </span><span style="color: rgb(0, 0, 187);">mysql_query</span><span style="color: rgb(0, 119, 0);">(</span><span style="color: rgb(221, 0, 0);">"SELECT * FROM members WHERE username = '$username' AND password = '$password';"</span><span style="color: rgb(0, 119, 0);">);</span> </span> </code><br> </td> </tr> </tbody></table> </td> </tr> </tbody></table></div> I have a DIV tag around the code which has style="width: 100px;" but for some reason the width is A LOT bigger. How to make it so that it will wordwrap? |