homepage Welcome to WebmasterWorld Guest from 54.167.182.201
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
multiple column issues - especially IE6 :(
Columns wont get aligned verticaly
csslearner18



 
Msg#: 4197164 posted 2:42 pm on Sep 6, 2010 (gmt 0)

Hi,
I just checked a site I am working on using adobebrowserlab for cross browser check.

When I create two columns, both with float left, the right column slightly lower than the left column.

In IE6, the right column appears nearly bottom...

Please give me an advice on this!


here's my code

div#main-content {
margin: 0 auto;
width: 800px;
}

div#main-content div#left-nav {
float: left;
width: 220px;
margin-top: 3px;
}
div#main-content div#left-nav ul#nav {
list-style: none;
display: block;
width: 113px;
height: 15px;
float: left;
color:#4b4736;
text-decoration: none;
font-weight: bold;
}
div#main-content div#left-nav ul#nav li {
color:#4b4736;
font-weight: bold;
display: block;
width: 113px;
height: 15px;
float: left;
text-decoration: none;
/*

margin: 4px 0px;
}
*/
}
div#main-content div#left-nav ul#nav li a {
color: #4b4736;
text-decoration: none;
font-weight: bold;
display: block;
width: 113px;
height: 15px;
float: left;
}

div#main-content div#left-nav ul#nav div#home {
margin: 1px 5px 0px 5px;
padding: 0px 27px 0px 27px;
letter-spacing: -0.4px;
color: #b1a10e;
}
div#main-content div#left-nav ul#nav div#products {
margin: 10px 5px 15px 5px;
padding: 0px 27px 0px 27px;
}
div#main-content div#left-nav ul#nav a div#contact {
margin: 42px 5px 10px 5px;
padding: 0px 27px 0px 27px;
}


div#main-content div#right-col {
float: left;
width: 565px;
margin: 0px 0px 0px 235px;
}

 

alias

10+ Year Member



 
Msg#: 4197164 posted 2:11 pm on Sep 7, 2010 (gmt 0)

Hi, please include a sample HTML snippet.

csslearner18



 
Msg#: 4197164 posted 3:43 pm on Sep 7, 2010 (gmt 0)

Hi,
I've sorted out the above float, but another div float I'm attemptting won't get aligned in only IE6 & 7.
I want to put text address (#address) about 245px away from the left and languages bar on the right
(#languages) within div#top (800px width).
The languages div contains 2 x texts (ENG and RUS) and the both country's flaf images.

In both IE6& 7, the address text goes to the right above the languages bar.

Would be great if I could get help on this!

==CSS==
div#page-wrap {
width:800px;
height:100%;
margin-left:auto;
margin-right:auto;
}
div#top {
height: 65px;
margin: 0 auto;
padding-top:118px;
}

div#top div#address {
float: left;
width: 260px;
color:#ffffff;
text-align:left;
margin: 0 0 0 230px;
}* html #div#top div#address { display:inline; }
* html div#address { display:inline; }

div#top div#languages {
float:right;
width:170px;
height:20px;
/*position:relative;*/

}* html div#top div#languages { display:inline; }
* html div#languages { display:inline; }

div#top div#languages div.eachlanguage {
float:left;
width: 170px;
margin-left:auto;
margin-right:auto;
}

div#top div#languages div.eachlanguage img {
float: right;
display:inline;
padding: 0px 5px;
}


div#top div#languages div.eachlanguage img a {
float:left;
display:block;
border: 1px solid #d1d1b5;
}


div#top div#languages div.eachlanguage p{
float:right;
padding: 3px 5px 0px 5px;
}

div#top div#languages div.eachlanguage span {
letter-spacing: 1px;
color: #b1a000;
text-transform:uppercase;
font-size: 0.8em;
font-weight: bold;
}


div#top div#languages div.eachlanguage a {
color: #ffffff;
font-size:0.8em;
display: inline;
font-weight: bold;
}

div#top div#languages div.eachlanguage a:hover {
color:#b1a000;
}

==HTML==
<div id="top">
<div id="address"><h4>Tel: +44(0)208 660 7025 Fax: +44(0)208 688 8882</h4></div>

<div id="languages">
<div class="eachlanguage">
<a href="#"><img border="0" alt="" src="http://www.ayakolay.co.uk/miltongrange/images/russian.jpg"/ ></a>
<p><a href="#">rus</a></p>
<img border="0" alt="" src="http://www.ayakolay.co.uk/miltongrange/images/english.jpg"/ >
<p><span>eng</span></p>
</div>
</div><!-- END languages -->
</div><!-- END top -->

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved