Positioning issues concering divs with float

I love this forum already!!!

My project is taking some shape finally. I remember back in the day when float was not really recommended and I can’t decide whether I like it or not; rather just go with no floats.

As you can see in my project, the right side of the site is totally out of order (CSS is float right) but when I put float left it positions itself before the #sidepanel (white area)

Need help with these corrections:

  • Arrange divs (.header, #sidepanel, #content) after each other nicely
  • Make the black area (.header) for navigation automaticly as long/high as the white area is (#sidepanel)
  • Have the navigation (click on hamburger) to push the site out and not lay in front of content IF THAT IS OPTIMAL (feedback on this idea please)
  • For some reason the hamburger is not sensitive enough to where you need to put your mouse at its bottom to get the cursor - why is that
  • Your layout is not responsive and I’m not exactly sure how you want it to look at different screen sizes. I would need to know the desired layout. I get the feeling it might require some rework of both the HTML and CSS. It’s one of those things that are almost impossible to give a “cookbook recipe” guide to. I can likely code it but I might not be able to give a terse step by step guide to it. I’d suggest learning about Flexbox and CSS Grid for layout.

  • Personally, I think side drawer menus are best used as an overlay. I wouldn’t make it push the content.

  • When using the checkbox “hack” for menus you want to nest the icon (your spans) inside a label with the for attribute set to the id of the checkbox. That way it doesn’t matter where the checkbox is located clicking the label will select the checkbox. The checkbox does not need any styles other then what is needed to hide it.

<input type="checkbox" id="toggle" />
<label for="toggle">  
  <span></span>
  <span></span>
  <span></span>
</label>

Well, responsively all elements should fall under each other - so the navigation would pretty much stay the same, then the sidepanel below it, and then the #content. And all elements are divs; all I really need is for them all to stand next to each other.

The menu hack, mine look like this at the moment:

<label></label> 

Update: I have set up a responsive design now for phone sizes.

I removed the floats, and am now relaying on div block/block inline and it seems as it works good. All feedback welcome.

I still need help with the wrapper that holds it all together. My current code there is:

#mainwrapper{ min-width: 1110px; margin: 0; padding: 0; }

Is this OK for desktop/laptops? I would want the content to spread over one’s screen though.

I found an accessibility issue as well.

#menu operates as an ul element. When I try to change to div so I can have h1 inside, the hamburger stops working.

When it comes to responsive design there tons of devices out there which means you can’t account for all of them. My recommendation is for you to use your dev tools and within the responsive view resize the screen until the layout breaks then write a media query based on that. Repeat the process until you are pleased with how it looks.