|
CSS - Ie7 Float And Footer Problems!
Hey.
First post on here, so hopefully you lot are very helpful I've been asked to make a site for someone I know, and I've done the design, made most of it in CSS and a little php for navigation alerations. The URL for the website is: (URL address blocked: See forum rules) The problem that I'm seeming to have, is that in IE7 the footer only takes the value of the #bottom_container height, and ignores the #left and #right that are inside this container. Meaning that, the footer rides up to the middle of the page, as shown: [IMG](URL address blocked: See forum rules)[/IMG] Does anyone know how to solve this? It's performing well in Safari and Firefox, and even IE6! Just not the new one. I know it's something to do with the height of the botom container, but each page is going to have different amounts of content, so I cant set a height for all of them. Thanks very much! Nick. Similar TutorialsHi all, Been playing about with some CSS for a simple e-comm site. Mockup here. There seems to be a few issues though between IE/FF. Thats all I've been able to test on so far though. The site validates properly as far as I can tell so that doesn't seem to be a problem. In Firefox, the left hand bottom sidebox overflows the page (the footer doesn't go below it). In IE it seems to be fine. In IE, the padding on the right hand side of the main content header box is not the same as the left side. Also, the main left bullet list is royally arsed up. At the moment, I can't spot any more issues than that. As I continue development and start to add more features, then I will probably crop up with more issues. The HTML for the site is here. The CSS for the site is here. Suggestions on how to fix it would be much appreciated. Cheers, Computer Hey everyone, Just released v2 of my design site - but there's a problem with the floated sidebar in IE6. http://www.quiviramedia.com/ is the site. http://www.quiviramedia.com/style.css is the CSS URL. What is the problem? Does anybody know? Thank you! Here's the link of the messy page: http://205.205.200.231/~h806209/indexmess.php I need someone to tell me why the float left/right isn't aligning properly. I posted the link above. Here's an example that works: http://205.205.200.231/~h806209/positioning.php and http://205.205.200.231/~h806209/positioning1.php One's in a style tags the other's inline. But when I insert my codes it shows things messed up. Hello everyone!! Great community you have going here! I am working on a personal project, and try to do all the work myself (hired a designer at one point but the best he could do is a table based layout ) The site is based on the drupal CMS and the zen theme. And currently the them has problems when rendered in IE7 everything is getting jammed in the top left corner in IE7 and IE8 compat mode: drupal.org/files/issues/IE8_compat.GIF some people tried to combat this issue by adding this to the IE specific stylesheet: CSS Code: Original - CSS Code #header, #main {overflow: hidden;} #header, but it does not solve the problem 100% drupal.org/files/issues/IE7vsIE8_overflow_hidden.GIF I've been searching for a fix for some time but with no luck, so if you people have any suggestions I would be super appreciative! The live site could be viewed he techbine.nfshost.com P.S. to see the images copy/paste the links to the address bar (I have a low post count so can't link directly ) Hey. On my page I've got smaller "post" div's I put my content in, and those are inside a "mainContent" div again. They have fixed width and I can get two of them beside each other, which works fine with float:left - but if I have two posts with variable height, then the next post on the page will be below the highest one. I uploaded an example at http://www.zaklaberg.tk. I was wondering how I can make it so my post elements stack properly on top of each other? My css-rule for the post div tags looks like this: Code: .post {
padding: 5px;
height: auto;
width: 330px;
margin-bottom: 50px;
margin-left: 30px;
background-color: #CCE3C1;
float: left;
}
The rest of my css is at http://home.online.no/~ste-labe/_css/main.css. Thanks in advance for any help! I can't get a footer after at bottom of the page. The problem is my maincontent area is dynamic in size although i have edited this out. The footer appears to the left of maincontent and not at bottom. Code: ...
div#headerWrapper {
position:absolute;
top:5px;
left: 5px;
background: #63625e ;
width:1000px;
height:120px;
top:3px;
left: 5px;
border:2px groove black;
}
div#header {
position:relative;
top:5px;
left: 5px;
width:990px;
height:100px;
background: black;
border:5px groove #63625e ;
}
div#boxlayer1 {
position:absolute;
width:145px;
height:700px;
z-index:1;
left: 5px;
top: 125px;
border:2px groove black;
// background: green;
background-color:#63625e;
}
div#content1 {
position:absolute;
top:125px; /*border adds 2 px so i take them off*/
left: 165px;
width:850px;
height:900px;
z-index:1;
border:5px groove #666862;
background: black;
}
#footer {
clear:both;
float:none;
width:200px;
height:100px;
background: red;
border:5px groove #63625e ;
}
.....
</head>
<body bgcolor="#666862"> <?php include("navigation2.php"); ?>
<div id="navlist">
<div id="headnavlist">Site Features</div>
<ul >
<li ><a href='login.php'>Upload</a></li>
<li><a href='home.php'>Home</a></li>
<li ><a href='login.php'>Send Mesage</a></li>
<li><a href='home.php'>Message Outbox</a></li>
<li ><a href='login.php'>Upload</a></li>
<li><a href='home.php'>Home</a></li>
<li><a href='home.php'>Message Outbox</a></li>
</ul>
</div>
</div>
<div id="content1" >
asfafas
</div> <br><br>
<div id="footer">
asdsa
</div>
</body>
</html>
Hello all, I had a question about the CSS file I was using for my site. I have a multi-column setup, with header, nav, content, right column, and footer as the columns. Now everything except the footer are together. The footer is spaced from the rest of the page, and I'd like it to connect to the bottom of the page. My CSS: * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #000; background-color: #3b5999; } h1 { font-family: "Trebuchet MS"; font-size: 20px; color: #000; } h3 { font-family: "Trebuchet MS"; color: #000; font-size: 12px; } A:link { font-family: Verdana; font-size: 12px; color: #000; text-decoration: none; border: 0; } A:visited { color: #000; text-decoration: none; border: none; } A:active { color: #000; text-decoration: none; border: none; } A:hover { color: #8CC1DF; text-decoration: none; } #wrapper { margin: 0 auto; width: 922px; } #header { width: 900px; padding: 10px; height: 100px; background-image: url(background.png); background-repeat: no-repeat; } #navigation { float: left; width: 900px; height: 42px; margin: 0px 5px 0px 0px; text-align: center; font-family: Arial; } #content { float: left; background-color: #fff; font-family: "Trebuchet MS"; font-size: 12px; color: #000; padding: 10px; height: 350px; width: 683px; margin-left: auto; margin-right: auto; overflow: auto; } #rightcolumn { background: #fff; padding: 10px; margin: 0px 0px 5px 0px; height: 350px; width: 195px; float: left; } #footer { width: 920px; height: 40px; padding: 10px; clear: both; margin: 0px 0px 10px 0px; background-image: url(footer.gif); background-repeat: no-repeat; font-family: Arial; color: #000; } Thanks in advance! Hello. I am trying to solve a float problem. The crux: One wrapper div around a left (floated) column and right column. Content in the left is fine: In the right column I need the image (#logo) to be on the left of a h2 (#name). The #logo is taller than #name. Under both of those I need a ul (#basic_list) to essentially clear both #logo and #name. Please look at my code and diagram of how it should look in my attachment. Thanks Hey guys, I started working on my website again and found a great CSS dropdown menu online that is free to use with a GPL license. I adjusted it without a problem (always could read and adjust code but aren't great when it comes to writing it). Now that I embedded it in my website there is a slight trouble I am running into. I can't seem to center it no matter what I try. I read these floats are tricky to center at times which is why I wanted to share my code with you and see if you might be able to fix it for me. If anyone of you can help me out it would be much appreciated!!! Thanks, alex Here is the site with the code. 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> <title>LWIS.NET Celebrity Drop-Down Menu</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Tom@Lwis (http://www.lwis.net/free-css-drop-down-menu/)" /> <meta name="keywords" content=" css, dropdowns, dropdown menu, drop-down, menu, navigation, nav, horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards, cross browser, internet explorer, ie, firefox, safari, opera, browser, lwis" /> <meta name="description" content="Clean, standards-friendly, modular framework for dropdown menus" /> <link href="css/dropdown/themes/lwis.celebrity/helper.css" media="screen" rel="stylesheet" type="text/css" /> <!-- Beginning of compulsory code below --> <link href="css/dropdown/dropdown.linear.columnar.css" media="screen" rel="stylesheet" type="text/css" /> <link href="css/dropdown/themes/lwis.celebrity/default.advanced.css" media="screen" rel="stylesheet" type="text/css" /> <!--[if lte IE 7]> <script type="text/javascript" src="js/jquery/jquery.js"></script> <script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script> <![endif]--> <!-- / END --> </head> <body> <!-- Beginning of compulsory code below --> <ul id="nav" class="dropdown dropdown-linear dropdown-columnar"> <li><a href="./">resume</a></li> <li><a href="./">about</a></li> <li class="dir">work <ul> <li class="dir">Reel <ul> <li><a href="./">Montage Reel</a></li> <li><a href="./">Director's Reel <br>(selected scenes)</a></li> </ul> </li> <li class="dir">Narrative <ul> <li><a href="./">The Liberation of the Fish</a></li> <li><a href="./">Behind the Scene</a></li> <li><a href="./">All that Remains</a></li> <li><a href="./">Jumper</a></li> <li><a href="./">Dragoste</a></li> </ul> </li> <li class="dir">Music Video <ul> <li><a href="./">MOBY music video competition</a></li> </ul> </li> <li class="dir">Commercial <ul> <li><a href="./">FIFA spec commercial</a></li> </ul> </li> </ul> </li> </ul> <!-- / END --> </body> </html> And here is the default css which I have tried playing with to no success. Code: @charset "UTF-8";
/**
* LWIS Celebrity CSS Drop-Down Menu Theme
*
* @file default.css
* @name Default
* @version 0.1
* @type transitional
* @browsers Windows: IE5+, Opera9+, Firefox2+
* Mac OS: Safari2+, Firefox2+
*
* @link http://www.lwis.net/
* @copyright 2009 Live Web Institute. All Rights Reserved.
*
*/
/*-------------------------------------------------/
* @section Base Drop-Down Styling
*/
ul.dropdown {
font: 20px/normal Helvetica, Arial, sans-serif;
letter-spacing: +2px;
text-transform: lowercaseercase;
}
ul.dropdown li {
padding: 0 10px;
background-color: transparent;
color: #000;
}
ul.dropdown li.last ul li {
float: right;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #cdcdcd;
color: #000;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #000; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
/* -- level mark -- */
ul.dropdown ul {
background-color: #cdcdcd;
font-size: 12px;
letter-spacing: normal;
}
* html ul.dropdown ul {
width: 960px;
}
ul.dropdown ul li {
font-weight: bold;
}
/* -- level mark -- */
ul.dropdown ul ul {
margin-top: 5px;
text-transform: none;
}
ul.dropdown ul ul li {
font-weight: normal;
}
/*-------------------------------------------------/
* @section Support Class `dir`
*/
ul.dropdown *.dir {
padding-right: 30px;
background-image: url(../../../../images/lwis.celebrity/nav-arrow-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown ul *.dir {
background-image: none;
}
Thanks for viewing my post. Here is the site I am working with: http://www.flattrackillustrated.com/dev/ I am having two problems: 1) If you shrink your browser too far in on the left, the floating right image goes over everything. I need to MAX left side margin to be about 600px, but with float on, the margin-left doesn't work! Is there a way to tell this image to float, but stop at a certain point? 2) I want the background image I have on the left nav side to continue all the way to the bottom of the page, however, since I already am using a background image for the top, I can't seem to do a horizontal and vertical of two different images. Is there a way to make this happen? Thanks! hey all, i have divs within a div but the inner div with the text does not expand the main wrapping div with so the main wrapping div is very thin and the text just goes over it?? here is the code Code: <div id="greyinset"> <div id="insetcontent"> <form name="form1" method="post" action=""> <div id="insetcontentL"> <div align="left"> <label>Smoking:</label> <br> <label>Bed Type:</label> <br> <label>Accessible:</label> <br> </div> </div> <div id="insetcontentR"> <div align="left"> <input name="smoking" type="radio" value="yes"> yes <input name="smoking" type="radio" value="no" checked> no<br> <input name="radiobutton" type="radio" value="radiobutton"> King <input name="radiobutton" type="radio" value="radiobutton"> Two Beds <input name="radiobutton" type="radio" value="radiobutton"> No Preference<br> <input name="accessible" type="checkbox" id="accessible" value="yes"> </div> </div> </form> </div> </div> and the css code Code:
#greyinset { width: 100%; background-color: #eee; border: 1px solid black; clear:left; }
#insetcontent {width: 100%; padding: 3px 10px 3px 10px; white-space:normal;}
#insetcontentL {width: 50%; float: left;}
#insetcontentR {width: 50%; float: right;}
any ideas?? or do i have to go back to trusty tables thanks RF I have an image that is float: right that I want a caption under. I read the Floatutorial and another float tuturial and thought I did what it said, but now the image floats left of the caption - sort of. I want the image to float left and the caption in dk blue to be beneath it. Here is the problem page Here is the css code for the float part: Code: .imgRight {
clear: none;
float: right;
min-width: 100px;
color: #3399FF;
font-weight: bold;
}
.imgRight img {
margin: 0px 0px 10px 20px;
border: 1px solid #000099;
overflow: visible;
}
Here is the xhtml code for the float part: Code: <p>Vitalograph Ltd was founded in 1963, building on a successful business in respiratory
diagnostic and therapeutic products started in 1951. </p>
<div class="imgRight"><img src="../images/p_model.jpg" width="275" height="182" alt="Vitalograph P Model Spirometer" />
1966 Vitalograph P Model Spirometer</div>
<p>Vitalograph achieved its early success
by taking spirometry from a complex laboratory test to a simple effective screening procedure
- with the key benefit of providing early detection, and therefore more effective treatment.</p>
I am having problems with my footer once I resize my to make my page have to scroll left to right. It displays fine until I do this. It makes my footer background not display all the way. Here is my css for reference: Code: .footerWrapper {
margin: 20px 0 0 0;
padding: 0;
width: 100%;
background: url(../images/content123bg.png) repeat-x;
}
.footer {
margin: 0 auto;
padding: 0;
width: 960px;
height: 155px;
}
.footer img {
margin: 10px 0 0 0;
float: right;
}
.footer h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #09F;
text-decoration: none;
text-align: center;
padding: 10px 0 10px 0;
margin: 0;
width: 145px;
}
h3.facts {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #09F;
text-decoration: none;
text-align: center;
padding: 10px 0 10px 0;
margin: 0 0 0 -3px;
width: 145px;
}
.footer p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #CCC;
text-decoration: none;
text-align: center;
width: 140px;
margin: 0 0 0 2px;
padding: 0 0 5px 0;
}
.footer p a {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
color: #999;
text-decoration: underline;
}
.footer p a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
color: #FFF;
text-decoration: none;
}
#twitter_t {
margin: 0;
padding: 0;
}
#twitter_t img {
width: 150px;
height: 50px;
margin: 0;
border: none;
padding: 0 230px 0 0;
/* [disabled]float: left; */
position: relative;
}
#twitter_m {
width: 370px;
padding: 0 10px 0 0;
background:url(../images/twiiterbubble.png) no-repeat;
float: right;
height: 140px;
margin: -40px 0 0 0px;
border: none;
}
#twitter_container {
min-height:45px;
height:auto !important;
height:40px;
padding-bottom:10px;
/* [disabled]padding-right: 10px; */
}
#twitter_update_list {
width: 350px;
padding: 0 0 0 20px;
overflow: hidden;
font-family: Georgia;
font-size: 14px;
font-style: italic;
color: #000;
line-height: 16px;
font-weight:bold;
}
#twitter_update_list li {
width: 350px;
list-style: none;
margin: 60px 0 0 0;
}
#twitter_update_list li a {
color: #FFF;
border-bottom: dotted 1px;
text-decoration: none;
}
#twitter_update_list li a:hover {
color: #09f;
}
Here is my HTML: Code: <div class="footerWrapper">
<div class="footer">
<div class="fltlft">
<h3>Quick Links</h3>
<p><a href="http://www.beckin.com/">Home</a></p>
<p><a href="http://www.beckin.com/portfolio.html">Portfolio</a></p>
<p><a href="http://www.beckin.com/css-menus.html">CSS Menus</a></p>
<p><a href="http://www.beckin.com/free-templates.php">Templates</a></p>
</div><!-- end fltlft -->
<div class="fltlft">
<h3>Help</h3>
<p><a href="http://www.beckin.com/support/">Custom Quotes</a></p>
<p><a href="http://www.beckin.com/support/">Support</a></p>
<p><a href="http://www.beckin.com/support/">Webmasters</a></p>
</div><!-- end fltlft -->
<div class="fltlft">
<h3 class="facts">Facts</h3>
<p><a href="#">Privacy Policy</a></p>
<p><a href="#">Terms of Use</a></p>
</div><!-- end fltlft -->
<div id="twitter_t">
<a href="http://twitter.com/beckindesigns"><img src="images/top.png" alt="free web templates" /></a>
</div><!-- end twitter_t -->
<div id="twitter_m">
<div id="twitter_container">
<div id="twitter_update_list"></div>
<!-- end .twitter_container --></div>
<!-- end .twitter_t --></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/beckindesigns.json?callback=twitterCallback2&count=1" type="text/javascript"></script>
<!-- end .footer --></div>
<!-- end .footerWrapper --></div>
Any help with this would be very appreciated. Hello, I am trying to change the layout of my journal which is based on CSS. The codes doesn't come from me. I found it two years ago on a free layout website where all layouts are allowed to be changed if there are credits given for the original style sheed. I am afraid my problem is pretty simple. I don't know very much about programming and CSS, just very few. So please snap at me immediately if I don't understand fast enough or don't give you exactly the answers you need. Anyways I will give my best! My problem: I want to change the footer and something what is supposed to be called the header. I would say: Let's concentrate on the footer at first. I want to change both from their background color to an image. The text still have to be able to be read. I have read something about putting the footer in the body but there is my normal background of the whole journal and I think it would make problems this way. Well I don't know if the codes are messy. I changed a few colors and positions but even that not fully until now. I hope you can get a clue what is my problem! And thank you so far! Here are the codes from my footer: Quote: #footer { text-align: center; font: 7pt arial, sans-serif; background: #fff url(here would stand the image url but as newbie I am not allowed to post urls, you know the rules) repeat; color: #BBBBBB; z-index: 100; clear: both; border: 0px; padding: 10px; } Hey everyone, So I'm working on a website for a client and I am running into a bit of a weird problem.. The home page displays as follows: http://www.beitelligent.com/clients/keldan/index.php As you can see, the footer is pushed to the absolute bottom - where it should be.. this is displaying correctly. I began to make sub-pages and ran into the problem, where the footer isn't pushing to the bottom.. http://www.beitelligent.com/clients/keldan/about.php - Any ideas?? Any help is appreciated. Thanks, Peter Barbosa Firefox renders the page correctly, but IE likes to place the footer in random positions throughout the page. Not sure what's happening here. Look here. Once the page is cached, and the link is selected again, the footer displays correctly. This is very strange. If you clear your cash or refresh the page, it screws the footer up again. The happens on several pages. These are CSS sections for clearfooter and footer. Code:
#clearfooter {
clear: both;
height: 1em;
overflow: hidden;
}
#footer p {
position: absolute;
bottom: 1px; /* Fix for Mozilla spacing from bottom */
left: 150px;
height: 1em;
width: 534px;
color: #ffffff;
text-align: center;
padding: 3px;
margin: auto;
font-weight: bold;
font-size: .6em;
}
I appreciate any help on this... Thanks, Darin Hi all, I have a page with a sticky footer. It's all working great thanks to the sticky bottom tutorial from Ryan Fait. I already contact him but his wrists are broken so he can't do anything. This is the website we're talking about: - www .rokjesdagloop .nl And here is the deal: - As you can see the footer stays at bottom so I insert the sticky bottom tutorial wich lead us to this: www .rokjesdagloop .nl /test .php But I want the footer a little bit inside the content so the text overlaps the girl a bit on the background. I tried several things on the margin's and the heights but still nothing that works. Does anybody have tips or codes? Would be great! Thank you in advanced! Regards, Jonathan Hello! I am new to dreamweaver CS3 and need help with these two things: when I preview my site in IE my lightbox does not work. And my sticky footer does not stick to the bottom of the page. Please someone help me. Thank you in advance! Here is the industry news page I have the picture floating either right or left with text beside it - then a line underneath it. I want the line to always be at least 10px below the picture. When the text is less, the line crosses into the picture. xhtml: Code:
<div id="industry">
<h1>Industry News and Information</h1>
<div class="row">
<span class="imgLeft"><img src="../images/ATS-ERS_thumb.jpg" width="100" height="100" alt="ERS ATS Logo" /></span>
<h2>New single set of standards for ERS and ATS</h2>
<p>Through the combined efforts of the European Respiratory Society (ERS)
and the American Thoracic Society (ATS), there is now a new single set
of standards for both sides of the Atlantic. <a href="/resources/industry_news/news_ers_ats.html">More
...</a></p>
</div>
<div class="row"> <span class="imgRight"><img src="../images/ARTP_thumb.jpg" width="112" height="100" alt="COPD Day at Vitalograph" /></span>
<h2>Winter ARTP meeting well attended</h2>
<p>Vitalograph recently attended the Association for Respiratory Technology
and Physiology (ARTP) 3Oth Annual Conference at the Hilton Metropole
Hotel in Brighton. <a href="/resources/industry_news/news_artp.html">More
...</a></p>
</div>
<div class="row">
<span class="imgLeft"><img src="../images/ATS-ERS_thumb.jpg" width="100" height="100" alt="ERS ATS Logo" /></span>
<h2>New single set of standards for ERS and ATS</h2>
<p>Through the combined efforts of the European Respiratory Society (ERS)
and the American Thoracic Society (ATS), there is now a new single set
of standards for both sides of the Atlantic. <a href="/resources/industry_news/news_ers_ats.html">More
...</a></p>
</div>
<div class="rowLast">
<span class="imgRight"><img src="../images/COPDdayoffice_thumb.jpg" width="99" height="98" alt="COPD Day at Vitalograph" /></span>
<h2>Vitalograph participates World COPD Day</h2>
<p>To mark World COPD Day on 16 November 2005, the British Lung Foundation
teamed up with Superdrug to offer a free spirometry test at selected
stores across the UK. <a href="/resources/industry_news/news_world_copd_day.html">More
...</a></p>
</div>
<p class="back"><a href="javascript:history.go(-1)">< Back</a></p>
</div>
css: Code:
.imgLeft img {
clear: none;
float: left;
margin: 0px 20px 10px 0px;
border: 1px solid #000099;
}
.imgRight img {
clear: none;
float: right;
margin: 0px 10px 10px 20px;
border: 1px solid #000099;
}
/*rows*/
.row {
padding-top: 10px;
margin-top: 10px;
border-top: 1px solid #3399FF;
}
.rowLast {
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;
border-top: 1px solid #3399FF;
border-bottom: 1px solid #3399FF;
}
.line {
border-bottom: 1px solid #3399FF;
padding-top: 0px;
padding-bottom: 10px;
}
.inline {
display: inline;
}
#mainColumn {
padding: 0px;
margin-left: 175px;
background-color: #FFFFFF;
height: 100%;
}
/*industry news*/
#industry {
padding-right: 20px;
padding-left: 20px;
}
#industry h1 {
margin-bottom: 20px;
}
#industry h2 {
color: #000099;
margin: 0px 0px 10px 0px;
}
#industry img {
margin-bottom: 10px;
}
.copdDay img {
clear: both;
margin: 0px 40px 15px 55px;
border: 1px solid #000099;
}
.artp {
margin: 0px 40px 15px 40px;
}
.artp img {
clear: both;
margin: 0px 40px 15px 25px;
border: 1px solid #000099;
}
Any suggestions on how to get this consistently since through css accounting for varying lengths of text?? I know I can adjust padding/margins for each section to make it work, but I want something that is more universal that I can always use to get the same appearance. Thanks! |
|||||||