josephbupe Posted September 15, 2014 Share Posted September 15, 2014 Hi, I am trying to align sections of my CSS layout side-by-side, but I am having problems with it. I expect the left sidebar (#aside) with a 30% width to meet with the content section (#content) of the width of 70%. But, the changes I make are not translating as expected. See attached screenshort of what is happening and the CSS code bellow: #container { margin: 0 auto; width: 800px; background: #fff; } #header { background: #5a83c3; padding: 20px; } #header h1 { margin: 0; } #navigation { float: left; width: 100%; background: #d1dceb; border-top: 1px solid #fff; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #navigation li a:hover { background: #383; } #content-container { float: right; width: 100%; background: #FFF url(layout-two-liquid-background.gif) repeat-y 68% 0; } #content { clear: right; float: right; width: 70%; padding: 10px 0; margin: 0 0 0 4%; display: inline; background: #dfe6ef; border-top: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid #fff; } #content h2 { margin: 0; } #aside { float: left; width: 20%; padding: 10px 0; margin: 0 3% 0 0; display: inline; background: #d1dceb; border-top: 1px solid #fff; } #aside h3 { margin: 0; } #footer { clear: right; background: #d1dceb; text-align: right; padding: 20px; width: 68%; float: right; overflow: hidden; } #footer p.left { float: left; text-align: left; margin-left: 5px; } #footer p.right { float: right; text-align: right; margin-right: 5px; } Quote Link to comment https://forums.phpfreaks.com/topic/291077-css-style-layout/ Share on other sites More sharing options...
Solution josephbupe Posted September 15, 2014 Author Solution Share Posted September 15, 2014 Resolved. The issue was with the margin settings. Regards Quote Link to comment https://forums.phpfreaks.com/topic/291077-css-style-layout/#findComment-1491148 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.