• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 438
  • Last Modified:

damn floats and positioning

I admit it.  I hate floats.  

How do i float the logo to the left of the dividing line without effecting the location of the navigation and copy?  I tried floating logo to the left and copy to the right  but that didn't do squat.

How right side is supposed to look:
http://www.nsitedesigns.com/nsitedesigns/focus/4.html

How it looks with logo on left.  See how the main content div gets pushed down.
http://www.nsitedesigns.com/nsitedesigns/focus/5.html
0
nsitedesigns
Asked:
nsitedesigns
1 Solution
 
Kim WalkerWeb Programmer/TechnicianCommented:
Remove the left margin from the main content div (200px). It's interfering with the logo. The style beginning on line 51 in 5.html sets the margin to "50px 0 50px 200px."
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Where your css for main content is

.twoColFixLtHdr #mainContent {
        overflow-y:scroll;
        height:350px;
        width: 530px;
      float:right;
      margin:50px 0 50px 200px;
}

just get rid of the left margin so it looks like

.twoColFixLtHdr #mainContent {
        overflow-y:scroll;
        height:350px;
        width: 530px;
      float:right;
      margin:50px 0 50px;
}
0
 
nsitedesignsAuthor Commented:
perfection thanks!  I gave to first person who replied even though both had correct answer.
0
 
Dave BaldwinFixer of ProblemsCommented:
I agree, the width of two elements that are intended to 'float' beside each other mus be less than the width of the element that contains them.  'container' is 950px, sidebar is 373px, and 'mainContent' is 530px plus 200px margin for 730px.  730 + 373 = 1103 which is greater than 'container' so they can't fit side by side.  In addition, you should put 'sidebar' back where you had it just before 'mainContent' so 'nav' can't interfere with the floats.

I would suggest that you create the elements without margins first.  Then add the margins to adjust the spacing after they are about where you want them.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now