bbruman bbruman - 2 years ago 73
HTML Question

Center DIV Relative to Parent DIV next to menu DIV

#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).

Answer Source

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.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download