homepage Welcome to WebmasterWorld Guest from
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

2-column layout in Opera not aligning correctly
Possible float issue?

5+ Year Member

Msg#: 6369 posted 10:43 pm on Apr 28, 2005 (gmt 0)

I am starting to get more into creating layouts using CSS and I have run into an issue trying to create a 2-column layout. It is a basic layout with a vertical nav menu on the left and the main content on the right.

I am using the following CSS:

#navcontainer {
float: left;
width: 200px;
margin: 0 0 0 10px;
padding: 0;
#maincontent {
margin: 0 2em 0 220px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;

It renders fine in IE6, Firefox, Mozilla, & Netscape 7.1. In Opera 7.51 the top alignment of the two columns do not match. The #maincontent displays lower than the #navcontainer.

Any thoughts?




5+ Year Member

Msg#: 6369 posted 12:36 am on Apr 30, 2005 (gmt 0)

I attempted adding 20px top padding to the navcontainer, which moved the navcontainer in alignment with the maincontent in Opera, but in all other browsers navcontainer is no longer in top alignment with maincontent.

Any ideas on how this can possibly be hacked to look right in all browsers, would be much apprecitated.



10+ Year Member

Msg#: 6369 posted 1:11 am on Apr 30, 2005 (gmt 0)

You should check what it looks like in the latest Opera version. Opera 8 was released a few days ago. You can get the latest version of the browser here: [opera.com...]

I would not have bothered to get it working 100% in Opera 7.51. That version will soon be only of historic interest.


5+ Year Member

Msg#: 6369 posted 11:04 pm on Apr 30, 2005 (gmt 0)

I downloaded ver 8 and the float issue is no longer an issue.


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