Simple two-column layout - Main content is overlapping sidebar

[deronsizemore]

I worked up a quick demo of what I’m seeing in the above Code Pen.

I’ve had this issue happen before, but honestly, it’s been so long and I just don’t remember the fix. I also realize I could probably use flexbox or something like that to lay out these columns, but if possible I’d like to just use a simple two-column floated layout like what I have to be consistent with the rest of this site and save time.

So the issue is the content in the sidebar is being overlapped by the main content. Because of this, I’m not able to click the button at the bottom of the sidebar.

What can I do to fix this?

[SamA74]

It’s the nesting. Try putting the sidebar inside of the main-wrap.

[DaveMaxwell]

I’d get rid of the floats all together. They’re just not worth the frustration, anymore. Display table and table-cell is less frustrating, and you don’t have to remember to escape your floats (which I think is your bigger issue with your setup)

[PaulOB]

@deronsizemore

What can I do to fix this?

Add position:relative to sidebar.

.sidebar {
  float: left;
  width: 150px;
  margin-right: -150px;
  position:relative;
}

However, I would have used the same method as Dave above and used display:table/cell and avoid the negative margin trick.

[deronsizemore]

@DaveMaxwell

I’d get rid of the floats all together. They’re just not worth the frustration, anymore. Display table and table-cell is less frustrating, and you don’t have to remember to escape your floats (which I think is your bigger issue with your setup)

Thanks, Dave. That makes sense. I guess I’ve just used floats so long it’s kind of my go-to. I’m not sure how I’ve never ran into this before. Maybe because I’ve never had a button like this in the sidebar or I’ve just never noticed. As for clearing, I’m actually using the “clearfix” method in my live code, just never added it to this CodePen. I’m pretty good about clearing floats and even with clearing, this overlapping issue remains.

With my lack of experience on display: table the one thing that came to mind is how to use it in media queries to adjust for smaller resolutions but in testing it real quick on your codepen it looks like display:block on the wrapper and display: inline-block on the two cells and should be good.

@PaulOB

Add position:relative to sidebar.

.sidebar {
float: left;
width: 150px;
margin-right: -150px;
position:relative;
}
However, I would have used the same method as Dave above and used display:table/cell and avoid the negative margin trick.

Hmmm… so why does that work?

I agree with your assessment of going with Dave’s solution. Looks a lot cleaner than the negative margins. Hard for an old dog to learn new tricks, I guess. My only worry with it is it appears that display:table is only supported in IE 11?

[ronpat]

@deronsizemore

Hmmm… so why does that work?

It elevates .sidebar above .main-wrap.

Apply different background colors to .sidebar and .main-wrap to see what is happens when you add {position:relative} to .sidebar.

@deronsizemore

My only worry with it is it appears that display:table is only supported in IE 11?

{display:table} has been around a long time. It is supported back to IE8.

@deronsizemore

Hard for an old dog to learn new tricks, I guess.

Old dog?

[PaulOB]

@deronsizemore

y only worry with it is it appears that display:table is only supported in IE 11?

As Ron Said display:table is supported fully back to IE8 but these days you should be careful about supporting discontinued browsers as they are security risks and users should be actively discouraged from using them.

Support for older versions of IE is rapidly dropping and the usage for versions less than IE11 is under 2% now.

It’s ok to support older browsers while they are actively supported by their vendor but once they stop being patched you shouldn’t really support that browser anymore as it encourages users to surf without security. Of course if your demographic shows a high proportion of your users using said browsers then you may indeed have to support it.

[deronsizemore]

@ronpat

It elevates .sidebar above .main-wrap.

Apply different background colors to .sidebar and .main-wrap to see what is happens when you add {position:relative} to .sidebar.

Thanks

@ronpat

{display:table} has been around a long time. It is supported back to IE8.

I see that now. It appeared at first glance that it was only supported in IE11 on caniuse.com. Thanks

@ronpat

Old dog?

I was learning CSS from @PaulOB back in the early 2000’s here on SitePoint. I’m old in internet years! [quote=“PaulOB, post:7, topic:254806”]
As Ron Said display:table is supported fully back to IE8 but these days you should be careful about supporting discontinued browsers as they are security risks and users should be actively discouraged from using them.

Support for older versions of IE is rapidly dropping and the usage for versions less than IE11 is under 2% now.

It’s ok to support older browsers while they are actively supported by their vendor but once they stop being patched you shouldn’t really support that browser anymore as it encourages users to surf without security. Of course if your demographic shows a high proportion of your users using said browsers then you may indeed have to support it.
[/quote]

Good point. Thanks again @PaulOB

[SamA74]

@deronsizemore

I see that now. It appeared at first glance that it was only supported in IE11 on caniuse.com.

I think caniuse does not mention anything older than IE11 (unless you click “Show all”) because they are history.