Aligning two sections side by side

HTML & CSS
1

For the past three hours been playing around with the CSS on my website. But, since I’m trying to make it more responsive, I’ve been having a problem. The sections aren’t aligning with each other (Even under the “standard view”). I’ve worked around with the position, clear, float, display… etc (practically everything!) and nothing has seemed to work. Maybe, you guys can give it a crack and see what I’ve been doing wrong / I messed up completely!

Kind regards!

Here is the current CSS I have applied (without media types) and it’s the closest to what I want done:

body {
	font-family: Lucida Sans Unicode;
	font-size: .8em;
	color: #262626;
	line-height: 1.3em;
	margin: 0 auto;
	background: #D0C4AF;
}

#content {
	margin: 0 auto;
	width: 960px;
	background-color: #F1F0EC;
}

#container {
	padding-top: 5em;
}

article#content {
	width: 960px;;
	margin: 0;
	padding: 0;
	display: inline;
}


article#content section.x {
	width: 60em;
	margin-right: auto;
	margin-left: auto;
}


article#content section.y {
	clear: right;
	width: 20em;
	margin-left: 8em;
	float: left;
}

article#content section.z {
	width: 40em;
	margin-right: 5em;
	float: left;
}


img.center {
	margin-right: auto;
	margin-left: auto;
	padding: .7em;
	padding-bottom: 2em;
}

And the HTML:

	<body>
		<div id="content">
			<div id="container">
				<article id="content">
					<h2>Some Title</h2>

					<section class="x">
						<img src="pic.jpg" class="center"/>
						<img src="pic.jpg" class="center"/>
						<img src="pic.jpg" class="center"/>
						<img src="pic.jpg"  class="center"/>
					</section>

					<section class="y">
						<h3>Left Section</h3>
	
					        <p>This part seems to work. It tends to be the right section which messes up the look of the webpage in the browser.</p>
					</section>
					
					<section class="z">
						<h3>Right Section</h3>

						<p>I'm not sure why or how but it's this section which causes the problems. Whether I change the float/position/... it sometimes never catches a-hold of everything. I'm probably overlooking something simple. Props to who can ever help! Thanks! :)</p>
					</section>
				</article>
			</div>
		</div>
	</body>
2

Like this? http://www.websitecodetutorials.com/code/css/css3-equal-height-columns.php

3

I tried that and it worked alright. But I was hoping to keep them in sections for practical use. I’ll continue to work on it!

Thank you for your response EricWatson! :slight_smile:

4

Those are sections? If you simply want side by side then float left two divs.

5

I wanted to use the <section> tag haha
Thank you for your suggestions though! Had a breakthrough with the design and decided on something new/better :slight_smile:

Time to get busy and work!