CSS - Layout Issue Using Divs
hey, I'm still trying to learn the best css practices and I need some help setting this up. The page is kind of unique because the logo (HEADER) is bigger than the following content.
all of the following components are in order and I need them to be centered HEADER height:216px; width: 1000px; LINK-BAR height:21px; width:961px; (this is the width of the rest of the page) BODY-CONTENT padding:50px; - COLUMN ONE - COLUMN TWO (width:231px LINK-BAR any help is very much appreciated, Thanks! Similar TutorialsI tried for hours to make the following divs positioned as shown in the following image. I will appreciate if someone will guide me through this. When I used float, position, display etc... things messed up one way or another. Code: <div class="friendlisting"> <a href="#"><img src=".jpg" alt="xxxx" class="profile" /></a> <div class="fullname"><a href="#">George Lexington</a></div> <div class="hometown">Bruges, Belgium</div> <div class="commonfriends">13 common friends</div> <div class="addtofriends"><img src="images/icons/user_add.png" />Add to friend list</div> <div class="sendmessage"><img src="images/icons/email_edit.png" />Send Message</div> </div> #content .friendlisting { min-height:40px; padding:5px; border-bottom:1px solid #DDD; } #content .friendlisting img.profile { width:100px; } #content .friendlisting .fullname { width: 100px; margin:10px; } #content .friendlisting .hometown { width: 100px; color:#CCC; margin:10px; } #content .friendlisting .commonfriends { width:100px; height:100%; background:#ffe996; } #content .friendlisting .commonfriends:hover { background:#FEDF62; } I've got a page whose layout I'm defining with divs and spans and css, and it *seems* at first glance that the divs in 2 separate columns are lining themselves up when they shouldn't be. The code: Basic layout defined by Code: <div class="menucolumn"> <!-- some content in my left hand column --> </div> <div class="maincolumn"> <!-- some content in my right hand column --> </div> Corresponding CSS: Code: div.menucolumn{ float: left; width: 200px; margin-top: 20px; } div.maincolumn{ margin-left: 205px; padding-left: 5px; border-left: 1px solid #222222; } Form Fields: Code: <span class=\"formlabel\">Use MySQL (yes or no):</span> <input type=\"text\" name=\"usemysql\" class=\"formfield\"> CSS: Code: .formlabel, .formfield{ color: #222222; text-decoration: none; font-color: #222222; font-family: Arial; font-size: 12px; font-style: normal; font-weight: normal; display: block; width: 300px; float: left; margin-top: 5px; } .formlabel{ text-align: left; width: 300px; } Inside the left column (menucolumn class) there are about 10 small divs which contain a link each with short text. In the right column there are 6 very large divs used to define peices of a large configuration form. As you can see by the screenshot, the first right hand div (the "Program Configuration" label in the screenshot below) and the span immediatly below it (the first field in the form) seem to be lining up with the div that contains the links on the left. How can I get the rest of the form fields to fill up that space? Very cool new method, definitely worth a look. http://somerandomdude.net/projects/webdev/divless/ Enjoy. I need to create the following layout using divs/css, but I can't figure out how to do it. Can anyone help me, please? Thanks, Gary Code: <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> <table cellspacing="0" cellpadding="0" border="0" width="760" height="100%"> <tr height="420"> <td width="600"></td> <td width="160" bgcolor="green"></td> </tr> <tr> <td width="600"></td> <td width="160" bgcolor="yellow" valign="bottom">This text is aligned to the bottom of the window, and moves up with the bottom of the window but only as far as the green block.</td> </tr> <tr height="20"> <td width="600"></td> <td width="160" bgcolor="yellow"></td> </tr> </table> A demo of this page is here , so you can see what it does. Many thanks, Gary This threads over with. I'm currently working on a new blog and am trying to make this layout http://danbeckett.co.uk/newl.gif, but as this is my first real foray into CSS I'm not having much luck. I know that for the curves I'll need to use images, but it's getting them inline, and finding a way to make the (slightly) light(er) blue to stretch across as with the border. Here's what I have so far: http://danbeckett.co.uk/blog.htm and the CSS: http://danbeckett.co.uk/blog.css It looks better in FF than IE, in IE it really is a mess. If anyone can help me with this I would really appreciate it, Thanks - Dan. Does anyone know how I can place two adjacent divs to fit the full width of the browser when one div is a set pixel width and the other i think has to be %? Here's my code: Code: <div style="position: absolute; top: 0px; left: 0px; width: 260px;"> <a href="http://www.thencollection.com/"><img src="images/logo.jpg" width="260px" height="55px" border="0" alt="The N Collection Logo" /></a></div> <div style="margin-left: 260px; width: 100%; height: 55px; background-color: #FFDC00;"> </div> Right now the header extends the browser width. Thanks in advance! I'm having some problems with creating a layout using nested 'divs' displayed as inline-blocks. I know that for FireFox 3.0 all that needs to be done is display:inline-block; and for IE lte 8 I need to trigger layout in the 'divs' and then set them as display:inline; To my understanding setting display:inline-block; triggers layout in IE (as does zoom: 1; or giving the div depth; height and width) Then all you need is to do is <!--[if lte IE 8]> <style> display:inline;</style><![endif]--> I've achieved this layout style in a previous website, yet with the exact same technique my results are nill. Can someone please compare at my code in ff3 and IE and tell me what I'm doing wrong.
Code: <html> <head> <!--[if IE]> <style type="text/css"> #container div {display:inline;} #ul_top li {display:inline;} #header p {display:inline;} #main_content div {display:inline;} #recreation div {display:inline;} </style> <![endif]--> <style type="text/css"> body {padding:0px; margin: 20px 0px 0px 20px; } h1 {color:#990D0D; font-size: 20px; text-indent: 40px} #limiter {width: 1003px; } #ul_top {margin:0px; text-align:right; } #ul_top li {display:inline-block; zoom:1; padding: 0px 5px 0px 0px; } #ul_top li a {color:#000; text-decoration:none; font: veranda; font-size: 11px; } #ul_top li a:hover {color:#DE6800; text-decoration: none; font: veranda; font-size: 11px; } #container {border: solid #000 1px; background: #FFF url('background.jpg'); text-align:left; width: 1000px; height: 750px; } #header {width:1000px; height:303px; background:#yellow url('red_rock_header.jpg') no-repeat; } #header p {display:inline-block; zoom:1; font-size: 20px; } p.company_name:first-letter { color:#990D0D; font-size:40px; } #main_content div {display:inline-block; vertical-align:top; zoom:1;} #recreation {width:430px;} #recreation div {display:inline-block; vertical-align:top; zoom:1;} #text_holder{ border-right: dashed black 1px; padding:15px; width: 375px;} a.rec_links {color:#DE6800; font-size: 18px; } a.rec_links:hover {color:#000; font-size: 18px; } a.pic_links { display:block; position: relative; width: 200px; height: 160px; } #climbing {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('climbing.jpg') no-repeat; } #bicycling {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('bicycling.jpg') no-repeat; } #hiking {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('hiking.jpg') no-repeat; } #wildlife {border: solid #FA9928 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 200px; height: 160px; padding: 5px; margin-top: 5px; background: orange url('wildlife.jpg') no-repeat; } p.discription {font-size: 12px; text-indent: 20px; } </style> </head> <body> <div id="limiter"> <ul id="ul_top"> <li><a class="mini_link" href="#">Contact us</a></li> <li><a class="mini_link" href="#">Area Map</a></li> <li><a class="mini_link" href="#">About us</a></li> </ul> <div id="container"> <div id="header"> <p class="company_name">Red<p class="company_name">Rock</p><p class="company_name">Recreation</p> </div> <div id="main_content"> <div id="text_holder"> <h1>Red Rock Canyon Las Vegas NV:</h1><p class="discription"> Red Rock Canyon, located just a few miles west of Las Vegas, is named for the deep red 3,000-foot-high sandstone cliffs that are perched above the dusty wastelands of this part of the Mojave Desert. The view from any part of the park is breathtaking: mostly nature fills the view, but from some points you can make out the entire Las Vegas Strip in the distance!</p><p class="discription"> Climbing, hiking, and bicycling throughout the park is fun and exiting for the whole family. In the summer time water, sunscreen, and proper equipment is necessary. Elderly and young children can opt to drive around the park (a small fee for motorized vehicles aplies) along a 13-mile paved loop and still experience the scenic views.</p><p class="discription"> A visitor's center provides information on area history, geology, flora and fauna (visitors may encounter burros, big horn sheep or desert tortoises). You can also pick up a map of the park with detailed hiking routes (beginner, intermediate, and advanced levels). Rangers offer guided tours at no charge -- see website for schedules.</p> </div> <div style="width: 100px;"><p class="company_name">Red<p class="company_name">Rock</p><p class="company_name">Recreation</p></div> <div id="recreation"> <div style="text-align:center;"><a class="rec_links" href="#">Climbing</a><br /> <div id="climbing"> <a href="#" class="pic_links"></a> </div> </div> <div style="text-align:center;"><a class="rec_links" href="#">Bicycling</a><br /> <div id="bicycling"> <a href="#" class="pic_links"></a> </div> </div> <div style="text-align:center;"><a class="rec_links" href="#">Hiking</a><br /> <div id="hiking"> <a href="#" class="pic_links"></a> </div> </div> <div style="text-align:center;"><a class="rec_links" href="#">Wildlife</a><br /> <div id="wildlife"> <a href="#" class="pic_links"></a> </div> </div> </div> </div> </div> </body> </html> this should be simple, but i just don't seem to have the hang of css yet what i want right now is a div for the links and stuff at the top, a bar on the left with the content to the right, and then the footer for more links and stuff, basically something like this site http://www.c21homeservices.com/common/mkttrends.php?mtt=selling only using css the man problem right now is that i can't get the content box positioned so that it has a 5px border around it or something so you see its parent box as a border and as more content is put into it the page justs gets longer at the content box with its parent moving with it maybe just looking at what i have will help more the HTML Code: ...... <body> <div id="all"> <div id="head"> Head Section </div> <div id="main"> Bar <div id="content">Content Goes Here</div> </div> <div id="footer"> footer </div> </div> </body> </html> and the css Code: body { background-color:#ff0000; } #head { height:200px; } #all { margin-left:3%; margin-right:3%; background-color:#a0a0a0; } #main { background-color:#ff00ff; } #side_bar{ background-color:#99ff99; } #content{ position:relative; float:right; width:80%; right:10px; background-color:#ffffff; padding:5px; } #footer { height:200px; } those funky colors are so i can see the divs Hi. I am a relative CSS newbie working on a new layout. My intended format is:
A sidebar (a div with no visible border) containing a set of smaller divs.
A main div for the content on the right.
About 35 px of space between the sidebar div and the main div.
Yet, for some reason I am unable to force the sidebar and main div to come together in the center with space between them. Using float: only seems to make them both hug the side of the page. My HTML code is: Code: <div class="sidebar"> <div class="cv"> <font size="3"><b><center> Current Version Info </center></b></font> </div> <div class="ver"> <center> Version: <br/> <b>0.0.0</b> </center> </div> <div class="rel"> <center> Released: <br/> <b>00/00/00</b> </center> </div> <div class="nav"> </div> </div> <div class="main"> <center> Lorum ipsum </center> </div> The relevant CSS code is: Code: div.sidebar { width: 202px; float: left; border: 0px solid #00CC99; } div.cv { width: 200px; border: 1px solid #00CC99; background-color: rgb(33,33,33) } div.ver { width: 99px; border: 1px solid #00CC99; float: left; background-color: rgb(33,33,33) } div.rel { width: 99px; border: 1px solid #00CC99; float: right; background-color: rgb(33,33,33) } div.nav { margin-top: 30px; width: 200px; height: 100px; border: 1px solid #00CC99; background-color: rgb(33,33,33) } div.main { width: 500px; border: 1px solid #00CC99; background-color: rgb(33,33,33); float: right; } In particular, div.main and div.sidebar are the ones giving me trouble. What would you recommend? Edit: And for extra bonus points, can you tell me how to make another div go below everything, no matter how long the sidebar or main div is? Right now anything I add seems to hover behind the main div rather than render below it. I am trying to work on a project from HTML Utopia: Designing without Tables Using CSS. It is from Chapter 9. It should be a layout with a header and three columns. A footer was added to the bottom and floats were incorporated to the content and sidebars so that nothing interferes with the footer. So, the footer shows up okay, but the positioning of the sidebars is now screwed up. It would be nice if I could show you an image of what this looks like, but this site won't let me do that because I am a new member. I will try to describe it the best I can. Instead of being a layout with a header and three columns on top with the footer on the bottom, it has the header and middle content div on top and the two sidebars are both on the bottom with lots of space above them. The footer is on the bottom as it should be. Here is the code (this is not the whole code--this is the code I think would effect the layout): body { margin: 0; padding: 0; background-color: #050845; color: white; background-image: url(web_site_files/02_creating_the_layout/img/bg.jpg); background-repeat: repeat-x; font: small Arial, Helvetica, sans-serif; } #wrapper { background-color: #fdf8f2; color: black; margin: 30px 40px 30px 40px; padding: 10px; } #sidebar2 { float: left; width: 159px; border-top: 1px solid #b9d2e3; border-left: 1px solid #b9d2e3; border-bottom: 1px solid #b9d2e3; background-color: white; color: black; margin: 0; padding: 0; top: 1px; } #main { width: 100%; margin-top: 10px; } #sidebar { float: right; width: 220px; background-color: #256290; margin: 0; padding: 0; color: white; } Does anything look weird with the code above? If all of that looks right, then I can look and see if it is something else. I am seriously confuzzeled. I appreciate the help--I am trying to learn this on my own. (: Hi all, i'd like to make a 'table' like div that has a column down the left hand side with one or more image tags and another cell on the right with text, however i would like to do this without specifying the height (other than 100% or 1px) or absolute position of the divs: Code: ___________________ |Image 1 |Text | |Image 2 |Text | | |Text | | |Text | ------------------- Currently i've got 3 divs: one for the outer 'table', one for the images 'cell' and one for the text 'cell'. Outer 'table' style: None (just a plain <div>) Images 'cell' style: height:100%;float:left Text 'cell' style: height:100% Here's the full code if you want it: Code: <div> <div style="height:100%;float:left;"><img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10" border="0"><br> <img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10"></div> <div style="height:100%"> [div 2] Shows text on the right <br> <br> continues downwards no matter how much text appears<br> <br> <br> <br> <br> <br> Even down here [/div2] <br> </div> </div> This works great in i.e. but not mozilla, anyone have any ideas? Hey, I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore. Does anybody know how to fix this? Thanks in advance. Hi, I've decided to take the plunge and try using CSS to replicate a table layout. I've appended my code below. My issue is that I cannot get the menu and content <DIV> to align next to each other. Any tips gratefully received. PHP Code: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>CSS Layout</title> <style type="text/css"> <!-- P { color: white; } body { background-color: #000000; text-align:center; } #box { width: 750px; margin: 0px auto; background color: #ccc; text-align: left; border:1px solid white; } #banner { width: 745px; margin: 10px; height: 100px; border: 1px solid white; background-color: #000000; } #menu { margin-left: 10px; background-color: #000000; width: 200px; border: 1px solid white; } #content { background-color: #000000; width: 500px; border: 1px solid white; } #footer { width: 745px; margin: 10px; height: 50px; border: 1px solid white; background-color: #000000; } !--> </style> </head> <body> <div id="box"> <div id="banner"> <p> this is my banner </p> </div> <div id="menu"> <p> this is the menu </p> </div> <div id="content"> <p> this is my content </p> </div> <div id="footer"> <p> this is my footer </p> </div> </div> </body> </html> Here's the page which loads fine in Firefox The search box doesn't load correctly in IE, any suggestions, have spent ages tinkering and haven't found a solution which works for all browsers. Thanks I've been beating my head against the wall over this problem for two nights now. I'm working on our new site and everything is formatting well across all major browsers. But when I go to print the page, the results are less than desirable, except for Opera on my Mac. For some reason that browser handles floating divs great. But Safari, Firefox 3 and IE 7 all barf on the divs. Particularly, if the text in my main content area exceeds a page length, the remaining text displayed on subsequent pages is displayed down the page and not at the top like one would expect. Another problem is that sometimes the first page will just show me the header and menu of my content and will begin displaying the main content on the second page. I've played around with clearing floats when printing but this just re-arranges the divs and of course overlaps with other floats. Could one of you experts please take a look at this page in particular and the accompanying main.css file and tell me a quick way to prevent this with using just css attributes. An example page is he www proterraonline com / dev / team.asp While I have a print css linked in the source of the html, the code is the same as in the main.css at the moment. Here's a link to the css file to make life a little easier. www proterraonline com / dev / css / main.css Thanks. Hello, I am having trouble with the layout for round corners. I got it to work on Firefox, but can't seem to get it to function correctly in IE 6/7. There is a weird white gap at the bottom of the page, and the background color overflows at the top of the page. The site is [mark-richter . com/project1/index.asp] (Without the spaces around the .com. Sorry for brackets, rules prohibit me from posting links lol) Thanks for any help you can give. Hey friends, I am having some problem, may be you ppl can help me. Well i am using Social Engine with template. and i have the probelm that when i click on a link my LOGO and Menu moves upside automatically. Some area of CSS is wrapped in a code snippet. Code: /* GLOBAL STYLES */ html { min-height: 100%; margin-bottom: 1px; } body { background: #FFFFFF; position: relative; text-align: center; font-size: 11px; cursor:default; margin: 0px; } table.body { width: 900px; padding:0px; } p { margin: 0px; padding: 0px; } div, td { font-family: tahoma, "Trebuchet MS", arial, serif; font-size: 11px; color: #555555; line-height: 140%; } #main_background_top{height:59px; margin:0px; padding:0px; background-color:#29404f; width:100%;} #fake_body{position:absolute; top:0; width:990px; padding:0px; margin:0 auto;} #wrap{width:990px; padding:0px; margin:0 auto;} #container6 { float:center; padding:0px; width:990px; margin: 0 auto 0 auto; } /*RESETS*/ *{padding:0; margin:0;} ul{list-style-type:none;} fieldset{border:none;} a img{border:none;} a{-moz-outline:none;} /*HACKS*/ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix {display:inline-block;} /* Hide from IE Mac \*/ .clearfix {display:block;} /* End hide from IE Mac */ .text_replace{background-repeat:no-repeat; outline:0; text-indent:-9999px;} a.text_replace:active{outline:0;} /*header*/ #global_header{position:relative; height:60px; } #focus_top{width:789px; height:38px; float:right; margin-top:20px; background-color:#1a2b37; border:1px solid #475f6f; border-bottom:none;} #global_header a{color:#fff;} #global_header h1#focus_logo{float:left; margin-bottom:0; } #global_header h1#focus_logo a{display:block; background-image:url(../images/focus_logo.gif); height:48px; width:195px; padding-bottom:0px; padding-top:0px; margin-bottom:1px; margin-top:5px; background-position:left top;} #global_header h1#focus_logo a:hover{display:block; background-image:url(../images/focus_logo.gif); height:48px; width:195px; padding-bottom:0px; padding-top:0px; margin-bottom:1px; margin-top:5px; background-position:left bottom;} .focus_top_menu{float:left;} .focus_top_menu ul { float:left; width:100%; outline:none; padding: 0; margin: 0; line-height: 38px; font-size:11px; text-align:left; } .focus_top_menu li { display: inline; outline:none; list-style: none; margin: 0; } .focus_top_menu li a { text-decoration: none; outline:none; text-transform:uppercase; color: #d4d7d9; padding: 13px 9px 12px 9px; line-height:38px; font-weight:normal; } .focus_top_menu li a:hover { background-color:#223644; } .focus_search{float:right;} .btn { border:0px solid #333333; width:21px; height:21px; outline:none; background-color: #191919; background-image: url(../images/search_ok.gif); background-position:bottom left; padding:0px; cursor:pointer; } .busca { border:1px solid #FFF; vertical-align:top; margin:0; position:relative; top:0; background-color: #ffffff; color:#646262; font-size:12px; font-family:Arial, Helvetica, sans-serif; float:left; letter-spacing:1px; height:13px; padding:3px 2px 3px 4px; width:196px;} .left_side{float:left; width:199px; height:400px;} .left_side_green{ background-color:#e2f6d4; height:14px; text-align:right; padding:2px 10px 4px 10px; color:#656161; font-weight:bold;} .left_side_blue{ background-color:#e4f2f3; height:14px; text-align:right; padding:2px 10px 4px 10px; color:#656161; font-weight:bold;} .left_side_yellow{ background-color:#f4f1de; height:14px; text-align:right; padding:2px 10px 4px 10px; color:#656161; font-weight:bold;} .left_side_red{ background-color:#f4e4e7; height:14px; text-align:right; padding:2px 10px 4px 10px; color:#656161; font-weight:bold;} .left_links_blue ul { padding: 0; margin: 0; line-height: 20px; font-size:11px; font-weight:normal; text-align:left; } .left_links_blue li { list-style: none; margin: 0; } .left_links_blue li a { width: 189px; background-color:#ffffff; text-decoration: none; color: #27494E; padding: 2px 0px 2px 10px; display: block; border-bottom: 1px solid #e3eff0; line-height:20px; font-weight:normal; } .left_links_blue li a:hover { background-color:#f0f7f8; color: #292728; text-decoration: none; } .left_links_yellow ul { padding: 0; margin: 0; line-height: 20px; font-size:11px; font-weight:normal; text-align:left; } .left_links_yellow li { list-style: none; margin: 0; } .left_links_yellow li a { width: 189px; background-color:#ffffff; text-decoration: none; color: #27494E; padding: 2px 0px 2px 10px; display: block; border-bottom: 1px solid #f1eedb; line-height:20px; font-weight:normal; } .left_links_yellow li a:hover { background-color:#f8f6eb; color: #292728; text-decoration: none; } input.text4{ border: 1px solid #B5BABA; font-family: arial, verdana, serif; font-size: 11px; font-weight:bold; margin-bottom:1px; margin-top:1px; color: #7C7D7D; vertical-align: middle; padding: 3px; } td.top_menu { background-image: url(../images/topbar_bg.gif); background-repeat: repeat-x; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #BBBBBB; } td.top_menu2 { width: 20%; text-align: right; border-right: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #BBBBBB; background-image: url(../images/topbar_bg.gif); background-repeat: repeat-x; } div.top_menu_link_container, div.top_menu_link_container_end { float: left; height: 31px; border-left: 1px solid #CCCCCC; } div.top_menu_link_container_end { border-left: 1px solid #CCCCCC; } div.top_menu_link { font-weight: bold; font-size: 13px; padding-top: 5px; padding: 6px 10px 0px 10px; } div.top_menu_link_loggedin { height: 25px; text-align: right; font-weight: bold; font-size: 13px; padding-top: 5px; padding: 6px 0px 0px 10px; } div.menu { width: 150px; border: 1px solid #CCCCCC; border-left: 3px solid #7391a8; background: #EEEEEE; padding: 0px 0px 10px 10px; margin-right: 10px; } div.menu_header { margin-top: 10px; margin-bottom: 7px; } td.menu_user { background-image: url(../images/menu_user.gif); background-repeat: repeat-x; background-color: #FFFFFF; padding: 5px 10px 5px 10px; border: 1px solid #CCCCCC; border-top: none; text-align: left; } div.menu_item { float: left; padding-right: 5px; font-weight: bold; background: none; } div.menu_sep { padding: 2px 0px 0px 10px; float: left; background: none; } img.menu_icon { display: block; float: left; margin-right: 6px; margin-top:2px; } img.menu_icon2 { margin-bottom: -3px; margin-right: 3px; } div.menu_arrow { padding: 2px; float: left; } div.menu_item_dropdown a { padding: 3px 40px 5px 7px; font-weight: normal; border-left: 3px solid #DDDDDD; display: block; background: #FFFFFF; } div.menu_item_dropdown a:hover { padding: 3px 40px 5px 7px; font-weight: normal; background: #F2F2F2; border-left: 3px solid #BBBBBB; text-decoration: none; display: block; } div.menu_dropdown { border: 1px solid #CCCCCC; border-top: none; background: #FFFFFF; position: absolute; margin-top: 6px; margin-left: -20px; z-index: 99; width: auto; white-space: nowrap; } td.topbar1 { padding-bottom: 5px; } td.topbar2, td.topbar2_right { background-image: url(../images/menu_bg.gif); background-repeat: repeat-x; font-weight: bold; font-size: 15px; padding: 10px 10px 8px 15px; color: #FFFFFF; border-bottom: 1px solid #31537D; } td.topbar2_right { font-weight: normal; padding: 10px 15px 8px 10px; text-align: right; } td.content { vertical-align: top; text-align: left; background: #FFFFFF; } div.content { width: 759px; min-height:600px; padding: 25px 15px 15px 15px; text-align: left; margin-left: auto; margin-right: auto; float:right; border-left:1px solid #b3b3b3; border-right:1px solid #b3b3b3; border-bottom:1px solid #b3b3b3; } |