2

https://jsfiddle.net/ahqamm7o/1/

#parent {
text-align: center;
}

.content {
display: inline-block;
text-align: left;
margin: auto;
width: 50%;
}

.menu {
float: left;
text-align: left;
width: 20%
}

I tried using techniques from CSS: center element within a <div> element but this does not seem to apply for DIVs with an 'inline-block' style.

Note 'inline-block' is not a requirement I have, I am just merely looking for the menu to float left and the content to be positioned directly to the side of it (with the content centered relative to 'parent')

I am trying to center 'content' relative to 'parent' (that is, center 'content' as if 'menu' was not there).

Community
  • 1
  • 1
bbruman
  • 667
  • 4
  • 20

2 Answers2

2

If you specified the limited width then float:left is not needed, apply the text-align:center to the .content class so it will align the content center with in that particular div, if we use position:absolute the parent should be in position:relative.

parimala morampudi
  • 21
  • 2
  • Ah! Okay. Adding `position:relative` to the parent allowed me to keep top at 0px and it looks much better and more stable in the style. – bbruman May 05 '16 at 02:34
0

You had some tag issues: An extra section tag, div tag.

To solve your issue I removed float: left from .menu and added:

position: absolute;
top: 0px;
left: 0px;

This will always position the menu on the left and the primary content will be centered as if the menu is not there.

Fiddle: https://jsfiddle.net/ahqamm7o/2/

theblindprophet
  • 7,767
  • 5
  • 37
  • 55
  • This resolves the issue, thank you. Although, I was looking for something else besides `position:absolute` as once you try to position it farther down (say 200px down or maybe 20% down), you encounter some cross browser issues – bbruman May 05 '16 at 02:18
  • This isn't a good solution as it requires the parent to be in an absolute location. – mbomb007 Oct 20 '16 at 18:58
  • Thanks for such constructive feedback. – theblindprophet Oct 20 '16 at 19:03